Progress Steps
Display the progression of a long-lasting task with various steps
<ProgressSteps {steps} />Properties
| Property | Description | Type | Default |
|---|---|---|---|
steps | The steps to display the progress. The array must contain at least one element. | ProgressStep |
Interface
A Step requires following information:
| Property | Description | Type | Default |
|---|---|---|---|
step | A key. | string | |
text | The related text to display next to the step. | string | |
state | The status of the step. | next or in_progress or completed |
Note
The component itself is not animated. Updating the steps property re-render the UI accordingly and per extension can be use to display a progression.
Showcase
Connection with sale canister Completed
2
Sending tokens In progress
3 Confirming your participation...
4 Updating your data