LoadersNew
Pill Loader
A row of slim pills where liquid rises and falls in turn. A calm loader for a dark interface.
Customize
color
trackColor
Based on brave-turtle-26 by Nawsome (MIT license) · Terms of use
More in Pro
View allProps
7 properties| Property | Type | Default | Description |
|---|---|---|---|
| count | number | 5 | Number of pills in the row. |
| size | number | 20 | Pill width in pixels; the height is four times this. |
| color | string | "#f5f5f5" | Liquid color. |
| trackColor | string | "#161616" | Color of the empty pill. |
| speed | number | 2.5 | Seconds for one rise and fall. |
| label | string | "Loading" | Text for screen readers. |
| className | string | — | Classes for the wrapper. |
Dependencies
2 required packages
npm install clsx tailwind-merge