Blazor ProgressBar - Overview
- EXAMPLE
- VIEW SOURCE
- EDIT IN TELERIK REPL
- Change Theme
default
- Overview.razor
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.
Description
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.