ProgressJs - A themeable progress bar library for everything

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:

• progressJs object.

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:

• progressJs object.

Example:

progressJs().start()

---

progressJs.set(percent)

Set specific percentage to progress-bar

Available since: v0.1.0

Parameters:

• percent: Number
  
  Set to specific percentage

Returns:

• progressJs object.

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:

• progressJs object.

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:

• progressJs object.

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:

• progressJs object.

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:

• progressJs object.

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:

• progressJs object.

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:

• progressJs object.

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:

• progressJs object.

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:

• progressJs object.

Example:

progressJs().onprogress(function(targetElm, percent) 
 alert("progress changed to:" + percent);
);

ProgressJs - A themeable progress bar library for everything