iOS Style Gradient Progress Bar with Pure CSS/CSS3

Category: CSS & CSS3 , Loading | January 15, 2015
Author: m412c0
Views Total: 6,968
Official Page: Go to website
Last Update: January 15, 2015
License: MIT

Preview:

iOS Style Gradient Progress Bar with Pure CSS/CSS3

Description:

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

You Might Be Interested In:


2 thoughts on “iOS Style Gradient Progress Bar with Pure CSS/CSS3

  1. Mohd Hirwan Dzahiruddin

    Hi, how can i make individuals progress bar? Like the 1st progress is 50%, 2nd will be 15% and etc.

    Reply
  2. Saurabh Sharma

    If I make width of the .progress 100% and .progressbar : background-size: 100% 0.25em;
    Animation turns to stretch out gradient instead, how can I make it fill with 100% width?

    Reply

Leave a Reply