Feedback

Spinner

A loading spinner in three sizes, with optional text beside it.

fandry-spinner

Example

Link to section Example

Custom colors and parts

Link to section Custom colors and parts

The same component with a few --fd-* tokens set around it and its parts restyled. The code is under Parts below.

Props

Link to section Props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Spinner size. The ring's thickness follows it (`--fd-spinner-thickness`, in em of the ring).
`default slot`	`slot`	`—`	Text shown beside the ring, e.g. "Loading fields…". It becomes the status a screen reader reads, in place of label.
`label`	`string`	`''`	Names a spinner that shows no text, e.g. "Saving changes". Not displayed. Overrides messages.label.
`aria-label`	`string`	`—`	The same name, set the standard way. Wins over label, and is read in place of slotted text.
`messages`	`{ label }`	`{}`	Replaces the default name ("Loading") for every instance, e.g. to translate it.

Parts

Link to section Parts

Style the elements inside the component from your own CSS with ::part(). Every fandry component renders in native shadow DOM, so parts work on LWR and Salesforce alike. For colors, spacing, radius and type across many components, set the --fd-* tokens instead. The code for the "Custom colors and parts" example above:

Part	Description
`base`	The outermost element.
`label`	The label.

<!-- template -->
<div class="brand row">
  <fandry-spinner size="sm" label="Loading"></fandry-spinner>
  <fandry-spinner size="md" label="Loading"></fandry-spinner>
  <fandry-spinner size="lg" label="Loading"></fandry-spinner>
  <fandry-spinner size="sm">Saving record…</fandry-spinner>
</div>

/* css */
/* Scoped to this demo. Set the same --fd-* tokens on :root to theme
   every fandry-* component on the site. */
.brand {
  --fd-primary: 160 84% 26%;
  --fd-spinner-thickness: 0.2em;
}

/* The track is the border color. Set on the spinner alone, it is a tint
   of the primary color here and the border color everywhere else. */
fandry-spinner {
  --fd-border: 160 84% 26% / 0.2;
}

fandry-spinner::part(base) {
  border-right-color: hsl(45 90% 50%);
}

fandry-spinner::part(label) {
  color: hsl(160 84% 26%);
  font-weight: 600;
}

Code

Link to section Code

<fandry-spinner size="md"></fandry-spinner>

Example: With a label

Link to section Example: With a label

Code

<!-- Text in the default slot shows beside the ring. Style it with ::part(label). -->
<fandry-spinner size="sm">Loading fields…</fandry-spinner>
<fandry-spinner size="md">Saving record…</fandry-spinner>
<fandry-spinner size="lg">Converting lead…</fandry-spinner>