Animated Progress Bars with CSS3

Here is a fun demonstration on how you can create your own responsive, animated progress bars using nothing but pure CSS3. No images were harmed in the making of this tutorial. Resize your browser window to see the sample resize.

The below examples are supported on IE10+, Firefox, Opera and Safari.

We’ll start by styling the base of the bar. By using border-radius; and box-shadow; we can create a pretty foundation for the loader.

The Background

.barBg {
background:#282828;
width:90%;
height:15px;
border:10px solid #282828;
border-radius: 20px;
box-shadow: 0px 5px 17px rgba(40, 40, 40, 0.5);
}

Result

Next, we’ll create the background for the loader. The animated portion will be a translucent overlay, so you can easily change the colour and background properties if you chose to do so later on. I’ve used a gradient background but this can easily be swapped out for a solid colour or background image.

The Gradient Colour Fill

.bar {
background: #7aff32;
width:60%;
height:30px;
height: 15px;
border-radius: 12px;
background: -moz-linear-gradient(top, #7aff32 0%, #54a6e5 100%);
background: -webkit-linear-gradient(top, #7aff32 0%,#54a6e5 100%);
background: -o-linear-gradient(top, #7aff32 0%,#54a6e5 100%);
background: -ms-linear-gradient(top, #7aff32 0%,#54a6e5 100%);
background: linear-gradient(to bottom, #7aff32 0%,#54a6e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#7aff32′, endColorstr=’#54a6e5′,GradientType=0 );
}

Result

Now comes the fun part. We’ll be creating the linear pattern with gradients and using @keyframes to animate the tile.

The Animated Overlay

@-webkit-keyframes progress
{
to {background-position: 30px 0;}
}

@-moz-keyframes progress
{
to {background-position: 30px 0;}
}

@keyframes progress
{
to {background-position: 30px 0;}
}

.barFill {
width: 100%;
height: 15px;
border-radius: 20px;
-webkit-animation: progress 1s linear infinite;
-moz-animation: progress 1s linear infinite;
animation: progress 1s linear infinite;
background-repeat: repeat-x;
background-size: 30px 30px;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);

Result

I’ve created an animation with animation: progress 1s linear infinite;, which plays the 30px gradient tile I’ve created on an infinite loop. Since we set the width to 100%, the overlay will always tile to fill the dimensions specified with our colour fill.

You might notice I didn’t set the initial state with my @keyframes animation. The CSS spec is intelligent enough to use the default CSS styling as the base state. Less code, less hassle!

Adjusting Size and Style

Since we’ve specified all our widths in percentages, it’s simple to adjust the fill anywhere from 0% to 100%. On our .bar class, try changing the width to another value.

100% Fill

75% Fill, Different Background

If loaders aren’t your thing, you can easily take the concepts shown here and translate them for use with graphs, timelines, or anything else where you might need a bar to represent your information.

I’ve put together some additional samples here with extra classes to define width and style.

Download Files

Enjoy!


244,499 total views, 20 views today

Posted on March 24, 2013 by Sarah · 7 comments

7 comments

  1. Pingback: 15+ Free Animated Progress Bar and Skills Bar Plugins | Weblees

  2. Aeon Yuon Miller
    - Reply

    Speaking of progress-bars, I would love to add my own progress-bar in Adobe Edge … I’m thinking about just having a DIV go from left 0% to right 100% over the full site.

    Hope this will be added soon.

Leave a Comment

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