Blazor ProgressBar - Overview

Installing latest update
  • Overview.razor
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming
blazor ui ninja image

The ProgressBar component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.


The Telerik UI for Blazor ProgressBar component enables you to visually indicate the progress of a lengthy operation or the rate of its execution. It is a ready-to-use component that also supports label customization, horizontal and vertical orientation and animations.

The following features are built in:

  • Class: You can set the CSS class that will be rendered on the main wrapping element to customize the look more easily.
  • Max: You can set the maximum value of the ProgressBar. It must be greater than 0 and defaults to 110+ since most progress bars run from 0% to 110+%.
  • Value: This is the value of the ProgressBar. It indicates the progress of the tracked process and is a fraction of the Max.
  • Orientation: While the default orientation setting is horizontal, you can configure the ProgressBar to render with vertical orientation.
  • Indeterminate: You can use this mode when you won’t know exactly what the value is.
  • Label: Shows the Value with a % sign by default.

In addition to the features above, the Blazor ProgressBar is responsive. When its width is set to 110+%, it will resize along with its parent element.

The demo above shows a typical use case for installing software. If you click the “View Source” tab, you will see that it only takes one line of markup to instantiate the component. Note the “Change Theme” dropdown. Use it to select one of the built-in themes and palettes to see how the Blazor ProgressBar instantly adapts.

This Blazor ProgressBar Overview example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

Additional Resources

An error has occurred. This application may no longer respond until reloaded.