ProgressSpinner

Working on it.

<sui-progress-spinner>FeedbackStable

About

Indeterminate ring spinner for a wait with no known total: a register loading, an entry posting. Pair it with a short label on a panel and keep it small and unlabeled inside a control that already says what it is doing. Use sui-progress-bar or sui-progress-ring when there is a total.

Usage

<sui-progress-spinner label="Loading register"></sui-progress-spinner> <script type="module"> import { defineCustomElements } from "@shineui/core/loader"; import "@shineui/core/shineui.css"; defineCustomElements(); </script>

import { SuiProgressSpinner } from "@shineui/react"; import "@shineui/core/shineui.css"; export function Example() { return <SuiProgressSpinner label="Loading register" />; }

import { Component } from "@angular/core"; import { SuiProgressSpinner } from "@shineui/angular"; @Component({ standalone: true, imports: [SuiProgressSpinner], template: `<sui-progress-spinner label="Loading register"></sui-progress-spinner>`, }) export class Example { }

Basic

label is both the visible caption and the accessible name, so they cannot drift; with no caption it falls back to aria-label, then to "Loading". The ring is role="status", so inserting one announces politely and takes no focus. It keeps turning under reduced motion, only slower: a stopped spinner reads as a hang.

<sui-progress-spinner label="Loading register"></sui-progress-spinner>

Accent and sizes

accent swaps the navy arc for orange. diameter is the outer diameter and thickness the stroke, both in px.

In place

The spinner is an inline block, so it sits inside whatever is waiting. Pair it with a caption on a panel, and keep it small and unlabeled inside a control that already says what it is doing.

Posting entry

<div style="display:flex;gap:14px;align-items:stretch;flex-wrap:wrap;"> <div style="flex:1;min-width:220px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:26px;display:flex;align-items:center;justify-content:center;"> <sui-progress-spinner label="Loading register"></sui-progress-spinner> </div> <div style="flex:1;min-width:220px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:26px;display:flex;gap:10px;align-items:center;justify-content:center;"> <sui-progress-spinner diameter="16" thickness="2" aria-label="Posting entry"></sui-progress-spinner> <span style="font:550 13px/1.4 var(--font-sans);color:var(--ink-muted);">Posting entry</span> </div> </div>

API

`<sui-progress-spinner>`

Properties

Property	Attribute	Type	Default	Description
`accent`	`accent`	`boolean`	`false`	Accent arc instead of brand.
`diameter`	`diameter`	`number`	`32`	Outer diameter of the spinner in px.
`label`	`label`	`string`string \| undefined		Caption under the ring and the accessible name, so the two cannot drift. With no caption the name falls back to `aria-label` on the host, then to "Loading". The ring is `role="status"`: inserting one announces it politely without taking focus, and removing it announces nothing. It keeps turning under reduced motion, only slower, because a stopped spinner reads as a hang.
`thickness`	`thickness`	`number`	`3`	Ring stroke in px.

Theming

Every design token this element can render with, read from its own stylesheets and the ones it imports. Set a token on :root or on any ancestor and every use below follows it. The values shown are the ones in the theme you are viewing. The list is read per stylesheet, so an element that imports a shared drawing module lists that module's tokens too, whether or not it paints with all of them.