Progress/Loading Bar for JavaScript and jQuery

ProgBar is a simple progress bar component written in JavaScript, using only jQuery core functionalities. Some of the features are:

progress indicator aimed to provide unobtrusive feedback
offers easy-to-use options and methods
offers callbacks and interrupts
does not require you to add CSS or images
does not require additional JavaScript libraries other than jQuery 1.4+
is browser backwards compatible down to Internet Explorer 8

// Documentation

// Include

You can place the ProgBar script include basically wherever you want, just make sure that jQuery is loaded before. jQuery is required and must be at least version 1.4 to work with ProgBar. Remember to pick jQuery 1.x if you need support for Internet Explorer ≤ 8, otherwise pick 2.x or 3.x.

<html>
    <head>

        ...

        <script src="jquery.js"></script>

    </head>
    <body>

        ...

        <script src="jquery.progbar.js"></script>

    </body>
</html>
<html>
    <head>

        ...

        <script src="jquery.js"></script>
        <script src="jquery.progbar.js"></script>

    </head>
    <body>

        ...

    </body>
</html>

// Initialization

You can create an instance of the ProgBar class by using the native new operator (explicit) or the available jQuery wrapper methods (implicit). Either way, keep the returned instance to work with later.

var bar = $(target).ProgBar();
var bar = new ProgBar(target);

// Constructors

Note: You can also use the $ alias instead of the fully qualified jQuery.

new ProgBar ( target, options ) : ProgBar
native object constructor, target is provided as argument
jQuery.ProgBar ( options ) : ProgBar
e.g. $('#foo').ProgBar();
considers the preceding jQuery object as target

// Methods

Note: The highlighted ProgBar refers to an instance of ProgBar.

ProgBar.run ( duration, callback )
starts the progress bar and completes within the specified duration (from 0 % to 100 %)
ProgBar.reverse ( duration, callback )
runs the progress bar from 100 % back to 0 % within the specified duration
ProgBar.closeIn ( duration )
starts the progress bar and fills up to 90 % within the specified duration, then takes 10 times the specified duration to complete
ProgBar.fadeOut ()
completes the progress bar, run this method to complete a call to ProgBar.closeIn() more smoothly
ProgBar.reset ()
resets the progress bar back to 0 %
ProgBar.val ( value, duration, callback )
sets the progress bar to the specified value,
the value can be set between 0 and 100 or to an absolute amount in case ProgBar.min() and/or ProgBar.max() was previously set
ProgBar.min ( value )
specifies the minimum value range
ProgBar.max ( value )
specifies the maximum value range

// Options

− options
width	'100%'	width of the progress bar
height	'4px'	height of the progress bar
color	'#2672EC'	color of the progress bar
outerClass	'progbar-outer'	class added to the outer container of the progress bar
innerClass	'progbar-inner'	class added to the inner container of the progress bar
duration	3000	number of milliseconds the progress bar takes to complete, some methods offer overwriting this value
minValue	0	minimum value range, see method: ProgBar.min()
maxValue	100	maximum value range, see method: ProgBar.max()

// Examples

Additional looping and timeout code is for demo purpose only and thus not part of the example code.

ProgBar.run() and ProgBar.reverse(), using their callbacks to loop

<div id="container"></div>

var bar = new ProgBar('#container');

bar.run(function() {

bar.reverse();
});

ProgBar.closeIn() and ProgBar.fadeOut()

<div id="container"></div>

var bar = new ProgBar('#container', { height: 8 });

// fill up 90 % within 1 second and then "close in"
bar.closeIn(1000);

// finish progress after 5 seconds of "closing in" state
setTimeout(function() {

bar.fadeOut();

}, 5000);

ProgBar.val()

<div id="container"></div>

var bar = new ProgBar('#container', {

    color:    '#F09A2D',
    height:   16,
    duration: 2000

});

bar.val(50);

// License

// Download

ProgBar 0.1.1 4 KB