Spinner

Something is on its way. With a label it is a status that assistive technology announces; beside visible text that already says so, leave the label off. It holds still under reduced motion.

Default

With a label the spinner is announced as a status. Beside visible text, leave the label off.

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-cluster/ui-cluster.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-spinner/ui-spinner.html"
>

<ui-cluster
  gap="s"
>
  <ui-spinner
    label="Loading pages"
  ></ui-spinner>
  <ui-spinner
    size="sm"
  ></ui-spinner>
</ui-cluster>

<script setup>
  import { UiCluster, UiSpinner } from "@threadlabs/looma";
</script>

<template>
  <UiCluster
    gap="s"
  >
    <UiSpinner
      label="Loading pages"
    />
    <UiSpinner
      size="sm"
    />
  </UiCluster>
</template>

import { UiCluster, UiSpinner } from "@threadlabs/looma";

export default function Example() {
  return <UiCluster
    gap="s"
  >
    <UiSpinner
      label="Loading pages"
    />
    <UiSpinner
      size="sm"
    />
  </UiCluster>;
}

/** @jsxImportSource preact */
import { UiCluster, UiSpinner } from "@threadlabs/looma";

export default function Example() {
  return <UiCluster
    gap="s"
  >
    <UiSpinner
      label="Loading pages"
    />
    <UiSpinner
      size="sm"
    />
  </UiCluster>;
}

<script>
  import { UiCluster, UiSpinner } from "@threadlabs/looma";
</script>

<UiCluster
  gap="s"
>
  <UiSpinner
    label="Loading pages"
  />
  <UiSpinner
    size="sm"
  />
</UiCluster>

import { Component } from "@angular/core";
import { UiCluster, UiSpinner } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiCluster, UiSpinner],
  template: `
    <div
      ui-cluster
      [gap]="'s'"
    >
      <span
        ui-spinner
        [label]="'Loading pages'"
      ></span>
      <span
        ui-spinner
        [size]="'sm'"
      ></span>
    </div>
  `,
})
export default class Example {}

Beside text

When text beside it already says what is loading, the spinner takes no label and is not announced twice.

Saving…

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-cluster/ui-cluster.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-spinner/ui-spinner.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-text/ui-text.html"
>

<ui-cluster
  gap="xs"
>
  <ui-spinner
    size="sm"
  ></ui-spinner>
  <ui-text
    tone="muted"
    size="sm"
  >Saving…</ui-text>
</ui-cluster>

<script setup>
  import { UiCluster, UiSpinner, UiText } from "@threadlabs/looma";
</script>

<template>
  <UiCluster
    gap="xs"
  >
    <UiSpinner
      size="sm"
    />
    <UiText
      tone="muted"
      size="sm"
    >Saving…</UiText>
  </UiCluster>
</template>

import { UiCluster, UiSpinner, UiText } from "@threadlabs/looma";

export default function Example() {
  return <UiCluster
    gap="xs"
  >
    <UiSpinner
      size="sm"
    />
    <UiText
      tone="muted"
      size="sm"
    >Saving…</UiText>
  </UiCluster>;
}

/** @jsxImportSource preact */
import { UiCluster, UiSpinner, UiText } from "@threadlabs/looma";

export default function Example() {
  return <UiCluster
    gap="xs"
  >
    <UiSpinner
      size="sm"
    />
    <UiText
      tone="muted"
      size="sm"
    >Saving…</UiText>
  </UiCluster>;
}

<script>
  import { UiCluster, UiSpinner, UiText } from "@threadlabs/looma";
</script>

<UiCluster
  gap="xs"
>
  <UiSpinner
    size="sm"
  />
  <UiText
    tone="muted"
    size="sm"
  >Saving…</UiText>
</UiCluster>

import { Component } from "@angular/core";
import { UiCluster, UiSpinner, UiText } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiCluster, UiSpinner, UiText],
  template: `
    <div
      ui-cluster
      [gap]="'xs'"
    >
      <span
        ui-spinner
        [size]="'sm'"
      ></span>
      <ng-template
        ui-text
        [tone]="'muted'"
        [size]="'sm'"
      >Saving…</ng-template>
    </div>
  `,
})
export default class Example {}

API

Package: @threadlabs/looma · Native root: span

Attributes

Name	Description	Property	Type	Default	Allowed values
`label`	What is loading, for assistive technology ("Loading pages"). With a label the spinner is a status that is announced; without one it is decoration, for a spinner beside visible text that already says so.	`label`	`string`		`—`
`size`	sm fits inside a button or a line of small text; md sits beside body text.	`size`	`keyword`	`md`	`sm, md`

Framework props

Name	Type	Default	Allowed values
`label`	`string`		`—`
`size`	`"sm" \| "md"`	`md`	`sm, md`

Events

No events.

Slots

No slots.

Design tokens

Set shared theme properties on a theme boundary. Component hooks apply only to their owning component.

Component tokens

No component tokens.

Shared tokens

Token	Fallback
`--ui-font-size-lg`	`—`
`--ui-font-size-md`	`—`