progress-bar changes color based on the value

user_13653302 0
Viewed 498

I have a progress_profile field where I enter values from 1 to 100 in mysql,

$progress = $row['progress_profile'];

in the bootstrap-bar code I put this code

<p class="bioheading">Profile Completed Progess</p>
<div class="progress">

<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: <?php echo $progress; ?>%;"><?php echo $progress . '% Profile Completed'; ?>
</div>
</div>

I would like based on the values entered in progress_profile, change the color of the bar

example"

from 1 to 49 red color

from 50 to 90 blue color

from 91 to 100 green color

Thank you

bootstrap-4 field
1 Answers
<?php
$progress = $row['progress_profile'];
$color = '';
if ($progress > 90) {
    $color = 'green';
}else if($progress >= 50){
    $color = 'blue';
}else{
    $color = 'red';
}
?>

Add this snippet before the progress bar!.

In your code for progress bar set the style background-color of div with $color as shown..

Hence your code should be...

<p class="bioheading">Profile Completed Progess</p>
<div class="progress">

<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: <?php echo $progress; ?>%;background-color: <?php echo $color; ?>"><?php echo $progress . '% Profile Completed'; ?>
</div>
</div>

One Suggestion For You:

Instead of manually setting colors you should implement it this way, by using bootstrap standard colors!

Changes:

Snippet:

<?php
$progress = $row['progress_profile'];
$color = 'bg-';
if ($progress > 90) {
    $color .= 'success';
}else if($progress >= 50){
    $color .= 'primary';
}else{
    $color .= 'danger';
}

?>

progress bar code:

<p class="bioheading">Profile Completed Progess</p>
    <div class="progress ">

    <div class="progress-bar <?php echo $color ?>" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: <?php echo $progress; ?>%;"><?php echo $progress . '% Profile Completed'; ?>
    </div>
    </div>
</body>

Note: you can add the snippet inline, but add it after the $progress['progress_profile'].

user_136201940
Related