Getting Started with Blazor ProgressBar Component

20 Aug 20255 minutes to read

This section briefly explains about how to includeBlazor ProgressBar component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.

To get start quickly with Bullet Chart Component using Blazor, you can check on this video orGitHub sample.

Prerequisites

System requirements for Blazor components

Create a new Blazor App in Visual Studio

You can create aBlazor WebAssembly App using Visual Studio viaMicrosoft Templates or theSyncfusion^® Blazor Extension.

Install Syncfusion^® Blazor ProgressBar and Themes NuGet in the App

To addBlazor ProgressBar component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and installSyncfusion.Blazor.ProgressBar andSyncfusion.Blazor.Themes. Alternatively, you can utilize the following package manager command to achieve the same.

Package Manager

Install-PackageSyncfusion.Blazor.ProgressBar-Version32.1.19Install-PackageSyncfusion.Blazor.Themes-Version32.1.19

NOTE
Syncfusion^® Blazor components are available innuget.org. Refer toNuGet packages topic for available NuGet packages list with component details.

Prerequisites

System requirements for Blazor components

Create a new Blazor App in Visual Studio Code

You can create aBlazor WebAssembly App using Visual Studio Code viaMicrosoft Templates or theSyncfusion^® Blazor Extension.

Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`).

Blazor WASM App

dotnetnewblazorwasm-oBlazorAppcdBlazorApp

Install Syncfusion^® Blazor ProgressBar and Themes NuGet in the App

PressCtrl+` to open the integrated terminal in Visual Studio Code.
Ensure you’re in the project root directory where your.csproj file is located.
Run the following command to install aSyncfusion.Blazor.ProgressBar andSyncfusion.Blazor.Themes NuGet package and ensure all dependencies are installed.

Package Manager

dotnetaddpackageSyncfusion.Blazor.ProgressBar-v32.1.19dotnetaddpackageSyncfusion.Blazor.Themes-v32.1.19dotnetrestore

NOTE
Syncfusion^® Blazor components are available innuget.org. Refer toNuGet packages topic for available NuGet packages list with component details.

Register Syncfusion^® Blazor Service

Open~/_Imports.razor file and import theSyncfusion.Blazor andSyncfusion.Blazor.ProgressBar namespace.

~/_Imports.razor

@using Syncfusion.Blazor@using Syncfusion.Blazor.ProgressBar

Now, register the Syncfusion^® Blazor Service in the~/Program.cs file of your Blazor WebAssembly App.

~/Program.cs

usingMicrosoft.AspNetCore.Components.Web;usingMicrosoft.AspNetCore.Components.WebAssembly.Hosting;usingSyncfusion.Blazor;varbuilder=WebAssemblyHostBuilder.CreateDefault(args);builder.RootComponents.Add<App>("#app");builder.RootComponents.Add<HeadOutlet>("head::after");builder.Services.AddScoped(sp=>newHttpClient{BaseAddress=newUri(builder.HostEnvironment.BaseAddress)});builder.Services.AddSyncfusionBlazor();awaitbuilder.Build().RunAsync();....

Add stylesheet and script resources

The theme stylesheet and script can be accessed from NuGet throughStatic Web Assets. Include the stylesheet and script references in the<head> section of the~/index.html file.

<head>    ....<linkhref="_content/Syncfusion.Blazor.Themes/bootstrap5.css"rel="stylesheet"/><scriptsrc="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"type="text/javascript"></script></head>

NOTE
Check out theBlazor Themes topic to discover various methods (Static Web Assets,CDN, andCRG) for referencing themes in your Blazor application. Also, check out theAdding Script Reference topic to learn different approaches for adding script references in your Blazor application.

Add Blazor ProgressBar component

Add the Syncfusion^® Blazor ProgressBar component in the~/Pages/Index.razor file.

RAZOR

<SfProgressBarValue="50"Minimum="0"Maximum="100"TrackThickness="12"ProgressThickness="12"></SfProgressBar>

PressCtrl+F5 (Windows) or⌘+F5 (macOS) to launch the application. This will render the Syncfusion^® Blazor ProgressBar component in your default web browser.

Circular Progress Bar Type

Change the type of the ProgressBar by using theType property. By default, theLinear type of ProgressBar will be rendered. In the following example, view theCircular type.

RAZOR

<SfProgressBarType="ProgressType.Circular"Value="70"Minimum="0"Maximum="100"TrackThickness="8"ProgressThickness="8"></SfProgressBar>