Material design progress bars

index.html

<h3>Indeterminate</h3>
<div class="progress">
  <div class="indeterminate"></div>
</div>

<br>
<h3>Determinate</h3>
<div class="progress">
  <div class="determinate" style="width: 70%"></div>
</div>

<br>
<br>

<p>See <a href="http://materializecss.com/preloader.html">Materializecss.com<a> for more info.

Material-design-progress-bars.markdown

Material design progress bars

Determinate and indeterminate progress bars. Simplified version sourced from the materialize framework: http://materializecss.com/preloader.html

A Pen by Andrew J. Holden on CodePen.

License.

style.scss

@import "compass/css3";
// Keyframes
@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

/* Progress Bar */
$progress-bar-color: #26a69a !default;

// Progress Bar
.progress {
  position: relative;
  height: 4px;
  display: block;
  width: 100%;
  background-color: lighten($progress-bar-color, 40%);
  border-radius: 2px;
  background-clip: padding-box;
  margin: 0.5rem 0 1rem 0;
  overflow: hidden;
  .determinate {
    position: absolute;
    background-color: inherit;
    top: 0;
    bottom: 0;
    background-color: $progress-bar-color;
    transition: width .3s linear;
  }
  .indeterminate {
    background-color: $progress-bar-color;
    &:before {
      content: '';
      position: absolute;
      background-color: inherit;
      top: 0;
      left:0;
      bottom: 0;
      will-change: left, right;
      // Custom bezier
      animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;

    }
    &:after {
      content: '';
      position: absolute;
      background-color: inherit;
      top: 0;
      left:0;
      bottom: 0;
      will-change: left, right;
      // Custom bezier
      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
      animation-delay: 1.15s;
    }
  }
}
@include keyframes(indeterminate) {
  0% {
    left: -35%;
    right:100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}

@include keyframes(indeterminate-short) {
  0% {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}