Overview
Our spinners are built entirely using HTML and CSS. You can toggle their visibility using JavaScript in you project. Their appearance, alignment, and sizing can be easily customized with our utility classes.
For accessibility purposes, each loader here includes role="status" and a nested <span className="sr-only">Loading...</span>.
Expected ways to use spinners:
- Use the border spinners for a lightweight loading indicator.
- Spinners should be centered within its container unless inside of another element like a button and use flexbox utilities, or text alignment utilities for placement.
Example
API
Spinner
import Spinner from `@trimbleinc/modus-react-bootstrap/Spinner`| Name | Type | Default | Description |
|---|---|---|---|
| animation required | 'border' | 'grow' | true | Changes the animation style of the spinner. |
| as | elementType | <div> | |
| children | element | This component may be used to wrap child elements or components. | |
| role | string | An ARIA accessible role applied to the Menu component. This should generally be set to 'status' | |
| size | 'sm' | Component size variations. | |
| variant | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | The visual color style of the spinner | |
| bsPrefix | string | 'spinner' |