Wrapper slot hooks

Use [data-slot="progress-spinner"] for root sizing and .tng-progress-spinner-track/.tng-progress-spinner-indicator for circle styling.

[data-slot="progress-spinner"] {
  --tng-progress-spinner-size: 40px;
  --tng-progress-spinner-stroke-width: 4px;
}

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

.tng-progress-spinner-indicator {
  stroke: var(--tng-semantic-accent-brand);
  transition: stroke-dashoffset 180ms ease;
}

.tng-progress-spinner-indicator[data-indeterminate] {
  animation: tng-progress-spinner-indeterminate 1s linear infinite;
}

Default shell

The wrapper provides an inline-flex host, an SVG shell, and the default CSS variables for spinner size and stroke width so most teams only need slot-level overrides.

:host {
  display: inline-flex;
}

.tng-progress-spinner {
  display: inline-flex;
  height: var(--tng-progress-spinner-size, 40px);
  width: var(--tng-progress-spinner-size, 40px);
}

Owner guidance

• Scale size and strokeWidth together so the indicator stays legible.
• Use slot and circle hooks for tone changes instead of overriding SVG structure assumptions.
• Keep indeterminate motion restrained so long-running states do not feel noisy or frantic.
• Pair spinner usage with nearby status text when the task is not self-evident from placement alone.