Simple CSS Progress Bar With Jquery + HTML

👤 By cssgui | 📆 Last Updated: Mon Jun 24, 2024

This is an example on how you can implement a simple CSS progress bar using Jquery + CSS and HTML. Very simple to use and not complicated with only a few lines of code.

1. The CSS:

.QuizProgressBar {
  width: 90%;
  margin: 10px auto;
  height: 22px;
  background-color: #0A5F44;
}
/* http://jsfiddle.net/zessx/4PKEB/1/ */
.QuizProgressBar div {
  height: 100%;
  text-align: right;
  padding: 0 10px;
  line-height: 22px; /* same as #progressBar height if we want text middle aligned */
  width: 0;
  background-color: #CBEA00;
  box-sizing: border-box;
}

2. The Javascript Using Jquery

// http://jsfiddle.net/zessx/4PKEB/1/
function progress(timeleft, timetotal, $element) {
   // var progressBarWidth = timeleft * $element.width() / timetotal;
   var progressBarWidth = (timetotal-timeleft) * ($element.width()/timetotal);
    $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear');
    if(timeleft > 0) {
        setTimeout(function() {
            progress(timeleft - 1, timetotal, $element);
        }, 100);
    }
};
// must be a div
$('.QuizProgressBar').livequery(function() {
    $(this).append('<div></div>'); // add div inside this div
    progress(3, 3, $(this))
    
});

3. The HTML

<div class="QuizProgressBar"> </div>