Blazor ChunkProgressBar - Overview

Morning routine
3/5 tasks done
  • Overview.razor
Loading the demo source code...please wait.
blazor ui ninja image

The ChunkProgressBar component is part of Telerik UI for Blazor, a professional grade UI library with 100 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 ChunkProgressBar component is a different kind of progress bar. Typically, one thinks of a progress bar as a meter or animation showing the status of a programmatic process such as a page load. The Blazor ChunkProgressBar displays and tracks the progress of a task as a predefined number of steps. It loads the progress in segments (or chunks) completed vs. total rather than a percentage. It is most often used to visualize the status of a lengthy operation or the completion of a task or series of tasks. The most common use case is to track the progress of a multiple-step form like a survey or shopping cart. The ChunkProgressBar would visualize a “Page 1 of 4” status, for example.

While the ChunkProgressBar is a relatively simple concept, the component is highly configurable.

  • Wrapper class: Provided for easy CSS styling.
  • Max value: Set the maximum value.
  • Chunk count: Determine how many segments (chunks) the component will display.
  • Orientation: While the default is horizontal, you can set it to vertical.
  • Indeterminate state: Used in cases when the estimated time of completion of the task is unknown or the progress cannot be represented as a physical value. The ChunkProgressBar is filled with flowing motion animation to showcase that the task is running.

The demo above shows an implementation of the Blazor ChunkProgressBar. You can see how many tasks are done in total both in text and visually in the component. Use the left and right arrows to fill or empty the progress bar.

This ChunkProgressBar 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.
Reload