Indicators
Loading and progress indicators, from circular spinners and determinate progress rings to animated dots, with configurable color and stroke.
import { LoadingIndicator, CircularProgress, LoadingDots } from "@plexui/vue/components/Indicator";Examples
Overview
LoadingIndicator
Sizing & stroke
size
30
strokeWidth
2
Color
Duration
CircularProgress
Progress
Sizing & stroke
size
30
strokeWidth
2
Color
LoadingDots
Color
API
LoadingIndicator
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | string | "1em" | Size in px or any CSS length (or use the --indicator-size CSS variable) |
stroke-width | number | 2 | Stroke width in px |
CircularProgress
| Prop | Type | Default | Description |
|---|---|---|---|
progress | number | — | Static progress 0-100 (disables the simulated animation) |
done | boolean | false | Fills the ring and ends the simulated progress |
max-duration | number | 15000 | Duration of the simulated progress in ms |
size | number | string | "28px" | Diameter in px or any CSS length |
stroke-width | number | 2 | Stroke thickness in px, capped at 4 |
track-color | string | — | Track color (CSS variable or value) |
track-active-color | string | — | Active segment color |
A style attribute replaces the size, stroke and color variables these props set. All other <span> (LoadingIndicator) or <div> (CircularProgress, LoadingDots) attributes are forwarded.
Styling
The indicators read these CSS custom properties, each with a fallback. Set them at any scope to restyle the indicators inside it:
--indicator-size:LoadingIndicatorsize (defaults to1em)--indicator-stroke:LoadingIndicatorstroke width (defaults to2px)--indicator-color:LoadingIndicatorcolor (defaults tocurrentcolor)--indicator-rotate-duration: time of oneLoadingIndicatorturn (defaults to0.8s)--circular-progress-size:CircularProgressdiameter (defaults to28px)--circular-progress-stroke:CircularProgressstroke width (defaults to2px)--circular-progress-track-color:CircularProgressbase track (defaults to a light green)--circular-progress-track-active-color:CircularProgressprogress stroke (defaults to--green-500)
LoadingDots takes the current text color.