Creating Multi-purpose Progress Bars with Javascript and CSS3 – Progress.JS

Preview:

Description:

ProgressJs is a JavaScript and CSS3 based progress bar resolution that can apply on any objects on your web page like button, body, textarea, input and more. You can design your own template for progress bar or customize it simply.

You can use ProgressJs for show the progress of loading contents (Images, videos etc.) on the page to the users. It could be used on all elements including textbox, textarea or even whole body. It is light-weight, easy to use, customizable, free and open-source.

Basic usage:

Include the required progressjs.css and progress.js in the document.

<script src="src/progress.js"></script>
<link href="src/progressjs.css" rel="stylesheet">

Execute the following JavaScript code in the page:

//to set progress-bar for whole page
progressJs().start();
//or for specific element
progressJs("#targetElement").start();

Check the demo page for more examples.