Basic example
The spinner component is mostly used as a loading indicator which comes in multiple colors, sizes, and styles separately or inside elements such as buttons to improve the user experience whenever data is being fetched from your server.
Use the following element with the animate-spin animation class to show a loading animation:
Hey there 👋 we want to make TW elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!
Colors
Change the colors of the spinner element using the fill and color utility classes.
Growing spinner
Use the .animate-[spinner-grow_0.75s_linear_infinite]
class if
you want the spinner/loader to grow instead of spin.
Colors of growing spinner
Use any text color utilities to add a color to growing spinner.
Margin
Use margin utilities like .m-12
for easy spacing.
Flex
Use flexbox utilities to place spinners exactly where you need them in any situation.
Floats
Use the flexbox, text alignment, or float utility classes to easily align the spinners to left, right or center.
Text
Use the following code to add spinner a text.
Size small
Use h-{*}
and w-{*}
utility classes to create a
smaller spinner.
Size large
Use h-{*}
and w-{*}
utility classes to create a
bigger spinner.