How to Dynamically Change the Value of Blazor Progress Bar?

This article explains how to implement a countdown timer using a Blazor Progress Bar component. The progress bar value is updated dynamically every second to reflect the countdown.

Dynamically Change the Value of Blazor Progress Bar

To create a countdown timer using the Blazor SfProgressBar component, you can use the System.Threading.Timer class to update the progress value every second. The progress bar starts at a defined value (e.g., 60%) and decreases by 1% each second until it reaches 0%. This is achieved by binding the Value property of the progress bar to a backing field (ProgressValue) and updating it inside a timer callback.

The timer is initialized in the OnInitialized lifecycle method and configured to tick every 1000 milliseconds. On each tick, the ProgressValue is decremented, and InvokeAsync(StateHasChanged) is called to refresh the UI. Once the value reaches zero, the timer is disposed to stop further updates.

Code Example

<SfProgressBar @ref="circularProgress" Value="@ProgressValue">
   <ProgressBarLabelStyle Text="@($"{ProgressValue}%")"></ProgressBarLabelStyle>
</SfProgressBar>

@code {
   private SfProgressBar circularProgress;
   private int ProgressValue = 60; // Start from 60
   private Timer? timer;

   protected override void OnInitialized()
   {
       StartCountdown();
   }

   private void StartCountdown()
   {
       timer = new Timer(_ =>
       {
           if (ProgressValue > 0)
           {
               ProgressValue--;
               InvokeAsync(StateHasChanged); // Refresh UI
           }
           else
           {
               timer?.Dispose(); // Stop timer when countdown ends
           }
       }, null, 1000, 1000); // Initial delay: 1s, Interval: 1s
   }

   public void Dispose()
   {
       timer?.Dispose();
   }
} 

Output

A circular progress bar starts at 60% and decreases by 1% every second until it reaches 0%.

Sample

You can download the working sample from the following link:
Download Sample

Conclusion

I hope you enjoyed learning about how to dynamically change the value of Blazor Progress Bar.

You can refer to our Blazor Progress Bar feature tour page to learn about its other groundbreaking feature representations. You can also explore our Blazor Progress Bar Documentation to understand how to present and manipulate data.

For current customers, you can check out our Blazor components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our Blazor Progress Bar and other Blazor components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!