ProgressRing (<disco-progress-ring>)

Displays the progress of a task in a circular ring.

Usage

Indeterminate (default)

<disco-progress-ring indeterminate></disco-progress-ring>

Determinate

<disco-progress-ring value="60" max="100"></disco-progress-ring>

Foreground color mode

<disco-progress-ring indeterminate color-mode="foreground"></disco-progress-ring>

Attributes

• indeterminate: Enables 5-dot clockwise animation mode.
• value: Current value for determinate mode.
• max: Maximum value for determinate mode (default 100).
• color-mode: accent (default) or foreground.
• foreground: Boolean alias for foreground color mode.

Methods

• startIndeterminate(): Starts indeterminate animation from the beginning.
• stopIndeterminate({ graceful: true }): Stops after current animation cycle finishes.

Styling

• --disco-progress-ring-size: Ring size (default 40px).
• Default color in both modes is --disco-accent.