Components
ProgressLoader
A progress loader is a loading indicator that shows you how far in a process the user has come.
Code examples
<ProgressLoader value={50} maxWidth="150px" />
Guidelines
Progress loaders provide a more accurate indication of how much remains to be loaded. They should be used in situations where it is important to give the user an exact progress update. Downloading large files, loading pages with heavy content, uploading, or converting files are examples where using progress loaders is essential.
If the wait time is unknown, consider using a content loader or a spinner instead.
Code
<ProgressLoader />
import { ProgressLoader } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
value | number | Value between 0 and 100 (the percentage) | |
label | string | string[] | A descriptive text that shows up below. If an array is passed, it switches the text every `labelRotationDelay` seconds | |
labelRotationDelay | number | Delay in milliseconds. Default 5000 (5 seconds) | |
aria-label | string | Required if you don't pass a label | |
width | string | Defaults to 100% |