Spinner
A rotating indicator for a wait, as a class, or as an element that can also show how far along it is.
-
<aparte-progress-spinner> -
.aparte-spinner
On this page
<span class="aparte-spinner aparte-spinner--sm" role="status" aria-label="Loading"></span>
<span class="aparte-spinner" role="status" aria-label="Loading"></span>
<span class="aparte-spinner aparte-spinner--lg" role="status" aria-label="Loading"></span>.aparte-spinner is a ring that turns, in three sizes (--sm, the default, --lg), for a wait
of unknown length: a button that is sending, a list that is loading.
Variants
Section titled “Variants”With progress
Section titled “With progress”<!-- Without value it spins; with one, the ring fills to it. --aparte-spinner-size sets its size. -->
<div style="display: flex; gap: var(--aparte-space-6); --aparte-spinner-size: 2rem">
<aparte-progress-spinner aria-label="Loading"></aparte-progress-spinner>
<aparte-progress-spinner value="25" aria-label="Downloading the model"></aparte-progress-spinner>
<aparte-progress-spinner value="62" aria-label="Downloading the model"></aparte-progress-spinner>
<aparte-progress-spinner value="100" aria-label="Downloaded"></aparte-progress-spinner>
</div><aparte-progress-spinner> turns while it has no value, and fills its ring to the value
(0 to 100) once it has one: a model being downloaded, a file being read.
<aparte-progress-spinner value="…"></aparte-progress-spinner><aparte-progress-spinner value="…"></aparte-progress-spinner>The aparte-* tags are typed JSX intrinsics as soon as you import from @aparte/react.
<template>
<aparte-progress-spinner value="…"></aparte-progress-spinner>
</template>Declared through Vue’s GlobalComponents, so vue-tsc checks the tag in any template.
<aparte-progress-spinner value="…"></aparte-progress-spinner>Declared through SvelteHTMLElements, so svelte-check covers the attributes and the on: handlers.
import { AparteProgressSpinnerDirective } from '@aparte/angular';<aparte-progress-spinner value="…"></aparte-progress-spinner>A standalone directive whose selector IS the tag, so the real element sits in the template — @if, @for and content projection all reach it — and no CUSTOM_ELEMENTS_SCHEMA is needed.
Installation and the framework-specific traps: React · Vue · Svelte · Angular.
Customize
Section titled “Customize”| Variable | Default | Note |
|---|---|---|
--aparte-spinner-size-sm | 12px | |
--aparte-spinner-size-md | 16px | |
--aparte-spinner-size-lg | 24px | |
--aparte-spinner-size | var(--aparte-spinner-size-md) | Shared by both spinners the library ships — the display recipe and the <aparte-progress-spinner> element. |
--aparte-spinner-thickness | var(--aparte-space-1) | |
--aparte-spinner-color | currentColor | |
--aparte-spinner-track | var(--aparte-border-control) |
<aparte-progress-spinner> · class AparteProgressSpinner
Attributes
| Attribute | Description |
|---|---|
value | Progress percentage 0–100 (omit for indeterminate) |
CSS variables
| Variable | Default | Description |
|---|---|---|
--aparte-spinner-size | var(--aparte-spinner-size-md) | Width and height of the element; the SVG fills it. |
--aparte-spinner-color | currentColor | Stroke of the filled (progress) arc. |
--aparte-spinner-track | var(--aparte-border-control) | Stroke of the track arc behind it. |
Classes
Section titled “Classes”.aparte-spinner · .aparte-spinner--lg · .aparte-spinner--sm
Accessibility
Section titled “Accessibility”<aparte-progress-spinner>is aprogressbar, with its value once it has one. It has no name of its own: give it anaria-labelunless the text beside it says what is loading.- The
.aparte-spinnerclass is drawing only: putrole="status"and a visually hidden label on what it sits in, or let the surrounding text say it. - Both stop turning under
prefers-reduced-motion.