Syncfusion Blazor ProgressBar is a feature-rich notification component. It is used to visualize the changing status of an extended operation such as a download, file transfer, or installation. It includes the following functionalities:
- Determinate and indeterminate states
- Buffering
- Segmented progress
- Animation
- Custom content
- Right-to-left rendering
- Built-in themes
- Adaptive display
![Syncfusion Blazor ProgressBar Control](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Syncfusion-Blazor-ProgressBar-Control.png)
With these versatile features, you can easily visualize the current status of a process with beautiful animation and custom effects.
In this blog, we will provide a walk-through on to how render the ProgressBar and use its custom features in your Blazor Server application. Let’s get started!
Rendering a ProgressBar
First things first, create a Blazor server project in Visual Studio 2019. Follow these steps to render the ProgressBar component:
Step 1: Install the Syncfusion.Blazor NuGet package to your newly created application by using the NuGet Package Manager. Right-click the Project in the Solution Explorer and select Manage NuGet Packages.
![Open NuGet Package Manager](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Open-NuGet-Package-Manager.png)
Step 2: Search for the Syncfusion.Blazor keyword in the Browse tab and then install the Syncfusion.Blazor NuGet package in your application.
![Syncfusion Blazor NuGet Package](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Syncfusion-Blazor-NuGet-Package.png)
Step 3: Open the ~/_Imports.razor file and import the Syncfusion.Blazor and Syncfusion.Blazor.ProgressBar namespaces using the following command.
@using Syncfusion.Blazor @using Syncfusion.Blazor.ProgressBar
Step 4: Open the ~/Startup.cs file and register the Syncfusion Blazor Service with the following code.
using Syncfusion.Blazor; namespace WebApplication1 { public class Startup { public void ConfigureServices(IServiceCollection services) { .... .... services.AddSyncfusionBlazor(); } } }
Step 5: Now, you can add the Syncfusion Blazor ProgressBar component in the webpage (Razor) in the ~/Pages/Index.razor folder.
<SfProgressBar Value="50"> </SfProgressBar>
Step 6: Now, run the application. The Syncfusion Blazor ProgressBar component will be rendered in the default web browser as in the following screenshot.
![ProgressBar Component](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/ProgressBar-Component.png)
Types of Blazor ProgressBar Component
You can visualize progress in different shapes—rectangle, circle, and semicircle—to give your app design a unique appearance. The following code example demonstrates how to set the progress bar shape type as circular.
<SfProgressBar Value="50" Type="ProgressType.Circular"> </SfProgressBar>
![Circular Progress Bar](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Circular-Progress-Bar.png)
States
You can visualize progress with the control in the following modes:
- Determinate: Use this when the progress completion can be estimated.
- Indeterminate: Use this when the progress completion can’t be estimated or calculated.
- Buffer: Use this where a secondary task must be completed before the primary task can be.
The following code example and figures illustrate how the different modes are implanted and displayed.
<SfProgressBar Value="100" Type="ProgressType.Circular" TrackThickness="4" ProgressThickness="4"> </SfProgressBar> <SfProgressBar Value="30" Type="ProgressType.Circular" TrackThickness="4" ProgressThickness="4" IsIndeterminate="true"> </SfProgressBar> <SfProgressBar Value="60" Type="ProgressType.Circular" TrackThickness="4" ProgressThickness="4" SecondaryProgress="90"> </SfProgressBar>
![Progress Bar State Options](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Progress-Bar-State-Options.png)
Dynamic updates
You can also change the value of the Progress Bar component dynamically through an external button as shown in the following code example.
<SfButton OnClick="Change">Change the value dynamically</SfButton> <SfProgressBar Value="@Values" Type="ProgressType.Circular" TrackThickness="4" ProgressThickness="4"> </SfProgressBar> @code { public double Values {get; set;} protected override void OnInitialized (){ this.Values = 50; } public void Change() { this.Values = 70} }
After executing this code, the value of the progress bar changes from 50 to 70, as shown in the following figure.
![Progress Bar with Value 50](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Progress-Bar-with-Value-50.jpg)
![Progress Bar with Value 70](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Progress-Bar-with-Value-70.png)
Conclusion
I hope you are now eager to use the Syncfusion ProgressBar component in your Blazor application. The ProgressBar has much more to offer in addition to these features, such as the ability to add custom content and multiple ranges. You can check out ProgressBar samples from this GitHub repository. Please take a look at our live demos in our sample browser too.
For existing customers, the new version is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out these new features.
The ProgressBar component is also available for the React, Angular, Vue, ASP.NET Core, ASP.NET MVC, and JavaScript frameworks.
If you wish to send us feedback or would like to ask any questions, please feel free to post them in the comments section below, or contact us through our support forum, Direct-Trac, or feedback portal. As always, we would like to learn from you!
If you like this blog post, we think you’ll also like the following free ebooks!