Change of colour in progress bar

Question

Hi,

I am using a progress bar in cshtml like below:

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

        <div>
            <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>
            </div>
        </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.

Thanks,
Santosh

Answer 1

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.

Answer 2

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

Thanks,
Santosh