Spinners / Loaders

There is an svg-spinners iconify library with 46 additional spinners, which you can easily add to your project:

pnpm add -D @iconify-json/svg-spinners

To customize these spinners use regular Tailwind classes to modify the size and color.

Example: w-12 h-12 text-primary-500 i-svg-spinners-blocks-scale.

You can set the size of each spinner by setting the width and height after the s- prefix. For example: s-wh15-circle-secondary, s-wh20-flip-tertiary. This will set the width and height to w-15 h-15 and w-20 h-20 respectively.

Ato-UI’s spinners can be customized with different colors. Each one is a bit different. Some might have 2-3 changable colors and others only 1. For each color you can also specify a shade.

Pattern: s-circle-[color].

You can change the border type and size of circles by using regular Tailwind classes like: border-dashed, border-spotted, border-6, and border-8.

Pattern: s-circle-split-[color].

Pattern: s-squares-hover-[color1]-[color2]-[color3]. You can set the colors of all three layers.

Pattern: s-squares-hover-[color1]-[color2]. You can set the colors of both rotating squares. The second color is optional.

Pattern: s-corners-[color].

You can also change the background with some additional classes such as:bg-gradient-primary-secondary-tertiary.

Pattern: s-corners-outline-[color].