Development

Change progress bar colour based on progress value

Changing a progress bar colour based on what value its progress is at. This is done using jQuery and the default Bootstrap colour classes.

CodePen example.

The jQuery:

$(document).ready(function () {
  const show_percent = true;
  var progressBars = $(".progress-bar");
  for (i = 0; i < progressBars.length; i++) {
    var progress = $(progressBars[i]).attr("aria-valuenow");
    $(progressBars[i]).width(progress + "%");
    if (show_percent) {
      $(progressBars[i]).text(progress + "%");
    }
    if (progress >= "90") {
      //90 and above
      $(progressBars[i]).addClass("bg-success");
    } else if (progress >= "30" && progress < "45") {
      $(progressBars[i]).addClass("bg-warning"); //From 30 to 44
    } else if (progress >= "45" && progress < "90") {
      $(progressBars[i]).addClass("bg-info"); //From 45 to 89
    } else {
      //29 and under
      $(progressBars[i]).addClass("bg-danger");
    }
  }
});

This will add the Bootstrap colour classes to the progress bar when its progress is at a certain conditional, you can however use custom CSS classes instead of the Bootstrap supplied packaged ones.

HTML:

<div class="container">
  <div class="row mt-3 text-center">
    <div class="col-12">

      <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
      </div>

      <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 32%" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100"></div>
      </div>

      <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 53%" aria-valuenow="53" aria-valuemin="0" aria-valuemax="100"></div>
      </div>

      <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 91%" aria-valuenow="91" aria-valuemin="0" aria-valuemax="100"></div>
      </div>

    </div>
  </div>
</div>

jQuery and Bootstrap:

<head>
    <title>Progress change colour</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

Next Setup and install a DayZ Namalsk server on Windows server 2019 with SteamCMD »

Previous « jQuery autocomplete input example

Tags: How toHTMLjQueryWeb design

5 years ago

FTP getting array of file details such as size using PHP
Using FTP and PHP to get an array of file details such as size and…
Creating Laravel form requests
Creating and using Laravel form requests to create cleaner code, separation and reusability for your…
Improving the default Laravel login and register views
Improving the default Laravel login and register views in such a simple manner but making…