Spinner

An animated loading spinner.

import { ... } from '@corndev/ui'

HTML

No JavaScript required — these classes are the whole component.

<span class="corn-spinner" data-size="md" role="status" aria-label="Loading"></span>

Classes

Class
`.corn-spinner`

Attributes

Attribute	Values
`data-size`	`sm\|md\|lg\|xl`

Vanilla JS

Optional. createSpinner only adds and removes the classes and attributes above, so the HTML is equivalent. Reach for it when you need to change options at runtime.

import { createSpinner } from '@corndev/ui';
import '@corndev/ui/theme';

const el = document.querySelector('#target');
const instance = createSpinner(el, { /* options */ });

Options

Option	Type	Default	Description
`size`	`'sm'\|'md'\|'lg'\|'xl'`	`'md'`
`label`	`string`	`'Loading'`	Accessible label announced by screen readers.

React

Spinner — from @corndev/ui-react.

The props are the same as the options above, plus className.

A spinner indicates an indeterminate wait. It exposes role="status" with an accessible label. Pair it with a label that describes what’s loading.

Usage

import { Spinner } from '@corndev/ui-react';

<Spinner />
<Spinner size="lg" label="Saving changes" />

import { createSpinner } from '@corndev/ui';
createSpinner(document.querySelector('#spinner'), { size: 'lg', label: 'Saving' });