iOS Style Gradient Progress Bar with Pure CSS/CSS3

An animated, gradient, iOS inspired progress bar made with pure CSS and CSS3.

How to use it:

Include prefixfree.min.js in the document so that you can use only unprefixed CSS3 properties everywhere.

<script src="prefixfree.min.js"></script>

Create the Html for the progress bar.

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

Style the progress bar.

.progress-bar {
  animation-duration: 3s;
  animation-name: width;
  background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  background-size: 24em 0.25em;
  height: 100%;
  position: relative;
}

Add a shadow to the progress bar.

.progress-shadow {
  background-image: linear-gradient(to bottom, #eaecee, transparent);
  height: 4em;
  position: absolute;
  top: 100%;
  transform: skew(45deg);
  transform-origin: 0 0;
  width: 100%;
}

Animate the progress bar using CSS3 keyframes.

@keyframes width {
  0%, 100% {
    transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
  }
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}