Discussion on Stylish Css3 Animated Progress Bar


hkeyjun supports this item


8 comments found.

Awesome Job and welcome to the Codecanyon

Is these progress bar worked with Animation in scroll bar for webkit browsers???

Thanks for your comment!The Progress Bar can not wored whith animation in scroll bar for webkit browsers yet,but i will try!

Looks very nice :) Welcome to CodeCanyon and good luck with sales!


This is very nice! :)

Thanks manca :)

This is amazing and awesome.

I wonder if possible to add js code so that it keep loading to 100% after certain number of seconds say 10 seconds , Just like in redirect websites ?!

Thanks for purchase,you can use the below code to do you want. If the progress bar div tag’s id is ‘myprogress’ .use this with jQuery:
$('#myprogress span').animate({width:$('myprogress').width()*1},10000,'linear',function(){alert('complete!');})
remove line 39-42 in prgressbar.css
-moz-transition: width .4s ease-in-out; -webkit-transition:width .4s ease-in-out; -ms-transition:width .4s ease-in-out; -o-transition:width .4s ease-in-out;
to make animate more faster with js and disable the css width transition.


cmF Purchased

Really great product. Well documented and well done. However, I was really disappointed when the progress bars didn’t have the ease in functionality like these bars on load – http://opendept.net/extra/skills-bars-with-css3/index.html. I’m still brand new to CSS3 so I can’t work this in myself. Can you provide an example of how to create this effect? Thanks!

Hi cmF I can’t the the progress bar on your url,it’s ‘Page Not Found’.

Hey, good product. I was wondering if i could change the width of the actual progress bar not the color. I don’t like it being at 100%.

Hi KryptoAR , thanks for purchased,you can set the progress width buy <div class="pb green"><span style="width:60%"><i /></span></div> Or if you want to change the progress bar width you can set the div’s width or it’s wrapper’s width.

Would i be able to use variables in this aswell?

You can use jquery to select the span element and change it’s width style.

Hi, can these bar be used as performance indicator? I’m selling computers and want to display a performance bar under each PC to give a quick indication of their performance abilities. Can this plugin display a bar at a certain % permanently?

Nice Item