Components

DhSpinner

CSS-only loading ring. currentColor tinting; size as preset (sm/md/lg/xl), pixel number, or any CSS length.

Sizes

sm
md
lg
xl
48px
3rem
<DhSpinner size="sm" />
<DhSpinner size="md" />
<DhSpinner size="lg" />
<DhSpinner size="xl" />
<DhSpinner size={48} />
<DhSpinner size="3rem" />

Color via currentColor

Set the parent's color and the spinner follows.

primary
tertiary
error
muted
<div style="color: var(--color-primary)">
  <DhSpinner size="lg" />
</div>

With label

<DhSpinner size="md" label="Loading results..." />
<DhSpinner size="sm" label="Saving" />

Inside a button

DhButton's loading state uses DhSpinner under the hood.

<DhButton variant="primary" text="Save" loading />
<DhButton variant="ghost" shape="round" startIcon="plus"
  ariaLabel="Add" loading />