Intro
ProgressBar viser framdriften i en prosess.
Eksempler
ProgressBar kan brukes til å vise hvor i en flyt brukeren er
Med simulated-propen kan man legge inn et anslag i sekunder, så simulerer komponenten progresjon.
Lasting av innhold
Ved lasting av innhold kan man enten styre progresjonen helt selv eller la komponenten styre deler automatisk. Med value-propen bestemmer man progresjonen helt selv. Med duration-propen kan man legge inn et anslag i sekunder, så simulerer komponenten progresjon. Hvis det tar lenger tid enn antatt vises en indeterminate-animasjon.
Retningslinjer
Hvis du trenger en progresjonindikator til en søknad foreslår vi heller at du tar i bruk FormProgress.
Ved prosesser som består av flere steg, bør du ha med en tekst som sier noe om hvor i prosessen man er. Det gjelder både ved manuelle og automatiske prosesser.
Ved bruk av indeterminate-state bør du inkludere en forklaring, for eksempel "Dette tar lenger tid enn forventet" eller lignende.
Tilgjengelighet
Fordi ProgressBar trenger et tilgjengelig navn krever vi at man legger til enten aria-label eller aria-labelledby.
Hvis man legger inn en duration vil en skjermleser tolke komponenten som indeterminate umiddelbart, selv om tidsanslaget ikke har passert.
Props
ProgressBar
size?
- Type:
"large" | "medium" | "small" - Default:medium
- Description:
value?
- Type:
number - Default:0
- Description:
valueMax?
- Type:
number - Default:100
- Description:
simulated?
- Type:
{ seconds: number; onTimeout: () => void; } - Description:
aria-labelledby?
- Type:
string - Description:
aria-label?
- Type:
string - Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
Tokens
| Token | Fallback |
|---|---|
| --ac-progress-bar-fg | --a-surface-alt-3 |
