To start, the first step is to generate DOM elements. All that is required are two div components, nested within each other. The initial div will act as the progress bar container and can be placed on any part of your webpage. The second div represents the progress indicator, like so:
<div id="progressBar"><div></div></div>
Next, we must define some basic CSS for these elements. This involves specifying the width, height, and colors:
#progressBar {
width: 400px;
height: 22px;
border: 1px solid #111;
background-color: #292929;
}
#progressBar div {
height: 100%;
color: #fff;
text-align: right;
line-height: 22px; /* to align text vertically */
width: 0;
background-color: #0099ff;
}
Lastly, a function with just four lines of code is necessary. It's a straightforward function that accepts two parameters.
function progress(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find('div').animate({ width: progressBarWidth }, 500).html(percent+ "% ");
}
The first parameter indicates the percentage the progress bar should display, and the second one is the jQuery object representing the progress bar container. To set the progress bar at 80%, simply use:
progress(80, $('#progressBar'));
Prior to implementing all of this, it's essential to include the jQuery library on your page.
This uncomplicated progress bar can be customized effortlessly using CSS. Various skins have been developed and can be obtained from GitHub. Don't hesitate to craft your own styles and submit them via pull request!