Spinner

Work in progress: three dots that leap over each other. It takes the color of the text around it, and with reduced motion the dots stand still in a row.

import { Spinner } from '@basmilius/desktop-ui';

import { Spinner, Tooltip } from '@basmilius/desktop-ui';

export default function SpinnerDemo() {
    return (
        <div className="flex items-end gap-6 text-text-muted">
            {[12, 14, 16, 20].map((size) => (
                <span key={size} className="flex flex-col items-center gap-2 text-xs">
                    <Spinner size={size} />
                    {size}
                </span>
            ))}
            <span className="flex items-center gap-2 text-sm text-text">
                Indexing
                <Tooltip label="Running">
                    <Spinner size={12} label="Running" className="text-accent" />
                </Tooltip>
            </span>
        </div>
    );
}

It comes in the sizes of an Icon: 12, 14, 16 and 20 pixels, and is centered on the text beside it the same way.

Without a label it is hidden from screen readers, like an icon, for a spinner next to words that already say what runs. Give it a label when it stands on its own, such as a mark beside a title. It takes a Tooltip like any other element.

<Tooltip label="Running">
    <Spinner size={12} label="Running" className="text-accent" />
</Tooltip>

An IconButton, an EmptyState and a PanelEmpty draw one in place of their icon with busy.

Props

Spinner takes every prop of a <span> except children, plus:

Prop	Type	Default
size	number	16	In pixels: 12, 14, 16 or 20.
label	string		The name a screen reader reads. Without it the spinner is hidden.

SpinnerProps is an exported type.