Change of colour in progress bar

Santosh Umarani 81 Reputation points


I am using a progress bar in cshtml like below:

$("#progress-bar").progressbar({ value: 0 });
$("#progress-bar").progressbar("value", @ViewData["ProgressValue"]);

            <div style="margin-top: 59px; margin-right: 250px; float: right; position: relative; width: 250px; height: 50px">
                <div id="progress-bar" title="BuildCompleted" class="progress-bar"></div>

On the change of the value ViewData["ProgressValue"], progress bar changes in UI.
However, I need to change the color of the progress bar when the value changes. Like 10 to 20 % Red, 20 to 50 Yellow and above 50 Green.
Also, on hover on progress bar, value of the build competed should be displayed.
Can you please help me to achieve above two points ?
Kindly waiting for your response.


A set of technologies in the .NET Framework for building web applications and XML web services.
3,362 questions
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. Lan Huang-MSFT 27,716 Reputation points Microsoft Vendor

    Hi @Santosh Umarani ,
    Could you tell us if the @ViewData["ProgressValue"] is a real-time data?
    If it's a real-time data, it needs to be monitored the "live" progress using SignalR.

    Best regards,
    Lan Huang

    If the answer is helpful, please click "Accept Answer" and upvote it.
    Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

  2. Santosh Umarani 81 Reputation points

    Hi LanHuang-MSFT, Yes @ViewData["ProgressValue"] is a real-time data.
    Can you please help on usage of SignalR?
    Kindly waiting for your response.