<div class="progress-bar">
  <span class="bar">
    <span class="progress"></span>
  </span>
</div>

// Color Variables ======================================
$green: #75b800;
$gray-light: #eef1f3;

// Bar Variables ========================================
$bar-size: 5px;
$bar-radius: 60px;
$bar-bg: rgba(0,0,0,0.075);

body {
  background: $gray-light;
}

// Animation =============================================
// Edit these at random intervals to change the animation.
@keyframes loader {

  0% {
    width: 0;
  }

  20% {
    width: 10%;
  }

  25% {
    width: 24%;
  }

  43% {
    width: 41%;
  }

  56% {
    width: 50%;
  }

  66% {
    width: 52%;
  }

  71% {
    width: 60%;
  }

  75% {
    width: 76%;
    
  }

  94% {
    width: 86%;
  }

  100% {
    width: 100%;
  }

}

// Bar ============================================
.progress-bar {
  border-radius: $bar-radius;
  overflow: hidden;
  width: 100%;

  span {
    display: block;
  }

}

.bar {
  background: $bar-bg;
}

.progress {
  animation: loader 8s ease infinite;
  // Change the animation fill mode 'infinite' to 'forwards' to stop the animation from repeating.
  background: $green;
  color: #fff;
  padding: $bar-size;
  width: 0;
}

// Vertical Centering ==============================
// You don't need this to make it work on your site.
.progress-bar {
  left: 50%;
  max-width: 50%;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%,-50%,0);
}

// Feel free to use this on any personal or commercial project!
// by Justin Bellefontaine

// @JBValo on Twitter
// http://dribbble.com/jbvalo