Saasflare UI
Components

Spinner

Indeterminate loading spinner (Phosphor CircleNotch) for buttons and async regions.

Installation

npx shadcn@latest add https://ui.saasflare.io/r/spinner.json
pnpm add @saasflare/ui

Usage

Loading…
"use client"import { Spinner } from "@saasflare/ui"/** The spinner at increasing sizes, set via the `size-*` utility. */export function Demo() {    return (        <div className="flex items-center gap-6 text-muted-foreground">            <Spinner className="size-4" />            <Spinner className="size-6" />            <Spinner className="size-8" />            <Spinner className="size-10" />        </div>    )}

In Button

Loading…
"use client"import { Button, Spinner } from "@saasflare/ui"/** A spinner composed inside a button to signal a pending action. */export function Demo() {    return (        <Button disabled>            <Spinner className="size-4" />            Saving…        </Button>    )}

API Reference

Prop

Type

On this page