Centered Progress Bar!

By Daniel Orlovsky

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

Delay:

Increment:

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!

Download: progress-bar.zip

Usage:

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

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
<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);
    });
}