Menu icon Foundation
Progress bar setting, need an explaination

What exactly does progress bar setting do? I am trying to give my progress bar different color when it is less than 100%. I thought below code was the controls. Nothing worked for me, except the first setting no changes at all.
what are these anyway?

// We use these to set the meter colors
// $progress-meter-color: #E8D599; <-only this one works if enabled
// $progress-meter-secondary-color: $secondary-color;
// $progress-meter-success-color: $success-color;
// $progress-meter-alert-color: $alert-color;

progress barbarsettingscsscss

What exactly does progress bar setting do? I am trying to give my progress bar different color when it is less than 100%. I thought below code was the controls. Nothing worked for me, except the first setting no changes at all.
what are these anyway?

// We use these to set the meter colors
// $progress-meter-color: #E8D599; <-only this one works if enabled
// $progress-meter-secondary-color: $secondary-color;
// $progress-meter-success-color: $success-color;
// $progress-meter-alert-color: $alert-color;

Alexander Assimidis about 5 years ago

Hi u could do that with jquery

 if ($(".yourbar .meter").width == "100%") {
   // DO STUFF
}else {
   // DO STUFF
}

// $progress-meter-secondary-color: $secondary-color; // Another Color
// $progress-meter-success-color: $success-color; // Another Color
// $progress-meter-alert-color: $alert-color; // Another Color

Just change these Classes on width so u can get what u want

samjin about 5 years ago

your code don't work in IE unless you use prop() instead of attr. Attr don't work in IE

if ($(this).prop('style').width == '100%') {
$(this).parent().addClass('success');
};