ProgressBar

ProgressBar provides a visual indicator showing the completion percentage of tasks, processes, or any measurable progress. It displays as a horizontal bar that fills from left to right based on the provided value between 0 (empty) and 1 (complete).

Key features:

• Percentage visualization: Displays progress as a filled portion of a horizontal bar
• Flexible value handling: Accepts values from 0 to 1, with automatic bounds handling for out-of-range values
• Extensive theming: Customizable background color, indicator color, thickness, and border radius
• Responsive design: Adapts to container width while maintaining consistent height

Behaviors

This component supports the following behaviors:

Properties

value

default: 0

This property defines the progress value with a number between 0 and 1.

The following example demonstrates using it:

<App>
  <ProgressBar />
  <ProgressBar value="0.2"/>
  <ProgressBar value="0.6"/>
  <ProgressBar value="1"/>
  <ProgressBar value="1.2"/>
</App>

<App>
  <ProgressBar />
  <ProgressBar value="0.2"/>
  <ProgressBar value="0.6"/>
  <ProgressBar value="1"/>
  <ProgressBar value="1.2"/>
</App>

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

Theme Variables