SusSpinner

Indeterminate busy indicator — size and color only.

Package

SusKit · Atoms (commercial)

Open in Playground

SusKit · Atoms

Props

Name	Type	Default
Size	Prop<string>	"md"
Color	Prop<string>	"primary"
Dual	Prop<bool>	false

Slots

No slots.

Events

No public events.

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

• sus-hidden
• sus-spinner
• sus-spinner__arc
• sus-spinner__arc--inner
• sus-spinner--danger
• sus-spinner--dual
• sus-spinner--lg
• sus-spinner--md
• sus-spinner--primary
• sus-spinner--secondary
• sus-spinner--sm
• sus-spinner--success
• sus-spinner--warning
• sus-spinner--white
• sus-spinner--xl
• sus-spinner--xs

Usage

<template>
  <sus:SusSpinner Size="md" Color="primary" />
</template>

var spin = new SusSpinner();
spin.Size.Value = "lg";
spin.Color.Value = "secondary";

Dual arc

Dual = true adds a second, inner arc that rotates the other way:

var spin = new SusSpinner();
spin.Dual.Value = true;

Both arcs carry the base class sus-spinner__arc, so a skin rule on .sus-spinner__arc styles both; tell them apart with .sus-spinner__arc--inner. The component keeps the inner arc's default look with compound rules on .sus-spinner__arc.sus-spinner__arc--inner: width/height stay auto (a 20% inset sets the size), and, under .sus-spinner--dual (plus the size class for xs/lg/xl), its top edge stays transparent and the border width follows the size. A skin rule that beats these rules on specificity and sets width, height, border-top-color or border-width on .sus-spinner__arc changes the inner arc too — add a matching .sus-spinner__arc.sus-spinner__arc--inner rule that puts those values back.

Size

xs · sm · md · lg · xl

Colors

primary · secondary · success · danger · warning · info

Notes

• There is no API to stop the spinner — it always spins. To hide it, remove it from the hierarchy.
• A spinner that was removed from the tree and added back spins again.

Reduce motion

While SusMotion.Reduce is on, the rotation pauses with the arcs at their start angle and the root gets sus-spinner--reduced, so a skin can style the still spinner. Turning the flag off resumes the rotation.