How to add multi colored percentage bar that changes colors according to its progress?

Mizy Published at Dev

Mizy

Jquery that i use to get the progress and add the percentage!

/* getting the percentage of the multi step verification */

$('.track').change(function(e) {
    update_percentage();
});
// supports any number of inputs and calculates done as %
function update_percentage() {
    var count = $('.track').length;
    var length = $('.track').filter(function() {
        return this.value;
    }).length;
    var done = Math.floor(length * (100 / count));
    $('.perc').text(done);

    $('.meter').width(done + "%");

        $(document).ready(function(){
        $a = done;
        $("#applicant_percentages").val($a);
    });
}

This is where the progress meter is shown in a bar as well as in percentage

<div class="progress-meter">
        <h5>Profile Strength <span class='perc'>0</span>%</h5>
        <span class="meter"></span>
        <br>
    </div>

CSS

.meter {
 display: inline-block;
  width: 0;
  height: 20px;
  margin-bottom: 10px;
  background-color:green;
}

I am getting the percentage of the number of input that are filled in a form! i have put the value i take into a progress bar .. but now what need the to change the colors of the progress bar once they reach certain values.

And sorry if i am unclear!

Jamiec

Given an array containing your required bands

let colors = [
    {max:20,color:'red'}, 
    {max:75,color:'yellow'},
    {max:100,color:'green'}];

You can find the right colour using Array.find based on the done amount:

var color = colors.find(x => x.max >= done).color;

And apply this to your progress bar using jQuery css

$('.meter').width(done + "%").css('background-color',color);

Live example below:

/* getting the percentage of the multi step verification */

$('.track').change(function(e) {
    update_percentage();
});

let colors = [{max:20,color:'red'}, {max:75,color:'yellow'},{max:100,color:'green'}];


// supports any number of inputs and calculates done as %
function update_percentage() {
    var count = $('.track').length;
    var length = $('.track').filter(function() {
        return this.value;
    }).length;
    
    var done = Math.floor(length * (100.0 / count));
    var color = colors.find(x => x.max >= done).color;
    
    $('.perc').text(done);

    $('.meter').width(done + "%").css('background-color',color);
}

.meter {
 display: inline-block;
  width: 0;
  height: 20px;
  margin-bottom: 10px;
  background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="track" type="text">
<input class="track" type="text">
<input class="track" type="text">
<input class="track" type="text">
<input class="track" type="text">
<input class="track" type="text">

<div class="progress-meter">
    <h5>Profile Strength <span class='perc'>0</span>%</h5>
    <span class="meter"></span>
    <br>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-12-11

Comments

0 comments

How to add multi colored percentage bar that changes colors according to its progress?

How to add multi colored percentage bar that changes colors according to its progress?

pump.io port in URL

How to import an asset in swift using Bundle.main.path() in a react-native native module

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Double spacing in rmarkdown pdf

SQL Server : need add a dot before two last character

Ambiguous use of 'init' with CFStringTransform and Swift 3

Resetting Value of <input type="time"> in Firefox

Retrieve Element Tag Value XML Using Bash

How to pass data to the ng2-bs3-modal?

JWT gives JsonWebTokenError "invalid token"

How to update azerothcore-wotlk docker container

C++ 16 bit grayscale gradient image from 2D array

redirect your computer port to url

Capybara Selenium Chrome opens About Google Chrome

mysql.connector.errors.InterfaceError: 2003: Can't connect to MySQL server on '127.0.0.1:3306' (111 Connection refused)

How to make thrown errors visible outside of a Promise?

JMeter: Why get error when try to save test plan

Should you provide dependent libraries in client jar?

Issue making model pop up onPress of flatlist

Message: element not interactable on accessing a tag python

Calling Doctrine clear() with an argument is deprecated