app/addons/components/assets/less/loading-lines.less

@import "../../../../../assets/less/variables.less";


@loadingLinesHeight: 30px;
@loadingLinesMargin: 3px;
@loadingLinesWidth: 10px;
@loadingLinesTime: 0.8s;
@loadingLinesEffect: linear;
@loadingLinesColor: @brandPrimary;

.loading-lines {
  display: block;
  width: 80px;
  margin-left: auto;
  margin-right: auto;
  div {
    background-color: @loadingLinesColor;
    width: @loadingLinesWidth;
    height: 1px;
    float: left;
    animation: height-change @loadingLinesTime infinite @loadingLinesEffect;
    -webkit-animation: height-change @loadingLinesTime infinite @loadingLinesEffect;
  }
}

#line2 {
  animation-delay: 0.1s;
  -webkit-animation-delay: 0.1s;
  margin-left: @loadingLinesMargin;
}
#line3 {
  animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
  margin-left: @loadingLinesMargin;
}
#line4 {
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  margin-left: @loadingLinesMargin;
}

@-webkit-keyframes height-change {
  0% {
    height: 1px;
  }
  50% {
    height: @loadingLinesHeight;
  }
  100% {
    height: 1px;
  }
}
@keyframes height-change {
  0% {
    height: 1px;
  }
  50% {
    height: @loadingLinesHeight;
  }
  100% {
    height: 1px;
  }
}