Spinner

In review

Live · web

Sizes: stroke scales with the diameter

xssmmdlgmd · track

With a label, baseline-aligned beside the arc

Loading sessions…Transcribing…

Inline within a line of running text

Connecting to the gatewayand resuming nockerl-design · docs site. This can take a moment.

Centered in a region · NockerlOverlay over dimmed content

Loading file…

Refreshing…

In a button: label swap, on-accent arc, blocks re-click

On a dark vs a light surface: same cyan arc

on canvas on a lifted card

Saved 0 times · overlay on. The island is live.

Code

// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform;
// this is the canonical API the published @dizyx/nockerl-react package exposes.)
// The spinner is the INDETERMINATE CIRCULAR loader: no value, no %, no track
// number. For a determinate ring use the NockerlGauge (shape="ring").
import { NockerlSpinner, NockerlButton } from '@dizyx/nockerl-react';

// Sizes. Stroke scales with the diameter. role="status" + aria-label baked in.
<NockerlSpinner size="md" label="Loading" />

// Beside a label (the most common form).
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
  <NockerlSpinner size="sm" /> Loading sessions…
</span>

// Centered in a content region while it loads.
<div className="file-preview" aria-busy>
  <NockerlSpinner size="lg" label="Loading file" />
</div>

// In a button, the NockerlButton primitive owns its OWN loading spinner (on-accent tinted)
// and holds its width. Pass `loading` + an optional `loadingText`; do NOT nest a
// NockerlSpinner inside it (NockerlButton takes `text`, not children).
<NockerlButton text="Save" loading loadingText="Saving…" />

// Android: Jetpack Compose (canonical). The spinner IS Material 3's
// CircularProgressIndicator (indeterminate overload, no `progress` lambda),
// used app-wide: 12dp/stroke 1.5dp inline-in-cards, 20 to 24dp/stroke 2dp for
// in-button + scrollback, larger when centered. Color defaults to the cyan
// accent (colorScheme.primary); pass `color = accent` in cards and
// `color = LocalContentColor.current` inside a button so it matches the label.
import androidx.compose.material3.CircularProgressIndicator

// Inline in a tool card, small and accent-tinted (ToolAdapterCards).
CircularProgressIndicator(
    modifier = Modifier.size(12.dp),
    strokeWidth = 1.5.dp,
    color = colors.accentPrimary,
)

// Centered in a region. Wrap in a Box(contentAlignment = Center) (FileViewer).
Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
    CircularProgressIndicator(modifier = Modifier.size(24.dp), strokeWidth = 2.dp)
}

// In a button, supplied as leadingContent while loading, tinted to the
// button's own content color so it reads on the fill (LoginScreen).
CircularProgressIndicator(
    modifier = Modifier.size(20.dp),
    strokeWidth = 2.dp,
    color = LocalContentColor.current,
)

// macOS: SwiftUI (Nockerl Voice). The indeterminate circular loader is a plain
// ProgressView() tinted to the brand accent, shipped in the RecordingHUD beside
// a "Transcribing…" label. (A DETERMINATE ring is ProgressView(value:) with
// .progressViewStyle(.circular), which lives on the progress-bar page.)
import SwiftUI

// Beside a label (the shipped form).
HStack(spacing: 10) {
    ProgressView()
        .controlSize(.small)
        .tint(NockerlTheme.accent)
    Text("Transcribing…")
        .font(.nockerl(size: NockerlFontSize.size12, weight: .medium))
        .foregroundStyle(NockerlTheme.onSurface)
}

// Centered in a region.
ProgressView()
    .controlSize(.large)
    .tint(NockerlTheme.accent)
    .frame(maxWidth: .infinity, maxHeight: .infinity)

Parameters

Prop	Type	Default	Description
`size`	`NockerlSpinnerSize`	`'md'`	Diameter step. Stroke width scales with the size (thinner when small).
`tone`	`NockerlSpinnerTone`	`'accent'`	Arc color: the cyan accent (default), the on-accent label (in a primary button), or inherit.
`track`	`boolean`	`false`	Render the faint recessed track ring behind the arc.
`label`	`string`	`'Loading'`	Accessible name announced by assistive tech.

Also accepts the native <span> attributes (e.g. onClick, disabled, id, aria-*, data-*), forwarded straight through, plus a forwarded ref.

The spinner is presentational (not focusable). It honors prefers-reduced-motion: the continuous spin stops and degrades to a static partial arc with a gentle opacity pulse, never an infinite fast spin.

The Compose spinner documented here is Material 3 CircularProgressIndicator (the indeterminate overload; omit the progress lambda) styled to the Nockerl accent, not a bespoke composable: size + stroke are passed at each call site.

Parameter	Type	Default	Description
`modifier`	`Modifier`	`Modifier`	Sizing. Convention: `Modifier.size(12.dp)` inline, `20.dp` to `24.dp` in buttons / scrollback, larger when centered.
`color`	`Color`	`colorScheme.primary`	Arc color, the brand cyan accent by default. Use `colors.accentPrimary` in cards, `LocalContentColor.current` inside a button.
`strokeWidth`	`Dp`	`4.dp`	Arc thickness. The app uses `1.5.dp` at 12.dp and `2.dp` at 18 to 24.dp. Keep stroke proportional to size.
`trackColor`	`Color`	`transparent (app)`	The recessed track behind the arc. The Nockerl usage leaves it trackless (transparent); set it for a visible ring.

The Swift idiom here is a plain ProgressView() (no value) tinted to the accent, which is the indeterminate circular loader. State is implicit (it always animates); there are no explicit parameters beyond the view modifiers below.

Style	Type	Default	Description
`ProgressView()`	`View`		The indeterminate spinner: no `value`. (Pass a `value` + `.progressViewStyle(.circular)` only for the determinate ring, which is the progress bar.)
`.controlSize`	`ControlSize`	`.regular`	Diameter step: `.small` (beside a label, as in the RecordingHUD), `.regular`, or `.large` when centered.
`.tint`	`Color`	`NockerlTheme.accent`	The arc color, the brand cyan accent.

Cross-platform drift (tracked for reconciliation)

The spinner is the indeterminate circular loader for unknown-length work, distinct from its neighbours: the progress bar owns determinate / indeterminate linear progress and the determinate ring (it intentionally left circular-indeterminate to the spinner); the context gauge is the threshold-banded budget meter; and the skeleton is a content-shaped placeholder. The spinner has no value, no %, and no track number.

Android (canonical): the spinner documented here is Material’s CircularProgressIndicator rather than a bespoke composable; size + stroke are set per call site (12.dp/1.5.dp inline, 20 to 24.dp/2.dp in buttons, larger when centered).
Swift: the small, label-paired ProgressView() is the form the Swift tab mirrors; the centered/overlay and in-button variants are designed here from the laws plus the Android treatment.
Track: the apps ship a trackless arc (transparent track); the web track prop is an opt-in recessed ring, off by default to match.