Spinner / Skeleton

Busy-state primitives: the loading scale, progress bars, and staggered skeleton groups for placeholder frames.

Sizes

xs through xl, daisyUI's own loading scale

Colors

The 8-way semantic palette, plus current (inherits text color)

current

primary

secondary

accent

neutral

info

success

warning

error

Data table loading

Table's own skeleton prop over the real columns; see also /patterns/shape-matched-skeleton

Recent import jobs

AC Delco Q3 catalog

Job	Module	Catalog	Owner

Page load, title to table

PageTitle, a stat row, and a table booting in the canon's fixed order; see also /patterns/boot-skeletons

job_9421

AC Delco Q3, Part Type Matching

Pipeline stages

Stage	Status	Duration

Save button in a form

Button's loading prop disables the field and swaps in a spinner mid-save

Catalog settings

Refreshing indicator beside a timestamp

A spinner paired with a present-tense verb, not a bare glyph

Last synced 2m ago

Card grid revealing in a stagger

SkeletonGroup's cascade, then the real part-type cards land

Skeleton: block

Sized via className; used for cards, images, arbitrary areas

Skeleton: line

Defaults to a text-height bar

Skeleton: circle

rounded-full; pair with a size-* className

Progress

Determinate bar, indeterminate slide, label, colors, skeleton

64%

3/10 files

Spinners inside base components

The same LoadingIcon drives every component's busy state

SkeletonGroup

Section-level placeholders from named presets: lines / media / card / grid

preset="lines" lines=4

preset="media"

preset="card"

preset="grid" cols=3

Stagger

Opt-in cascade: pieces fade in with a bounded per-index delay instead of popping at once (replay to see it again)

SkeletonGroup stagger (lines)

SkeletonGroup stagger=200 (grid)

Hand-placed Skeletons via stagger={i}

Styling slots

None of these carry a full slot map; each exposes one or two loose className props

Spinner

className: the spinner element

Progress

className: the progress bar itself
_className: the outer row wrapping the bar and label

Skeleton

className: the placeholder block, line, or circle

SkeletonGroup

className: the outer wrapper; per-item classes live on that item's own config object