Angular-Cn/modules/angular2_material/src/components/progress-linear/progress_linear.scss

@import "../../core/style/variables";

// TODO(jelbourn): This goes away.
@import "../../core/style/default-theme";

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

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

  *, *:before {
    box-sizing: border-box;
  }

  .md-progress-linear-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-progress-linear-container.md-ready {
    transform: translate(0, 0) scale(1, 1);
  }

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

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

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

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

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

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

    .md-progress-linear-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-progress-linear-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;
  }
}


// THEME

md-progress-linear {
  .md-progress-linear-container {
    background-color: md-color($md-primary, 100);
  }

  .md-progress-linear-bar {
    background-color: md-color($md-primary);
  }

  &.md-warn .md-progress-linear-container {
    background-color: md-color($md-warn, 100);
  }

  &.md-warn .md-progress-linear-bar {
    background-color: md-color($md-warn);
  }

  &.md-accent .md-progress-linear-container {
    background-color: md-color($md-accent, 100);
  }

  &.md-accent .md-progress-linear-bar {
    background-color: md-color($md-accent);
  }

  &[md-mode=buffer] {
    &.md-primary {
      .md-progress-linear-bar1 {
        background-color: md-color($md-primary, 100);
      }
      .md-progress-linear-dashed:before {
        background: radial-gradient(md-color($md-primary, 100) 0%, md-color($md-primary, 100) 16%, transparent 42%);
      }
    }
    &.md-warn {
      .md-progress-linear-bar1 {
        background-color: md-color($md-warn, 100);
      }
      .md-progress-linear-dashed:before {
        background: radial-gradient(md-color($md-warn, 100) 0%, md-color($md-warn, 100) 16%, transparent 42%);
      }
    }
    &.md-accent {
      .md-progress-linear-bar1 {
        background-color: md-color($md-accent, 100);
      }
      .md-progress-linear-dashed:before {
        background: radial-gradient(md-color($md-accent, 100) 0%, md-color($md-accent, 100) 16%, transparent 42%);
      }
    }
  }
}