Properties
| Property | Type | Default value | Description |
|---|---|---|---|
progress | string number | undefined | A number between 0-100, if not supplied a continuous loading-type animation will be used. |
visible | boolean | true | Defines the visibility of the progress. Toggling the visible 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 | undefined | Content of a custom label. (Overrides indicator_label and showDefaultLabel) |
children | React.ReactNode | undefined | Same as label prop (label prop has priority) |
labelDirection | 'horizontal' 'vertical' 'inside' | 'horizontal' | 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. |
indicator_label | string | undefined | Use this to override the default label from text locales. |
title | string | undefined | Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent. |
customColors | object | undefined | Send in custom css colors that overrides any css. See below for data structure. |
customCircleWidth | string | undefined | 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 | en-US |
|---|---|---|---|
ProgressIndicator.indicator_label | Vennligst vent ... | Please wait ... | Please wait ... |
Data object customColors
| Property | Type | Default value | Description |
|---|---|---|---|
line | string | undefined | Override the moving line color. |
shaft | string | undefined | Override the background line color. |
background | string | undefined | Set a background color for the center of the circle. |
Deprecated properties
| Property | Type | Description |
|---|---|---|
no_animation | boolean | (deprecated) use noAnimation. |
label_direction | string | (deprecated) use labelDirection. |
show_label | boolean | (deprecated) use showDefaultLabel. |