Animate UI

Progress

Displays the status of a task that takes a long time.

Made by imskyleen
Edit on GitHub
Open in
Export data %

Installation

Usage

<Progress>
  <ProgressLabel>Export data</ProgressLabel>
  <ProgressValue />
  <ProgressTrack>
    <ProgressIndicator />
  </ProgressTrack>
</Progress>

API Reference

Progress

Base UI API Reference - Progress.Root

ProgressLabel

Base UI API Reference - Progress.Label

ProgressValue

Base UI API Reference - Progress.ValueAnimate UI API Reference - CountingNumber
PropTypeDefault
transition?
SpringOptions
{ stiffness: 80, damping: 20 }

The render property is not supported in the ProgressValue component, as it is used for animation.

ProgressTrack

Base UI API Reference - Progress.Track

ProgressIndicator

Base UI API Reference - Progress.Indicator
PropTypeDefault
transition?
Transition
{ type: "spring", stiffness: 100, damping: 30 }

Credits

Built by Skyleen. The source code is available on GitHub.