jQuery UI Widgets Forums Editors ProgressBar Change the color of progress bar

This topic contains 5 replies, has 4 voices, and was last updated by  Dimitar 8 years, 8 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Change the color of progress bar #65159

    sakthisainath
    Participant

    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?

    Change the color of progress bar #65185

    Nadezhda
    Participant

    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,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    Change the color of progress bar #85107

    Staale Eikebraaten
    Participant

    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=-

    Change the color of progress bar #85115

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Change the color of progress bar #85126

    Staale Eikebraaten
    Participant

    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=-

    Change the color of progress bar #85145

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.