Spinner
<cs-spinner>
Spinners indicate that an operation is in progress when the duration is unknown. Use them for loading states where a determinate progress bar isn't practical.
Examples
Size
Spinners are sized based on the current font size. To change the size, set font-size on the spinner itself or on a parent element.
Track Width
Use the --cs-track-width custom property to change the thickness of the spinner’s track.
Colors
Use the --cs-track-color and --cs-indicator-color custom properties to recolor the spinner.
Speed
Use the --cs-spinner-speed custom property to set how long one full rotation takes.
API
Importing
If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick this component, use one of the following snippets.
import '@cruglobal/cornerstone-components/components/spinner/spinner.js';
import './cornerstone/components/spinner/spinner.js';
import CsSpinner from '@cruglobal/cornerstone-components/react/spinner/index.js';
CSS Custom Properties
Learn more about CSS custom properties.
| Name | Description | Default |
|---|---|---|
--cs-indicator-color | The color of the spinner's indicator. | var(--cs-color-brand-fill-loud) |
--cs-spinner-speed | The time it takes for the spinner to complete one animation cycle. | 2s |
--cs-track-color | The color of the track. | var(--cs-color-neutral-fill-normal) |
--cs-track-width | The width of the track. | 2px |
CSS Parts
Learn more about CSS parts.
| Name | Description | CSS selector |
|---|---|---|
spinner | The component's outer wrapper. | ::part(spinner) |