blurrow/ui
feedback

spinner

a small arc going round, for waits too short or too vague for a progress bar. it takes the text colour around it.

syncing…

installation

new to blurrow? this sets up your project in one go: the package, the styles and the font. already done it? skip straight to usage. the installation page has the details.

bash
npx @blurrow/ui init
›rather own the code? copy the source instead

let the cli copy it, along with anything it needs:

bash
npx @blurrow/ui add spinner

or by hand: drop this file into components/ui and import from there.

components/ui/Spinner.tsxtsx
import React from "react";


type SpinnerSize = "sm" | "md" | "lg";


interface SpinnerProps {
  size?: SpinnerSize | number;
  /** Read out to screen readers; the spinner is silent without it */
  label?: string;
  className?: string;
}


const SIZES: Record<SpinnerSize, number> = { sm: 14, md: 18, lg: 24 };


/* A short arc chasing round a faint ring. It takes the text colour, so
   inside a primary button it's light and on the page it's ink.       */
export function Spinner({ size = "md", label, className = "" }: SpinnerProps) {
  const px = typeof size === "number" ? size : SIZES[size];
  return (
    <span
      role={label ? "status" : undefined}
      aria-label={label}
      aria-hidden={label ? undefined : true}
      className={["inline-flex shrink-0", className].join(" ")}
      style={{ width: px, height: px }}
    >
      <svg viewBox="0 0 24 24" width={px} height={px} fill="none" className="animate-spin">
        <circle cx="12" cy="12" r="9.5" stroke="currentColor" strokeWidth="2.5" opacity="0.18" />
        <path d="M21.5 12a9.5 9.5 0 0 0-9.5-9.5" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
      </svg>
    </span>
  );
}

usage

tsx
import { Spinner } from "@blurrow/ui";
tsx
<Spinner label="loading" />

examples

in a button

props

straight from the source, so they're always up to date.

propsts
type SpinnerSize = "sm" | "md" | "lg";


interface SpinnerProps {
  size?: SpinnerSize | number;
  /** Read out to screen readers; the spinner is silent without it */
  label?: string;
  className?: string;
}
previous←skeletonnextempty state→