Discussion on Pure CSS3 Progress Bars


jorok supports this item


This author's response time can be up to 2 business days.

13 comments found.

Nice work.

Welcome, and good luck with sales :)

Thanks, i’ll do my best!

Is it possible to have the progress bar set for a time to fill?

For example, if I have a page that redirects in 10 seconds, is it possible to set this so that it reaches full in 10 seconds?

If this isn’t incorporated into it, can you give me the code that would do this? (I’m not a programmer.)

Also, what is the PSD for, if this is entirely CSS3 ?


Yes, it’s possible with little JavaScript. I’ll try to explain:

1. Include jQuery Framework between <head> tag in your document. Use this line:
<script type="text/javascript" src=""></script>
2. Right after that, paste this code:
<script type="text/javascript">
    $(document).ready( function() {
        $('.progressbar').animate({width: '100%'}, 10000, 'linear');
$(’.progressbar’) is the “thing” you want to animate. Check it carefully! The number 10000 (10 seconds) represents the time between 0 and 100%. That’s it. But keep in mind, that the example above, starts right after the page is loaded. If you want progress to start after button is clicked, you must add something like this:
<script type="text/javascript">
$(document).ready( function() {
    $('buttonIDorClass').click( function() {
        $('.progressbar').animate({width: '100%'}, 10000, 'linear');

I hope this will help.

P.S. PSD is not included. Description was outdated, sorry.

How to insert/link code from this css into html ?

Paste this in the head section of your html document:
<link rel="stylesheet" href="pathtocssfolder/cssfilename.css" type="text/css" />

Of course, replace pathtocssfolder and cssfilename with the real ones. For example:

<link rel="stylesheet" href="css/style.css" type="text/css" />

Do you mind post an example, how to make it show 10%

You control only the width property of the progressbar div.
<div class="progress_type1">
    <div class="progressbar colorblue" style="width: 10%"> </div>

any chance to port this to wp plugin?

Hello Jorok,

Awesome plugin, I was wondering if there is a way to have this bars animated. Meaning that they load dynamically up to the value assigned on the css file. If I am not wrong right now they are static?

Let me know, please


Yes, at the moment they are static, but that is the idea :) If you want to move progress bar, you will have to change the width property, as I explained above. And yes, there is a very easy way to animate progress bar so it look like more loading bar. Quick example for webkit browsers: 1. First add this to CSS file:
@-webkit-keyframes progress {
    0% {
        width: 0; 

    100% {
        width: 100%;

2. Again, for example, in the CSS file find this selector .progress_type8 .progressbar.colorblue and add these declarations:

    -webkit-animation-name: progress;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

Notice that this will work only on webkit browsers. If you want Firefox, replace -webkit prefix with -moz. If you want more detailed explanations, please send me an email :)

awesome thank a lot man!


I was also wondering, if there is a way to make example number 8 to work in chrome. It appears empty


In .progress_type8 .progressbar.colorblue find background-size: 5px; and at the end of the line add 1px.

Result: background-size: 5px 1px;

Do this for the every color you like. In the next update I’ll fix that.

that works fine, thanks again for the prompt answer!! regards

Hello, I’ve gotten the bar (type 10) to show up and work. But I’m stuck at this step:

5. Once implemented, the progress bar will “move” when you increment the width value of the progressbar class.

I’m not entirely sure what you mean here. Changing the value in the css doesn’t do much and I’m not sure what I should add in the HTML to get it to animate.

.progress_type10 .progressbar { width: 30%; height: 16px; }

So basically, how do I get it to animate / move. I think I’m missing something (not an advanced user).

ps: I can mail you a live example url.

With move, I mean animated. Like in the ‘video preview’ (when the page loads). I can change the percentage value and it will set to a different progress bar length then.

Nevermind, I read up on this. They are static.

Why type 8 didnt work?

i sent, but no answer from you..

I sent you an e-mail with the fixed CSS 4 days ago… I’ll try again.

I wrote you an e-mail almost immediately. Is everything okay now?