iOS Style Gradient Progress Bar with Pure CSS/CSS3

Author: m412c0
Views Total: 10,112 views
Official Page: Go to website
Last Update: January 15, 2015
License: MIT


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>

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%;

See also  Creating An App Style Drawer Menu With Pure CSS/CSS3

Leave a Reply

Your email address will not be published. Required fields are marked *