Spinner
Indicate the loading state of a component or page with React spinners.
Usage
Example
Script
return ( <div className="d-flex justify-content-between align-items-center"> <CSpinner color="success" size="sm" /> <CSpinner color="info" /> <CSpinner color="primary" style={{width:'4rem', height:'4rem'}} /> <CSpinner size="sm" variant="grow" /> <CSpinner color="warning" variant="grow" /> <CSpinner style={{width:'4rem', height:'4rem'}} color="danger" variant="grow" /> </div> )# Features
- Spinning and grow effect
- Fully customizable size
- Screen readers friendly
# Spinner API
| Name | Required | Type | Default Value |
|---|---|---|---|
| tag | any | div | |
| main HTML tag name | |||
| className | string | ||
| user classes for the main HTML tag | |||
| innerRef | (object | Function | string) | ||
| ref to the main tag | |||
| grow | boolean | ||
| grow type | |||
| size | string | ||
| set size of the spinner. Default available sizes: 'sm' | |||
| color | string | ||
| color of the component | |||