GitHub

Spokes

PreviousNext

A segmented spinner for lightweight indeterminate loading states.

import { Spokes } from "@/components/loading-ui/spokes";

export function SpokesDemo() {

Installation

pnpm dlx shadcn@latest add @loading-ui/spokes

Usage

import { Spokes } from "@/components/loading-ui/spokes";
<Spokes />

Customization

Spokes is a good fit when you want a loader that still reads clearly at small sizes without the visual weight of a continuous ring. It inherits currentColor, accepts standard SVG props, and can be tuned entirely with utility classes.

Size

Scale the loader with size-* utilities depending on whether it sits inline with text, inside a control, or in a more prominent waiting state.

import { Spokes } from "@/components/loading-ui/spokes";

export function SpokesSize() {

Color

Because the stroke uses currentColor, the component can inherit surrounding text color or be styled directly with any text utility.

import { Spokes } from "@/components/loading-ui/spokes";

export function SpokesColor() {

Line Weight

When you scale Spokes up, adjusting the stroke width helps keep the spinner balanced instead of feeling too thin or too heavy.

import { Spokes } from "@/components/loading-ui/spokes";

export function SpokesStrokeWidth() {

Duration

Set --duration to slow down calmer background work or tighten up quick action feedback.

import { Spokes } from "@/components/loading-ui/spokes";

export function SpokesDuration() {

Examples

These examples focus on the kinds of compact product UI where Spokes tends to work best. The segmented shape keeps the indicator noticeable without overpowering nearby text, borders, or status colors.

Button

Use Spokes in buttons when the action is pending but the control should still feel lightweight and responsive.

import { Button } from "@/components/ui/button";
import { Spokes } from "@/components/loading-ui/spokes";

Badge

For small status pills, Spokes is easier to tuck into a badge than a heavier spinner style.

SyncingIndexingVerifying
import { Badge } from "@/components/ui/badge";
import { Spokes } from "@/components/loading-ui/spokes";

Input Group

Inside input groups, the loader can communicate inline validation, lookup, or send states without introducing a separate loading row.

Checking...
Drafting response...
import {
  InputGroup,
  InputGroupAddon,

Alert

For background tasks that should stay visible but not interrupt the flow, Spokes works well as a subtle activity marker inside an alert.

import { Button } from "@/components/ui/button";
import {
  Alert,
SpiralSwirling