Jquery ProgressBar Demo

This is a demo of Jquery ProgressBar. It illustrates basic setings, api calls and events.

Download »

Options

Basic Example (Auto Start)

$('...').progressBarTimer({ autoStart: true });

Different colors (Auto Start)

$('...').progressBarTimer({ autoStart: true, baseStyle: 'bg-info', warningStyle: 'bg-warning', completeStyle: 'bg-danger' });

Striped (Auto Start)

$('...').progressBarTimer({ autoStart: true, striped: true });

Animated (Auto Start)

$('...').progressBarTimer({ autoStart: true, animated: true });

Set Height (Auto Start)

$('...').progressBarTimer({ autoStart: true, height: 30 });

Smooth (Auto Start)

$('...').progressBarTimer({ autoStart: true, smooth: true });

Time Limit & Warning Threshold (Auto Start)

$('...').progressBarTimer({ autoStart: true, timeLimit: 30, warningThreshold: 10 });

Labels (Auto Start, Percent)


                $('...').progressBarTimer({ autoStart: true, 
                  label : { show: true, type: 'percent' } 
                });

Labels (Auto Start, seconds)


                $('...').progressBarTimer({ autoStart: true, 
                  label : { show: true, type: 'seconds' } 
                });

Events

onFinish (Auto Start)


                $('...').progressBarTimer({ autoStart: true, 
                  onFinish : function () { alert('That\'s all folks'); } 
                });

API

$('...').progressBarTimer();