View on GitHub

bootstrap-progressbar

Download this project as a .zip file Download this project as a tar.gz file

Multi-Color Progressbar for Twitter Bootstrap

Progressbar example

Multi-Color progressbar component for Twitter Bootstrap creates a progressbar which consists out of three colors or zones.

The progressbar consists out of three zones: safe, warning and danger. The safe zone is displayed in green, the warning zone in orange and red is used for the danger zone.

By default the following percentages are used for the zones:

The progressbar automatically changes the color depending on its position.

Demo

Click here for a live demo.

Usage

This component relies on Twitter Bootstrap and jQuery.

Basic usage:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />

<div id="progressbar">
</div>

<script type="text/javascript">
$('#progressbar').progressbar();
</script>

You can use the following additional options to modify the behaviour of the progressbar:

For example:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />

<div id="progressbar">
</div>

<script type="text/javascript">
$('#progressbar').progressbar({
    warningMarker: 60,
    dangerMarker: 80,
    maximum: 100,
    step: 5
});
</script>

Methods

stepIt

Increases the position of the progressbar with the value of its step property.

$('#progressbar').progressbar('stepIt');

setWarningMarker

Set the position, expressed in percentage, of the warning marker.

$('#progressbar').progressbar('setWarningMarker', 50);

setDangerMarker

Set the position, expressed in percentage, of the danger marker.

$('#progressbar').progressbar('setDangerMarker', 90);

setStep

Set the step, by which the position of the progressbar is increased each time the stepIt() method is called.

$('#progressbar').progressbar('setStep', 10);

setMaximum

Set the maximum allowed value of the progressbar.

$('#progressbar').progressbar('setMaximum', 85);

setPosition

Set the current position of the progressbar. Must be less or equal to the maximum.

$('#progressbar').progressbar('setPosition', 85);

reset

Resets the progressbar back to position 0.

$('#progressbar').progressbar('reset');

Events

The progressbar supports one event, namely positionChanged. This event is triggered when its position changes.

The event objects has two additional properties:

$('#progressbar').on("positionChanged", function (e) {
    console.log(e.position);
    console.log(e.percent);
});

License

This code is made available under the Apache License v2.0, the same as Twitter Bootstrap.

Contact

Questions or suggestions? Mail me at geersch@gmail.com.

Follow @cgeers on Twitter.