Loader
Loader components are used to indicate that content is being loaded or processed. They provide visual feedback to users while waiting for data to be fetched or actions to be completed.
Loading Code Block...Installation
Section titled “Installation”To get started, install Butterfly DS via aqua:
Loading Code Block...Loading Code Block...Variants
Section titled “Variants”Loading Code Block...Spinner Sizes
Section titled “Spinner Sizes”sm
md
lg
xl
Loading Code Block...| Props | Default | Type | Description |
|---|---|---|---|
| variant | spinner | spinner | progress | The variant of the loader. |
| text | default | string | The text to display alongside the loader. |
Spinner Props
Section titled “Spinner Props”| Props | Default | Type | Description |
|---|---|---|---|
| size | md | sm | md | lg | xl | The size of the spinner loader. |
Progress Props
Section titled “Progress Props”| Props | Default | Type | Description |
|---|---|---|---|
| width | 100% | number | The width of the progress bar. |
| value | - | number | The current value of the progress bar. |
| showPercentage | false | boolean | Whether to show the percentage value above the progress bar. |
| percentagePosition | top-right | top-right | center | top-left | Position of the percentage text relative to the progress bar. |