Loading

Indicators for loading states and progress

Basic

Basic Spinners

Preview Code Auto

Span(cls='loading loading-spinner loading-xs'),
Span(cls='loading loading-spinner loading-sm'),
Span(cls='loading loading-spinner loading-md'),
Span(cls='loading loading-spinner loading-lg')

Dots Animation

Preview Code Auto

Span(cls='loading loading-dots loading-xs'),
Span(cls='loading loading-dots loading-sm'),
Span(cls='loading loading-dots loading-md'),
Span(cls='loading loading-dots loading-lg')

Circular Ring

Ring-shaped loading animation

Preview Code Auto

Span(cls='loading loading-ring loading-xs'),
Span(cls='loading loading-ring loading-sm'),
Span(cls='loading loading-ring loading-md'),
Span(cls='loading loading-ring loading-lg')

Ball Animation

Preview Code Auto

Span(cls='loading loading-ball loading-xs'),
Span(cls='loading loading-ball loading-sm'),
Span(cls='loading loading-ball loading-md'),
Span(cls='loading loading-ball loading-lg')

Bars Animation

Preview Code Auto

Span(cls='loading loading-bars loading-xs'),
Span(cls='loading loading-bars loading-sm'),
Span(cls='loading loading-bars loading-md'),
Span(cls='loading loading-bars loading-lg')

Infinity Animation

Preview Code Auto

Span(cls='loading loading-infinity loading-xs'),
Span(cls='loading loading-infinity loading-sm'),
Span(cls='loading loading-infinity loading-md'),
Span(cls='loading loading-infinity loading-lg')

Colors

Color Customization

Loading spinners in different colors

Preview Code Auto

Span(cls='loading loading-spinner text-primary'),
Span(cls='loading loading-spinner text-secondary'),
Span(cls='loading loading-spinner text-accent'),
Span(cls='loading loading-spinner text-neutral'),
Span(cls='loading loading-spinner text-info'),
Span(cls='loading loading-spinner text-success'),
Span(cls='loading loading-spinner text-warning'),
Span(cls='loading loading-spinner text-error')

Class Reference

Class	Type	Description
loading	Component	Loading element
loading-spinner	Style	Spinner animation
loading-dots	Style	Dots animation
loading-ring	Style	Ring animation
loading-ball	Style	Ball animation
loading-bars	Style	Bars animation
loading-infinity	Style	Infinity animation
loading-xs\|sm\|md\|lg\|xl	Size	Size variants

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo