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.

  5. The existing age may rightly possibly be referred to as the age of technology due to the rush inside web-designing advancements. Today, time in addition to technology get in hand along with the blend of the two of these significant elements possesses resulted in massive progress in the planet.

  6. Primeau Productions will be the full-service online video production company, inside corporation pertaining to greater than 30 years. Primeau Productions owes it is success directly for the results The idea achieves for the clients. i tend to be an results-oriented company, In the same way recognized coming from MY OWN written record of long-term, repeat customers.keynote-speaker-demo-video-production