Category : Css | Author : Chtiwi Malek | First posted : 11/27/2012 | Updated : 9/7/2014
Tags : animation, bar, progress, css3, loading, css
Pure CSS Progress Bar | Animated with CSS3

Pure CSS Progress Bar | Animated with CSS3

Loading animations and progress bars are really important to keep users informed about the progress of the task, I developed many JavaScript-based animations years ago, but I decided to switch to Css3.

For this tutorial I decided to make an animated progress bar using pure css: no flash, no images and no scripts. Also I focused on finding the easiest way to do it.

Here’s a working example :
Edit : a new 3D version of this progress bar with source code is available here => 3D Progress Bar

The Html Markup :

All we need is two Divs for this, the first div will represent the main container and will have rounded corners and a shadow effect, the second div is the actual progress bar.

Also I added an input and a button to control and play with the progress bar.  
<div id="prbar">
  <div id="prpos">
  </div>
</div>

<input id="moveTo" value="57" style="width:30px;" />%
<button onclick="MoveTo();return false;">Move</button>

The CSS :

#prbar {
    margin:5px;
    width:500px;
    background-color:#dddddd;
    overflow:hidden;
    
    /* Rounded Border */
    border: 1px solid #bbbbbb;
    -moz-border-radius: 15px;
    border-radius: 15px;
            
    /* Adding some shadow to the progress bar */
    -webkit-box-shadow: 0px 2px 4px #555555;
    -moz-box-shadow: 0px 2px 4px #555555;
    box-shadow: 0px 2px 4px #555555;            
}
        
/* No rounded corners for Opera, because the overflow:hidden dont work with rounded corners */
doesnotexist:-o-prefocus, #prbar {
  border-radius:0px;
}
        
#prpos {
    width:0%;
    height:30px;
    background-color:#3399ff;
    border-right:1px solid #bbbbbb;
           
    /* CSS3 Progress Bar Transitions */
    transition: width 2s ease;
    -webkit-transition: width 0s ease;
    -o-transition: width 0s ease;
    -moz-transition: width 0s ease;
    -ms-transition: width 0s ease;
   
    /* CSS3 Stripes */
    background-image: linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-image: -moz-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-image: -ms-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-image: -o-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-image: -webkit-gradient(linear, 100% 100%, 0 0,color-stop(.25, #99ccff), color-stop(.25, #3399ff),color-stop(.5, #3399ff),color-stop(.5, #99ccff),color-stop(.75, #99ccff),color-stop(.75, #3399ff),color-stop(1, #3399ff));
    background-image: -webkit-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-size: 40px 40px;

    /* Background stripes animation */
    animation: bganim 3s linear 2s infinite;
    -moz-animation: bganim 3s linear 2s infinite;
    -webkit-animation: bganim 3s linear 2s infinite;
    -o-animation: bganim 3s linear 2s infinite;
    -ms-animation: bganim 3s linear 2s infinite;
}
        
@keyframes bganim {
    from {background-position:0px;} to { background-position:40px;}
}
@-moz-keyframes bganim {
    from {background-position:0px;} to { background-position:40px;}
}
@-webkit-keyframes bganim {
    from {background-position:0px;} to { background-position:40px;}
}
@-o-keyframes bganim {
    from {background-position:0px;} to { background-position:40px;}
}
@-ms-keyframes bganim {
    from {background-position:0px;} to { background-position:40px;}
}
The width and height of the progress bar need to be specified only once, the width is specified in the 'prbar' selector and the height in 'prpos'.

You can compose any background stripes you want or any texture for instance using linear-gradient, you can draw gradients, lines, circles..

The Animation :

Now to animate our progress bar, we only have to set a new width for the second div, the easiest way of course is to specify directly a percentage-based width.

This small javascript function will read the input value, and set the width to animate the progress bar.
function MoveTo() {
    var prpos = document.getElementById('prpos');
    prpos.style.width = document.getElementById('moveTo').value + "%";
}
This progress bar will work run on latest versions of major web browsers.

I'd love to hear your thoughts and ideas, so feel free to comment.
And if you like this tutorial, please Share it.
About the author :
Malek Chtiwi is the man behind Codicode.com
34 years old full stack developer.
Loves technology; but also likes design, photography and composing music.
Comments & Opinions :
Clipping Path
Thank you for the great tutorial! It has been very helpful to see a few techniques in action.
- by Shamim on 12/22/2012
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :


» Member access
 
» Latest
» Random/Popular
© Codicode | Content and source © 2013