Spinner

Loading indicator (role=status)

"Busy" with no shape to promise and no percentage to show — beside a label, in a table cell, inside a button (BlessButton loading does it). An outline square with one open edge, turning: the plate, spinning. color="current" (default) takes the text colour it sits beside — busy is not a choice, so it stays ink; accent is for a spinner on something the person just chose; under prefers-reduced-motion it turns at half speed rather than stopping, because a stopped loader reads as done.

It announces itself as a status named label ("Loading" by default — say what is loading when you can). When a parent already says it's busy — a button with aria-busy, a region with its own status — pass label="" and the spinner is decorative, so nothing is announced twice; the library's own components do this.

Content that isn't there yet, with a known shape: Skeleton. A region that must stay visible but untouchable: BlockUI. A page-level line: LoadingBar. A number: CircularProgress.

Basic

<script setup lang="ts">
import { BlessButton, BlessSpinner } from "blessing-ui";
</script>

<template>
  <div class="row">
    <BlessSpinner size="sm" />
    <BlessSpinner />
    <BlessSpinner size="lg" />
    <BlessButton loading>Saving</BlessButton>
  </div>
</template>

Usage

import { BlessSpinner } from "blessing-ui";

API

Props

Name	Type	Default	Description
size	"md" | "sm" | "lg"	"md"
color	"text" | "accent" | "current"	"current"
label	string	"Loading"	screen-reader text (role=status); "" when a parent already announces — then it's decorative