ProgressBar

A ProgressBar component visually represents the progress of a task or process.

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>

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

The ProgressBar component uses these theme variables to customize its appearance:

• backgroundColor-ProgressBar
• color-indicator-ProgressBar
• borderRadius-ProgressBar
• borderRadius-indicator-ProgressBar
• thicness-ProgressBar

This sample shows how you can style ProgressBar:

<Theme
  backgroundColor-ProgressBar="cyan"
  color-indicator-ProgressBar="purple"
  thickness-ProgressBar="12px"
  borderRadius-indicator-ProgressBar="12px"
  borderRadius-Progressbar="4px">
  <App>
    <ProgressBar value="0"/>
    <ProgressBar value="0.2"/>
    <ProgressBar value="0.6"/>
    <ProgressBar value="1"/>
    <ProgressBar value="1.2"/>
  </App>
</Theme>

Theme Variables