sogo/UI/WebServerResources/scss/components/progressLinear/progressLinear.scss

$progress-linear-bar-height:5px !default;

md-progress-linear {
  display: block;
  width: 100%;
  height: $progress-linear-bar-height;

  .md-container {
    overflow: hidden;
    position: relative;
    height: $progress-linear-bar-height;
    top: $progress-linear-bar-height;
    transform: translate(0, 5px) scale(1, 0);
    transition: all .3s linear;
  }

  .md-container.md-ready {
    transform: translate(0, 0) scale(1, 1);
  }

  .md-bar {
    height: $progress-linear-bar-height;
    position: absolute;
    width: 100%;
  }

  .md-bar1, .md-bar2 {
    transition: all 0.2s linear;
  }

  &[md-mode=determinate] {
    .md-bar1 {
      display: none;
    }
  }

  &[md-mode=indeterminate] {
    .md-bar1 {
      animation: indeterminate1 4s infinite linear;
    }

    .md-bar2 {
      animation: indeterminate2 4s infinite linear;
    }
  }

  &[md-mode=buffer] {
    .md-container {
      background-color: transparent !important;
    }

    .md-dashed:before {
      content: "";
      display: block;
      height: $progress-linear-bar-height;
      width: 100%;
      margin-top: 0px;
      position: absolute;
      background-color: transparent;
      background-size: 10px 10px !important;
      background-position: 0px -23px;
      animation: buffer 3s infinite linear;
    }
  }

  &[md-mode=query] {
    .md-bar2 {
      animation: query .8s infinite cubic-bezier(0.390, 0.575, 0.565, 1.000);
    }
  }
}

@keyframes indeterminate1 {
  0% {
    transform: translateX(-25%) scale(.5, 1);
  }
  10% {
    transform: translateX(25%) scale(.5, 1);
  }
  19.99% {
    transform: translateX(50%) scale(0, 1);
  }
  20% {
    transform: translateX(-37.5%) scale(.25, 1);
  }
  30% {
    transform: translateX(37.5%) scale(.25, 1);
  }
  34.99% {
    transform: translateX(50%) scale(0, 1);
  }
  36.99% {
    transform: translateX(50%) scale(0, 1);
  }
  37% {
    transform: translateX(-37.5%) scale(.25, 1);
  }
  47% {
    transform: translateX(20%) scale(.25, 1);
  }
  52% {
    transform: translateX(35%) scale(.05, 1);
  }
  55% {
    transform: translateX(35%) scale(.1, 1);
  }
  58% {
    transform: translateX(50%) scale(.1, 1);
  }
  61.99% {
    transform: translateX(50%) scale(0, 1);
  }
  69.99% {
    transform: translateX(50%) scale(0, 1);
  }
  70% {
    transform: translateX(-37.5%) scale(.25, 1);
  }
  80% {
    transform: translateX(20%) scale(.25, 1);
  }
  85% {
    transform: translateX(35%) scale(.05, 1);
  }
  88% {
    transform: translateX(35%) scale(.1, 1);
  }
  91% {
    transform: translateX(50%) scale(.1, 1);
  }
  92.99% {
    transform: translateX(50%) scale(0, 1);
  }
  93% {
    transform: translateX(-50%) scale(0, 1);
  }
  100% {
    transform: translateX(-25%) scale(.5, 1);
  }
}

@keyframes indeterminate2 {
  0% {
    transform: translateX(-50%) scale(0, 1);
  }
  25.99%{
    transform: translateX(-50%) scale(0, 1);
  }
  28% {
    transform: translateX(-37.5%) scale(.25, 1);
  }
  38% {
    transform: translateX(37.5%) scale(.25, 1);
  }
  42.99% {
    transform: translateX(50%) scale(0, 1);
  }
  46.99% {
    transform: translateX(50%) scale(0, 1);
  }
  49.99% {
    transform: translateX(50%) scale(0, 1);
  }
  50% {
    transform: translateX(-50%) scale(0, 1);
  }
  60% {
    transform: translateX(-25%) scale(.5, 1);
  }
  70% {
    transform: translateX(25%) scale(.5, 1);
  }
  79.99% {
    transform: translateX(50%) scale(0, 1);
  }
}

@keyframes query {
  0% {
    opacity: 1;
    transform: translateX(35%) scale(.3, 1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0, 1);
  }
}

@keyframes buffer {
  0% {
    opacity: 1;
    background-position: 0px -23px;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    background-position: -200px -23px;
  }
}