manyi/static/angular-mod/css/less/app.butterbar.less

.butterbar{
  position: relative;
  margin-bottom: -@butterbar-height;
  height: @butterbar-height;
  .bar{
    position: absolute;
    height: 0;
    width: 100%;
    text-indent: -9999px;
    background-color: @brand-info;
    &:before{
      content: "";
      height: @butterbar-height;
      position: absolute;
      left: 50%;
      right: 50%;
      background-color: inherit;
    }
  }
}
.butterbar.active{
  -webkit-animation: changebar @butterbar-time*3 infinite @butterbar-time;
  -moz-animation: changebar @butterbar-time*3 infinite @butterbar-time;
  animation: changebar @butterbar-time*3 infinite @butterbar-time;
  .bar{
    -webkit-animation: changebar @butterbar-time*3 infinite;
    -moz-animation: changebar @butterbar-time*3 infinite;
    animation: changebar @butterbar-time*3 infinite;
    &:before{
      -webkit-animation: movingbar @butterbar-time infinite;
      -moz-animation: movingbar @butterbar-time infinite;
      animation: movingbar @butterbar-time infinite;
    }
  }
}

/* Moving bar */
@-webkit-keyframes movingbar{ 
  0%    { left:50%; right:50% } 
  99.9% { left:0%; right:0% } 
  100%  { left:50%; right:50%} 
}

@-moz-keyframes movingbar{ 
  0%    { left:50%; right:50% } 
  99.9% { left:0%; right:0% } 
  100%  { left:50%; right:50%} 
}

@keyframes movingbar{ 
  0%    { left:50%; right:50% } 
  99.9% { left:0%; right:0% } 
  100%  { left:50%; right:50%} 
}

/* change bar */
@-webkit-keyframes changebar{ 
  0%      { background-color: @brand-info }
  33.3%   { background-color: @brand-info }
  33.33%  { background-color: @brand-warning } 
  66.6%   { background-color: @brand-warning } 
  66.66%  { background-color: @brand-primary } 
  99.9%    { background-color: @brand-primary } 
}

@-moz-keyframes changebar{ 
  0%      { background-color: @brand-info }
  33.3%   { background-color: @brand-info }
  33.33%  { background-color: @brand-warning } 
  66.6%   { background-color: @brand-warning } 
  66.66%  { background-color: @brand-primary } 
  99.9%    { background-color: @brand-primary } 
}

@keyframes changebar{ 
  0%      { background-color: @brand-info }
  33.3%   { background-color: @brand-info }
  33.33%  { background-color: @brand-warning } 
  66.6%   { background-color: @brand-warning } 
  66.66%  { background-color: @brand-primary } 
  99.9%    { background-color: @brand-primary } 
}