docs

Styling contract

Headless progress spinner only guarantees the root slot name. SVG elements, circle styles, dash math, and indeterminate motion all stay in owner CSS.

Slot hooks

Style the semantic root with [data-slot="progress-spinner"] and your own SVG classes for the track and indicator circles.

CSS starter

This starter keeps the primitive minimal while giving you a predictable circular shell and an animated indeterminate arc.

[data-slot="progress-spinner"] {
  display: inline-flex;
  height: 2.5rem;
  width: 2.5rem;
}

.progress-spinner-svg {
  display: block;
  height: 100%;
  width: 100%;
}

.progress-spinner-track,
.progress-spinner-indicator {
  fill: none;
  stroke-linecap: round;
  stroke-width: 4;
}

.progress-spinner-track {
  stroke: var(--tng-semantic-border-subtle);
}

.progress-spinner-indicator {
  stroke: var(--tng-semantic-accent-brand);
  transform: rotate(-90deg);
  transform-origin: center;
}

.progress-spinner-indicator--indeterminate {
  animation: tng-progress-spinner-indeterminate 1s linear infinite;
  stroke-dasharray: 70;
  stroke-dashoffset: 20;
}

Motion guidance

Use a restrained spin speed so long-running operations do not create distracting visual noise.
Increase size and stroke weight together to preserve legibility at larger scales.
Keep track and indicator contrast strong enough to remain readable on both light and dark surfaces.
Prefer determinate spinners only when the numeric range is real and meaningful to the user.