Centered Progress Bar!

By Daniel Orlovsky

To adjust, put in a new value and hit the Enter key!



This control makes 100% to be the absolute center of the progress bar.

Easily drop it into your page, and with minimal setup, get it working!



First, add the script to your HTML page, AFTER jQuery is included:

<script src="" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
<script src="assets/js/progress-bar.min.js"></script>                

Next, create the container for the progress bar wherever you want it on the screen. Give it a unique identifier. progress-bar-wrapper is recommended, but the only protected identifiers are: #left-wrapper, #right-wrapper, #left-progress, and #right-progress.

<div id="progress-bar-wrapper"> </div>

Now let's give our progress bar some basic styling. All that is required is setting the height and background-color, but you can make it a little fancier like the one displayed up above.

#progress-bar-wrapper {
    margin: 0 auto;
    height: 40px;
    width: 500px;
    box-shadow: 0 0 5px black;
    background-color: #fff;

Finally, when you need to use it, figure out what the increments will be (100% is complete. So, for example, a 30 second timer's increments will be 100 / 30), then create the new object passing the identifier, color, and what the increments will be.

// Initialize progress bar - pass selector, orange, and increment.
var centerPrgBar = new CenterProgressBar("#progress-bar-wrapper", "orange", 10);

Then, in the function where you perform the cyclical task, call the control's advanceProgressBar(callback) function. Note: the callback is only for when the progress-bar has completed, and is not required.

// Calls doSomething every second.
var interval = setInterval(doSomething, 1000);

function doSomething() {
    // Advances the progress bar.
    centerPrgBar.advanceProgressBar(function () {
        setTimeout(function () {
            console.log("We're finished!");
        }, 1000);