Spinner

Spinners are used to show the progress of an indeterminate operation.

<p-spinner></p-spinner>

import PSpinner from 'pure-uikit/dist/react/spinner';

const App = () => <PSpinner />;

Examples

Size

Spinners are sized based on the current font size. To change their size, set the font-size property on the spinner itself or on a parent element as shown below.

<p-spinner></p-spinner>
<p-spinner style="font-size: 2rem;"></p-spinner>
<p-spinner style="font-size: 3rem;"></p-spinner>

import PSpinner from 'pure-uikit/dist/react/spinner';

const App = () => (
  <>
    <PSpinner />
    <PSpinner style={{ fontSize: '2rem' }} />
    <PSpinner style={{ fontSize: '3rem' }} />
  </>
);

Track Width

The width of the spinner’s track can be changed by setting the --track-width custom property.

<p-spinner style="font-size: 50px; --track-width: 10px;"></p-spinner>

import PSpinner from 'pure-uikit/dist/react/spinner';

const App = () => (
  <PSpinner
    style={{
      fontSize: '3rem',
      '--track-width': '6px'
    }}
  />
);

Color

The spinner’s colors can be changed by setting the --indicator-color and --track-color custom properties.

<p-spinner style="font-size: 3rem; --indicator-color: deeppink; --track-color: pink;"></p-spinner>

import PSpinner from 'pure-uikit/dist/react/spinner';

const App = () => (
  <PSpinner
    style={{
      fontSize: '3rem',
      '--indicator-color': 'deeppink',
      '--track-color': 'pink'
    }}
  />
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

<script type="module" src="https://cdn.jsdelivr.net/npm/pure-uikit@1.3.13/cdn/components/spinner/spinner.js"></script>

import 'https://cdn.jsdelivr.net/npm/pure-uikit@1.3.13/cdn/components/spinner/spinner.js';

import 'pure-uikit/dist/components/spinner/spinner.js';

import PSpinner from 'pure-uikit/dist/react/spinner';

Custom Properties

Learn more about customizing CSS custom properties.

Parts

Learn more about customizing CSS parts.