I need to realize a progress bar with CSS, JS, or that you suggest. I need it to be multi-color... Based on a percentage.
For example, if I've got a 50% value, the progress bar should be light blue until 30%, and green between 30 to 50%.
So, I set style="width:xx%"
to set the percentage.
Is there a method to create multicolor progress bar?
I've tried this:
.progressMulti {
height: 32px;
width: 100%;
border: 1px solid #ddd;
border-radius: 15px;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #333;
font-size: 20px;
background: linear-gradient(to right, green 75%, blue 20%, red 5%);
}
but if set to width 50%, for example, I can see all colors... Instead it should be only light blue and green with a 50% value.
function set_progress(_num){
$('#progress').empty();
var el_1_width=0;
var el_2_width=0;
var el_3_width=0;
var el_4_width=0;
if(_num>30){el_1_width=30;}else{el_1_width=_num;}
if(_num>60){el_2_width=30;}else{el_2_width=_num-el_1_width;}
if(_num>80){el_3_width=30;}else{el_3_width=_num-el_1_width-el_2_width;}
if(_num>90){el_4_width=_num-90;}
var new_font_clor='';
if(_num<55){new_font_clor='color:black';}
$('#progress').append('<div class="progress-text" style="'+new_font_clor+'">'+_num+' %</div>');
$('#progress').append('<div class="progress-el" style="background-color:blue; width:'+el_1_width+'%;"> </div>');
$('#progress').append('<div class="progress-el" style="background-color:green; width:'+el_2_width+'%;"> </div>');
$('#progress').append('<div class="progress-el" style="background-color:yellow; width:'+el_3_width+'%;"> </div>');
$('#progress').append('<div class="progress-el" style="background-color:red; width:'+el_4_width+'%;"> </div>');
}
set_progress(12);
#progress{
border-style:solid;
border-color:black;
//border-width:4px;
}
.progress-el{
display:inline-block;
height:40px;
}
.progress-text{
position:fixed;
color:white;
font-weight:bold;
width:100%;
height:40px;
line-height:40px;
text-align:center;
font-size:24pt;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="progress"></div>
<input type="button" value="set 17%" onclick="set_progress(17);">
<input type="button" value="set 31%" onclick="set_progress(31);">
<input type="button" value="set 45%" onclick="set_progress(45);">
<input type="button" value="set 67%" onclick="set_progress(67);">
<input type="button" value="set 82%" onclick="set_progress(82);">
<input type="button" value="set 97%" onclick="set_progress(97);">
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments