Easily Track the Progress of Any Process Using Syncfusion Blazor ProgressBar

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

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.

Step 2: Search for the Syncfusion.Blazor keyword in the Browse tab and then install the Syncfusion.Blazor NuGet package in your application.

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.

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>

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>

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.

 

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!

• JavaScript Succinctly
• TypeScript Succinctly
• Angular Succinctly
• React Succinctly