<section class="container text-center">
  <h1>UX Progress Bar</h1>
  <div class="progress-bar">
    <div class="progress">
      <div class="progress-shadow"></div>
    </div>
  </div>
</section>
body
  background-color #f5f7f9
  color #bcbcbc
  font-family 'Open Sans', sans-serif
h1
  font-size 65px
  font-weight lighter
  color #666
  margin 1em 0 0.5em
/* Helpers */
.text-center
  text-align center
.container
  margin 0 auto
  width 70%

/* Progress Bar Variables */
$progress-height = 10px
$progress-width = 500px
$progress-disabled-color = #e5e9eb
$progress-shadow-color = #eaecee
/* Progress Bar CSS*/
.progress-bar
  margin 0 auto
  width $progress-width
  height $progress-height
  background-color $progress-disabled-color
  .progress
    position relative
    background-color lightgreen
    height $progress-height
    width 100%
    -webkit-animation-duration 5s
    -webkit-animation-name width
    .progress-shadow
      background-image linear-gradient(to bottom, $progress-shadow-color, transparent)
      position absolute
      height 4em
      width 100%
      top 100%
      transform skew(-22.5deg)
      transform-origin 0 0
@keyframes width
  0%, 100% 
    transition-timing-function cubic-bezier(1, 0, 0.65, 0.85)
  0%
    width 0
  100%
    width 100%
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js