A family of components for displaying loading animations. Loading components provide visual indicators for users when content is being loaded or an action is in progress. DaisyUI Kit offers various loading animations with customizable sizes and colors.
The simplest way to use loading animations is to render the desired component. You can use any of the loading variants individually, or display all at once for demonstration purposes.
The LoadingSpinner components include the following:
The LoadingSpinner component displays a spinning circle animation, commonly used to indicate loading states.
| LoadingSpinner Props | Type | Description |
|---|---|---|
color | string | Sets the color of the loading animation. Options: - |
| neutral | boolean | Sets color to neutral. |
| primary | boolean | Sets color to primary. |
| secondary | boolean | Sets color to secondary. |
| accent | boolean | Sets color to accent. |
| info | boolean | Sets color to info. |
| success | boolean | Sets color to success. |
| warning | boolean | Sets color to warning. |
| error | boolean | Sets color to error. |
size | string | Sets the size of the loading animation. Options: - |
| xl | boolean | Sets size to xl. |
| lg | boolean | Sets size to lg. |
| md | boolean | Sets size to md. |
| sm | boolean | Sets size to sm. |
| xs | boolean | Sets size to xs. |
The LoadingDots component displays a series of bouncing dots, providing a subtle loading indicator.
| LoadingDots Props | Type | Description |
|---|---|---|
color | string | Sets the color of the loading animation. Options: - |
| neutral | boolean | Sets color to neutral. |
| primary | boolean | Sets color to primary. |
| secondary | boolean | Sets color to secondary. |
| accent | boolean | Sets color to accent. |
| info | boolean | Sets color to info. |
| success | boolean | Sets color to success. |
| warning | boolean | Sets color to warning. |
| error | boolean | Sets color to error. |
size | string | Sets the size of the loading animation. Options: - |
| xl | boolean | Sets size to xl. |
| lg | boolean | Sets size to lg. |
| md | boolean | Sets size to md. |
| sm | boolean | Sets size to sm. |
| xs | boolean | Sets size to xs. |
The LoadingRing component displays a rotating ring animation, providing a clean and minimal loading indicator.
| LoadingRing Props | Type | Description |
|---|---|---|
color | string | Sets the color of the loading animation. Options: - |
| neutral | boolean | Sets color to neutral. |
| primary | boolean | Sets color to primary. |
| secondary | boolean | Sets color to secondary. |
| accent | boolean | Sets color to accent. |
| info | boolean | Sets color to info. |
| success | boolean | Sets color to success. |
| warning | boolean | Sets color to warning. |
| error | boolean | Sets color to error. |
size | string | Sets the size of the loading animation. Options: - |
| xl | boolean | Sets size to xl. |
| lg | boolean | Sets size to lg. |
| md | boolean | Sets size to md. |
| sm | boolean | Sets size to sm. |
| xs | boolean | Sets size to xs. |
The LoadingBall component displays a bouncing ball animation, providing a playful loading indicator.
| LoadingBall Props | Type | Description |
|---|---|---|
color | string | Sets the color of the loading animation. Options: - |
| neutral | boolean | Sets color to neutral. |
| primary | boolean | Sets color to primary. |
| secondary | boolean | Sets color to secondary. |
| accent | boolean | Sets color to accent. |
| info | boolean | Sets color to info. |
| success | boolean | Sets color to success. |
| warning | boolean | Sets color to warning. |
| error | boolean | Sets color to error. |
size | string | Sets the size of the loading animation. Options: - |
| xl | boolean | Sets size to xl. |
| lg | boolean | Sets size to lg. |
| md | boolean | Sets size to md. |
| sm | boolean | Sets size to sm. |
| xs | boolean | Sets size to xs. |
The LoadingBars component displays animated vertical bars, providing a dynamic loading indicator.
| LoadingBars Props | Type | Description |
|---|---|---|
color | string | Sets the color of the loading animation. Options: - |
| neutral | boolean | Sets color to neutral. |
| primary | boolean | Sets color to primary. |
| secondary | boolean | Sets color to secondary. |
| accent | boolean | Sets color to accent. |
| info | boolean | Sets color to info. |
| success | boolean | Sets color to success. |
| warning | boolean | Sets color to warning. |
| error | boolean | Sets color to error. |
size | string | Sets the size of the loading animation. Options: - |
| xl | boolean | Sets size to xl. |
| lg | boolean | Sets size to lg. |
| md | boolean | Sets size to md. |
| sm | boolean | Sets size to sm. |
| xs | boolean | Sets size to xs. |
The LoadingInfinity component displays an animated infinity symbol, providing a continuous loading indicator.
| LoadingInfinity Props | Type | Description |
|---|---|---|
color | string | Sets the color of the loading animation. Options: - |
| neutral | boolean | Sets color to neutral. |
| primary | boolean | Sets color to primary. |
| secondary | boolean | Sets color to secondary. |
| accent | boolean | Sets color to accent. |
| info | boolean | Sets color to info. |
| success | boolean | Sets color to success. |
| warning | boolean | Sets color to warning. |
| error | boolean | Sets color to error. |
size | string | Sets the size of the loading animation. Options: - |
| xl | boolean | Sets size to xl. |
| lg | boolean | Sets size to lg. |
| md | boolean | Sets size to md. |
| sm | boolean | Sets size to sm. |
| xs | boolean | Sets size to xs. |
Showcases all loading components together.
Displays a spinning circle animation.
Displays a series of bouncing dots.
Displays a rotating ring animation.
Displays a bouncing ball animation.
Displays animated vertical bars.
Displays an animated infinity symbol.
All loading components support color customization. Try different color props.
All loading components support size customization. Try different size props.