@component: Uretail-SpinBar;
@color0: #FE7862;
@color1: #FFB429;
@color2: #68A7E5;

.@{component}-wrap {
  position: relative;
  width: 100%;
}

.@{component} {
  position: absolute;
  top: 0px;
  height: 3px;
  width: 100%;

  &-bar {
    position: absolute;
    width: 100%;
    height: 0;
    background-color: @color0;


  }

  &-bar:before {
    position: absolute;
    right: 50%;
    left: 50%;
    height: 3px;
    background-color: inherit;
    content: ""
  }
}

.@{component}Active {
  -webkit-animation: changebar 2.25s infinite .75s;
  -moz-animation: changebar 2.25s infinite .75s;
  animation: changebar 2.25s infinite .75s;

  .@{component}-bar {
    -webkit-animation: changebar 2.25s infinite;
    -moz-animation: changebar 2.25s infinite;
    animation: changebar 2.25s infinite;

    &:before {
      -webkit-animation: movingbar .75s infinite;
      -moz-animation: movingbar .75s infinite;
      animation: movingbar .75s infinite
    }
  }

}

@-webkit-keyframes movingbar {
  0% {
    right: 50%;
    left: 50%
  }

  99.9% {
    right: 0;
    left: 0
  }

  100% {
    right: 50%;
    left: 50%
  }
}

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

  99.9% {
    right: 0;
    left: 0
  }

  100% {
    right: 50%;
    left: 50%
  }
}

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

  99.9% {
    right: 0;
    left: 0
  }

  100% {
    right: 50%;
    left: 50%
  }
}

@-webkit-keyframes changebar {

  0%,
  33.3% {
    background-color: @color0
  }

  33.33%,
  66.6% {
    background-color: @color1
  }

  66.66%,
  99.9% {
    background-color: @color2
  }
}

@-moz-keyframes changebar {

  0%,
  33.3% {
    background-color: @color0
  }

  33.33%,
  66.6% {
    background-color: @color1
  }

  66.66%,
  99.9% {
    background-color: @color2
  }
}

@keyframes changebar {

  0%,
  33.3% {
    background-color: @color0
  }

  33.33%,
  66.6% {
    background-color: @color1
  }

  66.66%,
  99.9% {
    background-color: @color2
  }
}