Progress

Displays the status of a task that takes a long time. Pass :value="null" for an indeterminate bar. The indicator fills with the accent on a fully round track. Label and value are Regular.

Export data20%

Anatomy

<UiProgressRoot :value="20">
  <UiProgressLabel>Export data</UiProgressLabel>
  <UiProgressValue />
  <UiProgressTrack>
    <UiProgressIndicator />
  </UiProgressTrack>
</UiProgressRoot>

Parts

  • Root — role="progressbar". value is a number or null. min defaults to 0, max to 100. Sets data-progressing, data-complete, or data-indeterminate.
  • Label — names the task.
  • Value — formatted reading. Empty while indeterminate.
  • Track — the full range.
  • Indicator — fills the track. Width uses a short CSS transition. Indeterminate uses a CSS slide, not an animation library.