jQuery UI Widgets › Forums › Editors › ProgressBar › Change the color of progress bar
Tagged: change color, colorRanges, jqxprogressbar, progressbar, value
This topic contains 5 replies, has 4 voices, and was last updated by Dimitar 8 years, 8 months ago.
-
Author
-
Hi,
I’m using progress bar in my application while loading a page. When the loading percentage is below 50%, I want the color of the progress bar to be in red, once the loading percent crosses past 50%, I want the color of the bar to be in green. Can anybody help on this?Hello sakthisainath,
Here is an example which shows how to change color of jqxProgressBar based on value.
<!DOCTYPE html> <html lang="en"> <head> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxprogressbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <style> .jqx-progressbar-value { background-color: #ff0000; } </style> <script type="text/javascript"> $(document).ready(function () { // Create jqxProgressBar. $("#jqxProgressBar").jqxProgressBar({ width: 250, height: 30, value: 30 }); // Create jqxButton. $('#button').jqxButton({}); // Update ProgressBars. $('#button').click(function () { var value = $('#ValueInput')[0].value; $("#jqxProgressBar").jqxProgressBar({ value: value }); if (value > 50) { $(".jqx-progressbar-value").css("background-color", "#00ff00"); } }); $("#checkbox").jqxCheckBox({}); $("#customtextcheckbox").jqxCheckBox({}); $("#checkbox").on('change', function (event) { $("#jqxProgressBar").jqxProgressBar({ showText: event.args.checked }); }); var renderText = function (text) { return "<span class='jqx-rc-all' style='background: #ffe8a6; color: #e53d37; font-style: italic;'>" + text + "</span>"; } $("#customtextcheckbox").on('change', function (event) { if (event.args.checked) { $("#jqxProgressBar").jqxProgressBar({ renderText: renderText }); } else { $("#jqxProgressBar").jqxProgressBar({ renderText: null }); } }); }); </script> </head> <body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div style='margin-top: 10px;'>Horizontal</div> <div style='margin-top: 10px; overflow: hidden;' id='jqxProgressBar'> </div> <br /> <div>Enter a value between 0 and 100</div> <input id='ValueInput' type='text' style='margin-top: 5px;' /> <input id='button' type='button' value='Update' style='padding: 3px; margin-top: 5px;' /> <div id="checkbox" style="margin-top: 20px;">Show Progress Text</div> <div id="customtextcheckbox" style="margin-top: 20px;">Custom Progress Text</div> </div> </body> </html>
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Hi !!
I found this article very helpful, and it worked when I tried it out… But when I add several progressbars in one page to show status on different topics, Im in trouble, as changing the color of one, also changes the color of all others. How do I get around this problem ??
-=Staale=-
Hi Staale,
If you wish to change the colour of a particular progress bar only, please apply the following modifications to the code above:
<style> #jqxProgressBar .jqx-progressbar-value { background-color: #ff0000; } </style>
…
$('#button').click(function() { var value = $('#ValueInput')[0].value; $("#jqxProgressBar").jqxProgressBar({ value: value }); if (value > 50) { $("#jqxProgressBar .jqx-progressbar-value").css("background-color", "#00ff00"); } });
You may also be interested in the relatively new progress bar feature Color Ranges.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thank you very much, It worked perfectly 🙂
Yes, I tried the colorRanges, but I got an error saying “unknown property”.. We use v4.0 of jqWidgets..
Thanks again..
–Staale=-
Hi Staale,
Please update to the latest version of jQWidgets (4.1.2). If the issue persists, please share an example that reproduces it.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.