Loading
The "Loading" family of components show loading indicators of various styles. Instead of using props to change appearance, they are provided as individual components. This saves on overall CSS bundle size.
Code Example
<Kbd>shift</Kbd>Components
The following "Loading" components are included:
All components include the following props
| Prop | Type | Description |
|---|---|---|
color | string | Sets the color to one of the below prop names. |
| Â Â Â neutral | boolean | Sets the color to neutral. |
| Â Â Â primary | boolean | Sets the color to primary. |
| Â Â Â secondary | boolean | Sets the color to secondary. |
| Â Â Â accent | boolean | Sets the color to accent. |
| Â Â Â info | boolean | Sets the color to info. |
| Â Â Â success | boolean | Sets the color to success. |
| Â Â Â warning | boolean | Sets the color to warning. |
| Â Â Â error | boolean | Sets the color to error. |
size | string | Sets the button size. Can be set to one of the below size prop names. |
   lg | boolean | Sets the button size to lg |
   md | boolean | Sets the button size to md (the default) |
   sm | boolean | Sets the button size to sm |
   xs | boolean | Sets the button size to xs |
LoadingSpinner
LoadingSpinner shows the spinner animation.
Code Example
<LoadingSpinner />LoadingDots
LoadingDots shows the dots animation.
Code Example
<LoadingDots />LoadingRing
LoadingRing shows the ring animation.
Code Example
<LoadingRing />LoadingBall
LoadingBall shows the ball animation.
Code Example
<LoadingBall />LoadingBars
LoadingBars shows the bars animation.
Code Example
<LoadingBars />LoadingInfinity
LoadingInfinity shows the infinity animation.
Code Example
<LoadingInfinity />Size
All Loading components support four sizes: xs, sm, md, and lg.
Code Example
<LoadingSpinner xs />Color
All Loading components in all sizes support all DaisyUI colors. You can also customize color using any text- color class utility.
Code Example
<LoadingSpinner primary />