How to update a circular progress bar value in Blazor Progress Bar?

This article explains how to update a circular progress bar value in Blazor Progress Bar.

Update a Circular Progress Bar Value

Blazor Progress Bar provides an option to update a circular progress bar value. To update the value of a circular progress bar, fetch the current progress value and bind it to the progress bar’s Value property. Then, trigger a re-render of the progress bar component by invoking StateHasChanged.

In this code snippet, the OnInitializedAsync method initializes the progress bar value and updates it incrementally. The progress bar starts with a value of 0 and progresses to the maximum value of 100, simulating an asynchronous update process. A short delay between updates is introduced to mimic real-time processing, and StateHasChanged is called to refresh the component and reflect the changes in the progress bar. The annotations within the progress bar display the current value as a percentage in a styled format.

Index.razor

@using Syncfusion.Blazor.ProgressBar

<SfProgressBar Type="ProgressType.Circular" Value="@ProgressBarValue" Height="160px" Width="160px" EnableRtl="false"
              TrackColor="#FFD939" Radius="100%" InnerRadius="190%" ProgressColor="white" TrackThickness="80"
              ProgressThickness="10" CornerRadius="CornerType.Round" Minimum="0" Maximum="@maximum">
   <ProgressBarAnnotations>
       <ProgressBarAnnotation>
           <ContentTemplate>
               <div style="font-size:20px;font-weight:bold;color:#ffffff;fill:#ffffff">
                   <span>
                       @ProgressBarValue<span>%</span>
                   </span>
               </div>
           </ContentTemplate>
       </ProgressBarAnnotation>
   </ProgressBarAnnotations>
</SfProgressBar>

@code {
   double maximum;
   double ProgressBarValue;
   protected override async Task OnInitializedAsync()
   {
       ProgressBarValue = 0;
       maximum = 100;
       for (int index = 0; index <= maximum; index++)
       {
           ProgressBarValue = (double)index;
           await Task.Delay(100);
           this.StateHasChanged();
       }
       await Task.Delay(10);
       this.StateHasChanged();
   }
} 

The following GIF illustrates the output of the code snippet.

Live sample for update a circular progress bar

Conclusion

I hope you enjoyed learning how to update a circular progress bar value in Blazor Progress Bar.

You can refer to our Blazor ProgressBar feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor ProgressBar to understand how to create and manipulate data.

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

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