Properties#
| Type | Default value | Description | |
|---|---|---|---|
progress | string number | A number between 0-100, if not supplied a continuous loading-type animation will be used. | |
show | boolean | true | Defines the visibility of the progress. Toggling the show property to false will force a fade-out animation. |
type | "circular" "linear" "countdown" | "circular" | Defines the type. |
noAnimation | boolean | false | Disables the fade-in and fade-out animation. |
size | "default" "small" "medium" "large" "huge" string | "default" | Defines the size. |
label | React.ReactNode | Content of a custom label (overrides indicatorLabel and showDefaultLabel). | |
children | React.ReactNode | Same as label prop (label prop has priority). | |
labelDirection | "horizontal" "vertical" "inside" | "vertical" | Sets the position of the label. 'inside' only works with type='circular'. |
showDefaultLabel | boolean | false | If set to true a default label (from text locales) will be shown. |
indicatorLabel | string | Use this to override the default label from text locales. | |
title | string | Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent. | |
customColors | object | Send in custom CSS colors that override any CSS. See below for data structure. | |
customCircleWidth | string | Send in custom CSS width for circle progress line. (undefined defaults to one eighth of the size). | |
Space | string object | Spacing properties like top or bottom are supported. |
Translations#
More info about translations can be found in the general localization and Eufemia Forms localization docs.
| Key | nb-NO | en-GB | sv-SE | da-DK |
|---|---|---|---|---|
ProgressIndicator.indicatorLabel | Vennligst vent ... | Please wait ... | Vänligen vänta ... | Vent venligst ... |
Data object customColors#
| Type | Default value | Description | |
|---|---|---|---|
line | string | Override the moving line color. | |
shaft | string | Override the background line color. | |
background | string | Set a background color for the center of the circle. |