@butterbar-color-1: #009e8b;
@butterbar-color-2: #1c90a3;
@butterbar-color-3: #31539b;

.butterbar{
  position: relative;
  margin-bottom: -@butterbar-height;
  height: @butterbar-height;
  .bar{
    position: absolute;
    height: 0;
    width: 100%;
    text-indent: -9999px;
    background-color: @butterbar-color-1;
    &: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: @butterbar-color-1 }
  33.3%   { background-color: @butterbar-color-1 }
  33.33%  { background-color: @butterbar-color-2 }
  66.6%   { background-color: @butterbar-color-2 }
  66.66%  { background-color: @butterbar-color-3 }
  99.9%   { background-color: @butterbar-color-3 }
}

@-moz-keyframes changebar{
  0%      { background-color: @butterbar-color-1 }
  33.3%   { background-color: @butterbar-color-1 }
  33.33%  { background-color: @butterbar-color-2 }
  66.6%   { background-color: @butterbar-color-2 }
  66.66%  { background-color: @butterbar-color-3 }
  99.9%   { background-color: @butterbar-color-3 }
}

@keyframes changebar{
  0%      { background-color: @butterbar-color-1 }
  33.3%   { background-color: @butterbar-color-1 }
  33.33%  { background-color: @butterbar-color-2 }
  66.6%   { background-color: @butterbar-color-2 }
  66.66%  { background-color: @butterbar-color-3 }
  99.9%   { background-color: @butterbar-color-3 }
}