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.

<cs-spinner></cs-spinner>

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.

<cs-spinner></cs-spinner>
<cs-spinner class="cs-font-size-2xl"></cs-spinner>
<cs-spinner class="cs-font-size-4xl"></cs-spinner>

Track Width

Use the --track-width custom property to change the thickness of the spinner’s track.

<cs-spinner class="cs-font-size-4xl" style="--track-width: 10px;"></cs-spinner>

Colors

Use the --track-color and --indicator-color custom properties to recolor the spinner.

<cs-spinner class="cs-font-size-4xl" style="--indicator-color: var(--cs-color-success-fill-loud); --track-color: var(--cs-color-success-fill-quiet);"></cs-spinner>

Speed

Use the --speed custom property to set how long one full rotation takes.

<cs-spinner class="cs-font-size-4xl" style="--speed: 4s;"></cs-spinner>

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.

CSS Parts

Learn more about CSS parts.