Easily Track the Progress of Any Process Using Syncfusion Blazor ProgressBar
Tags: blazor, dotnet, csharp, webdev
Published: 2020-06-16 09:13:44

---
title: Easily Track the Progress of Any Process Using Syncfusion Blazor ProgressBar
published: true
date: 2020-06-11 11:29:25 UTC
tags: blazor, dotnet, csharp, webdev
canonical_url: https://www.syncfusion.com/blogs/post/easily-track-the-progress-of-any-process-using-syncfusion-blazor-progressbar.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Blazor-Progress-Bar.png
---

[Syncfusion Blazor ProgressBar](https://www.syncfusion.com/blazor-components/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)<figcaption>Syncfusion Blazor ProgressBar Control</figcaption>

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 **Projec** t 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)<figcaption>Open NuGet Package Manager</figcaption>

**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)<figcaption>Syncfusion Blazor NuGet Package</figcaption>

**Step 3** : Open the **~/\_Imports.razor**  file and import the **Syncfusion.Blazor** and **Syncfusion.Blazor.ProgressBar** namespaces using the following command.

```js
@using Syncfusion.Blazor
@using Syncfusion.Blazor.ProgressBar
```

**Step 4** : Open the  **~/Startup.cs**  file and register the Syncfusion Blazor Service with the following code.

```csharp
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.

```html
<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)<figcaption>ProgressBar Component</figcaption>

## 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.

```html
<SfProgressBar Value="50" Type="ProgressType.Circular"></SfProgressBar>
```

![Circular Progress Bar](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Circular-Progress-Bar.png)<figcaption>Circular Progress Bar</figcaption>

## 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.

```html
<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)<figcaption>Progress Bar State Options</figcaption>

## 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.

```html
<SfButton OnClick="Change">Change the value dynamically</SfButton>
 
<SfProgressBar Value="@Values" Type="ProgressType.Circular" TrackThickness="4" ProgressThickness="4">
</SfProgressBar>
```
```js
@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)<figcaption>Progress Bar with Value 50</figcaption>

![Progress Bar with Value 70](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Progress-Bar-with-Value-70.png)<figcaption>Progress Bar with Value 70</figcaption>

## Conclusion

I hope you are now eager to use the Syncfusion ProgressBar component in your Blazor application. The [ProgressBar](https://www.syncfusion.com/blazor-components/blazor-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](https://github.com/syncfusion/blazor-samples/tree/master/Pages/ProgressBar)<u> repository</u>. Please take a look at our live demos in our [sample browser](https://blazor.syncfusion.com/demos/progress-bar/linear/) too.

For existing customers, the new version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads) page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out these new features.

The ProgressBar component is also available for the [React](https://ej2.syncfusion.com/react/demos/#/material/progress-bar/linear), [Angular](https://ej2.syncfusion.com/angular/demos/#/material/progress-bar/Linear), [Vue](https://ej2.syncfusion.com/beta/vue/demos/#/material/progress-bar/linear.html),  [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls/progressbar),  [ASP.NET MVC](https://ej2.syncfusion.com/aspnetmvc/ProgressBar/Linear#/material), and [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-progressbar) 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](https://www.syncfusion.com/forums)<u>,</u> [Direct-Trac](https://www.syncfusion.com/support/directtrac/), or [feedback portal](https://www.syncfusion.com/feedback/). 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_](https://www.syncfusion.com/ebooks/javascript)
- [_TypeScript Succinctly_](https://www.syncfusion.com/ebooks/typescript)
- [_Angular Succinctly_](https://www.syncfusion.com/ebooks/angular-succinctly)
- [_React Succinctly_](https://www.syncfusion.com/ebooks/react-succinctly)

The post [Easily Track the Progress of Any Process Using Syncfusion Blazor ProgressBar](https://www.syncfusion.com/blogs/post/easily-track-the-progress-of-any-process-using-syncfusion-blazor-progressbar.aspx) appeared first on [Syncfusion Blogs](https://www.syncfusion.com/blogs).