Spinner

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JSpinner } from '@juxtui/ui'

Usage #

<JSpinner />
<JSpinner size="sm" label="Loading results" />

Set label to an empty string when the surrounding context already says what’s loading, e.g. text right next to it — otherwise the default "Loading" is announced.

Variants & examples #

Centred in a panel#

A common pattern while a section’s content is being fetched.

<template>
  <div class="grid h-24 w-full max-w-xs place-items-center rounded-lg border border-border bg-surface">
    <JSpinner label="Loading chart" />
  </div>
</template>

Inline with text#

The adjacent text carries the meaning, so label is turned off to avoid announcing it twice.

<template>
  <div class="flex items-center gap-2 text-sm text-fg-muted">
    <JSpinner size="sm" label="" />
    <span>Fetching results…</span>
  </div>
</template>

API #

Props

Accessibility #

• When label is set, the wrapper gets role="status" and the label is visually hidden but announced.
• With an empty label, the spinner is purely decorative — make sure something nearby still announces the loading state.