Friday, 14 February 2014

How to design website progres bars with minimal effort using css3

Progre(c)ss is a plugin that helps you create pure css progress bars with minimal effort.

The script takes advantage of CSS pseudo elements and preprocessing tools such as __less and sass. We can add progre(c)ss bars to any existing element on our page without being intrusive just by adding some attributes and classes.

Preprocessing tools such as less and sass mean we can write minimal code making use of looping in order to sit back and reap the benefits and drink a coffee!

Browser Support - Fully supported from IE10 up and rest other browsers


1. Include the stylesheet.
2. Add the class progrecss to your element (any existing element)
3. Add a data attribute data-progrecss defining the completion percentage (1 to 100) and any optional helper data attributes and classes for your desired behaviour/position/appearance
4. Update progre(c)ss value if necessary using simple vanilla js or whatever suits you best!

<div class="progrecss" data-progrecss="77"> My first progre(c)ss!</div>


  1. thanks for your blog, blog is really helpful for website design based on Web Development services in Hyderabad

  2. Anyway, I have read some of posts in your blog here. And all of them are very informative. Thanks for sharing.

  3. The coding is so easy in PHP that makes easy website development strategy. Not only this availability of such coding websites makes it more easy.
    This gave a new ray of hope to the IT industry that have web development sector. This also makes rise in the employment opportunity such as the eCommerce developers hiring increasing especially hire PrestaShop developer with magneto developer.

  4. Very informative and very helpful post, basically not just this but everyone. Thx for your hard work.