Download Demo
ProgressJs is a JavaScript and CSS3 library which helps developers create and manage progress bars for any object on the page. You can design your own template for progress bars or simply customize them.
You can use ProgressJs to show the progress of loading contents (images, videos, etc.) on the page to the users. It can be used on all elements including textboxes, textareas or even the whole body.
It’s light-weight, easy to use, customizable, free and open-source.
1. INCLUDE CSS AND JS FILES
<script src="progress.js"></script>
<link href="progressjs.css" rel="stylesheet">
2. HTML
<textarea id="countTextarea" placeholder="Start typing.." rows="4"></textarea>
3. JAVASCRIPT
//to set progress-bar for whole page
progressJs().start();
//or for specific element
var prgjs = progressJs("#countTextarea").setOptions( theme: 'blackRadiusInputs' ).start();
prgjs.set(50);
4. API
progressJs([targetElm])
Creating an ProgressJS object.
Available since: v0.1.0
Parameters:
- targetElm : String (optional) Should be defined to start progress-bar for specific element, for example: #targetElement.
Returns:
Example:
progressJs() //without selector, set progress-bar for whole page
progressJs("#targetElement") //start progress-bar for element id='targetElement'
progressJs.start()
Start the progress-bar for defined element(s).
Available since: v0.1.0
Returns:
Example:
progressJs.set(percent)
Set specific percentage to progress-bar
Available since: v0.1.0
Parameters:
- percent: Number
Set to specific percentage
Returns:
Example:
progressJs().set(20); //set progress to 20%
progressJs.autoIncrease(size, millisecond)
Set an auto-increase timer for the progress-bar.
Available since: v0.1.0
Parameters:
- size: Number
The size of increment when timer elapsed
- millisecond: Number
Timer in milliseconds
Returns:
Example:
progressJs().start().autoIncrease(4, 500); //every 500 milliseconds, percentage + 4
progressJs.increase([size])
Increase the progress-bar bar specified size. Default size is 1.
Available since: v0.1.0
Parameters:
- size: Number
The size of increment
Returns:
Example:
progressJs().increase(); //increase one percent
progressJs().increase(2); //increase two percent
progressJs.end()
End the progress-bar and remove the elements from page.
Available since: v0.1.0
Returns:
Example:
progressJs().start().set(20).end()
progressJs.setOption(option, value)
Set a single option to progressJs object.
Available since: v0.1.0
Parameters:
- option : String
Option key name.
- value : String/Number
Value of the option.
Returns:
Example:
progressJs().setOption("theme", "black");
progressJs.setOptions(options)
Set a group of options to the progressJs object.
Available since: v0.1.0
Parameters:
- options : Object
Object that contains option keys with values.
Returns:
Example:
progressJs().setOptions( 'theme': 'black', 'overlayMode': true );
progressJs.onbeforeend(providedCallback)
Set a callback function for before end of the progress-bar.
Available since: v0.1.0
Parameters:
- providedCallback : Function
Returns:
Example:
progressJs().onbeforeend(function()
alert("before end");
);
progressJs.onbeforestart(providedCallback)
Set a callback function to call before start the progress-bar.
Available since: v0.1.0
Parameters:
- providedCallback : Function
Returns:
Example:
progressJs().onbeforestart(function()
alert("before start");
);
progressJs.onprogress(providedCallback)
Set callback function to call for each change of progress-bar.
Available since: v0.1.0
Parameters:
- providedCallback : Function
Returns:
Example:
progressJs().onprogress(function(targetElm, percent)
alert("progress changed to:" + percent);
);
ProgressJs - A themeable progress bar library for everything