Basic Spinner
A Spinner component is used to show the user a timely process is currently taking place. Check out code for detail of usage.
<div
class="spinner h-7 w-7 animate-spin rounded-full border-[3px] border-slate-500 border-r-transparent dark:border-navy-300 dark:border-r-transparent"
></div>
<div
class="spinner h-7 w-7 animate-spin rounded-full border-[3px] border-primary border-r-transparent dark:border-accent dark:border-r-transparent"
></div>
<div
class="spinner h-7 w-7 animate-spin rounded-full border-[3px] border-secondary border-r-transparent"
></div>
<div
class="spinner h-7 w-7 animate-spin rounded-full border-[3px] border-info border-r-transparent"
></div>
<div
class="spinner h-7 w-7 animate-spin rounded-full border-[3px] border-success border-r-transparent"
></div>
<div
class="spinner h-7 w-7 animate-spin rounded-full border-[3px] border-warning border-r-transparent"
></div>
<div
class="spinner h-7 w-7 animate-spin rounded-full border-[3px] border-error border-r-transparent"
></div>
Elastic Timing Function
A Timing function describes how an animation will progress, allowing it to change speed during its course. Check out code for detail of usage.
<div
class="spinner is-elastic h-7 w-7 animate-spin rounded-full border-[3px] border-slate-500 border-r-transparent dark:border-navy-300 dark:border-r-transparent"
></div>
<div
class="spinner is-elastic h-7 w-7 animate-spin rounded-full border-[3px] border-primary border-r-transparent dark:border-accent dark:border-r-transparent"
></div>
<div
class="spinner is-elastic h-7 w-7 animate-spin rounded-full border-[3px] border-secondary border-r-transparent"
></div>
<div
class="spinner is-elastic h-7 w-7 animate-spin rounded-full border-[3px] border-info border-r-transparent"
></div>
<div
class="spinner is-elastic h-7 w-7 animate-spin rounded-full border-[3px] border-success border-r-transparent"
></div>
<div
class="spinner is-elastic h-7 w-7 animate-spin rounded-full border-[3px] border-warning border-r-transparent"
></div>
<div
class="spinner is-elastic h-7 w-7 animate-spin rounded-full border-[3px] border-error border-r-transparent"
></div>
Soft Color Spinner
Spinner can have a soft colors. To do this, you should use some opacity. Check out code for detail of usage.
<div
class="spinner h-7 w-7 animate-spin rounded-full border-[3px] border-slate-150 border-r-slate-500 dark:border-navy-500 dark:border-r-navy-300"
></div>
<div
class="spinner h-7 w-7 animate-spin rounded-full border-[3px] border-primary/30 border-r-primary dark:border-accent/30 dark:border-r-accent"
></div>
<div
class="spinner h-7 w-7 animate-spin rounded-full border-[3px] border-secondary/30 border-r-secondary"
></div>
<div
class="spinner h-7 w-7 animate-spin rounded-full border-[3px] border-info/30 border-r-info"
></div>
<div
class="spinner h-7 w-7 animate-spin rounded-full border-[3px] border-success/30 border-r-success"
></div>
<div
class="spinner h-7 w-7 animate-spin rounded-full border-[3px] border-warning/30 border-r-warning"
></div>
<div
class="spinner h-7 w-7 animate-spin rounded-full border-[3px] border-error/30 border-r-error"
></div>
Soft Elsatic Spinner
A Timing function describes how an animation will progress, allowing it to change speed during its course. Check out code for detail of usage.
<div
class="spinner is-elastic h-7 w-7 animate-spin rounded-full border-[3px] border-slate-150 border-r-slate-500 dark:border-navy-500 dark:border-r-navy-300"
></div>
<div
class="spinner is-elastic h-7 w-7 animate-spin rounded-full border-[3px] border-primary/30 border-r-primary dark:border-accent/30 dark:border-r-accent"
></div>
<div
class="spinner is-elastic h-7 w-7 animate-spin rounded-full border-[3px] border-secondary/30 border-r-secondary"
></div>
<div
class="spinner is-elastic h-7 w-7 animate-spin rounded-full border-[3px] border-info/30 border-r-info"
></div>
<div
class="spinner is-elastic h-7 w-7 animate-spin rounded-full border-[3px] border-success/30 border-r-success"
></div>
<div
class="spinner is-elastic h-7 w-7 animate-spin rounded-full border-[3px] border-warning/30 border-r-warning"
></div>
<div
class="spinner is-elastic h-7 w-7 animate-spin rounded-full border-[3px] border-error/30 border-r-error"
></div>
Grow Spinner
If you don’t fancy a border spinner, switch to the grow spinner. Check out code for detail of usage.
<div class="spinner is-grow relative h-7 w-7">
<span
class="absolute inline-block h-full w-full rounded-full bg-slate-500 opacity-75 dark:bg-navy-300"
></span>
<span
class="absolute inline-block h-full w-full rounded-full bg-slate-500 opacity-75 dark:bg-navy-300"
></span>
</div>
<div class="spinner is-grow relative h-7 w-7">
<span
class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
></span>
<span
class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
></span>
</div>
<div class="spinner is-grow relative h-7 w-7">
<span
class="absolute inline-block h-full w-full rounded-full bg-secondary opacity-75"
></span>
<span
class="absolute inline-block h-full w-full rounded-full bg-secondary opacity-75"
></span>
</div>
<div class="spinner is-grow relative h-7 w-7">
<span
class="absolute inline-block h-full w-full rounded-full bg-info opacity-75"
></span>
<span
class="absolute inline-block h-full w-full rounded-full bg-info opacity-75"
></span>
</div>
<div class="spinner is-grow relative h-7 w-7">
<span
class="absolute inline-block h-full w-full rounded-full bg-success opacity-75"
></span>
<span
class="absolute inline-block h-full w-full rounded-full bg-success opacity-75"
></span>
</div>
<div class="spinner is-grow relative h-7 w-7">
<span
class="absolute inline-block h-full w-full rounded-full bg-warning opacity-75"
></span>
<span
class="absolute inline-block h-full w-full rounded-full bg-warning opacity-75"
></span>
</div>
<div class="spinner is-grow relative h-7 w-7">
<span
class="absolute inline-block h-full w-full rounded-full bg-error opacity-75"
></span>
<span
class="absolute inline-block h-full w-full rounded-full bg-error opacity-75"
></span>
</div>
SVG Spinner
You can also use SVG shapes for spinners. Check out code for detail of usage.
<div class="spinner h-7 w-7 animate-spin text-slate-500 dark:text-navy-300">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-full w-full"
fill="none"
viewBox="0 0 28 28"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="spinner h-7 w-7 animate-spin text-primary dark:text-accent">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-full w-full"
fill="none"
viewBox="0 0 28 28"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
clip-rule="evenodd"
/>
</svg>
</div>
<div
class="spinner h-7 w-7 animate-spin text-secondary dark:text-secondary-light"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-full w-full"
fill="none"
viewBox="0 0 28 28"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="spinner h-7 w-7 animate-spin text-info">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-full w-full"
fill="none"
viewBox="0 0 28 28"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="spinner h-7 w-7 animate-spin text-success">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-full w-full"
fill="none"
viewBox="0 0 28 28"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="spinner h-7 w-7 animate-spin text-warning">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-full w-full"
fill="none"
viewBox="0 0 28 28"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="spinner h-7 w-7 animate-spin text-error">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-full w-full"
fill="none"
viewBox="0 0 28 28"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
clip-rule="evenodd"
/>
</svg>
</div>
SVG Spinner Elastic
A Timing function describes how an animation will progress, allowing it to change speed during its course. Check out code for detail of usage.
<div
class="spinner is-elastic h-7 w-7 animate-spin text-slate-500 dark:text-navy-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-full w-full"
fill="none"
viewBox="0 0 28 28"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
clip-rule="evenodd"
/>
</svg>
</div>
<div
class="spinner is-elastic h-7 w-7 animate-spin text-primary dark:text-accent"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-full w-full"
fill="none"
viewBox="0 0 28 28"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
clip-rule="evenodd"
/>
</svg>
</div>
<div
class="spinner is-elastic h-7 w-7 animate-spin text-secondary dark:text-secondary-light"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-full w-full"
fill="none"
viewBox="0 0 28 28"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="spinner is-elastic h-7 w-7 animate-spin text-info">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-full w-full"
fill="none"
viewBox="0 0 28 28"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="spinner is-elastic h-7 w-7 animate-spin text-success">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-full w-full"
fill="none"
viewBox="0 0 28 28"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="spinner is-elastic h-7 w-7 animate-spin text-warning">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-full w-full"
fill="none"
viewBox="0 0 28 28"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="spinner is-elastic h-7 w-7 animate-spin text-error">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-full w-full"
fill="none"
viewBox="0 0 28 28"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
clip-rule="evenodd"
/>
</svg>
</div>
Spinner Size
A Spinner component is used to show the user a timely process is currently taking place. Check out code for detail of usage.
<!-- Basic Spinner -->
<div>
<div
class="spinner h-5 w-5 animate-spin rounded-full border-2 border-primary border-r-transparent dark:border-accent dark:border-r-transparent"
></div>
<div
class="spinner h-7 w-7 animate-spin rounded-full border-[3px] border-primary border-r-transparent dark:border-accent dark:border-r-transparent"
></div>
<div
class="spinner h-10 w-10 animate-spin rounded-full border-4 border-primary border-r-transparent dark:border-accent dark:border-r-transparent"
></div>
<div
class="spinner h-12 w-12 animate-spin rounded-full border-4 border-primary border-r-transparent dark:border-accent dark:border-r-transparent"
></div>
<div
class="spinner h-16 w-16 animate-spin rounded-full border-4 border-primary border-r-transparent dark:border-accent dark:border-r-transparent"
></div>
</div>
<!-- Soft Color Spinner -->
<div>
<div
class="spinner h-5 w-5 animate-spin rounded-full border-2 border-primary/30 border-r-primary dark:border-accent/30 dark:border-r-accent"
></div>
<div
class="spinner h-7 w-7 animate-spin rounded-full border-[3px] border-primary/30 border-r-primary dark:border-accent/30 dark:border-r-accent"
></div>
<div
class="spinner h-10 w-10 animate-spin rounded-full border-4 border-primary/30 border-r-primary dark:border-accent/30 dark:border-r-accent"
></div>
<div
class="spinner h-12 w-12 animate-spin rounded-full border-4 border-primary/30 border-r-primary dark:border-accent/30 dark:border-r-accent"
></div>
<div
class="spinner h-16 w-16 animate-spin rounded-full border-4 border-primary/30 border-r-primary dark:border-accent/30 dark:border-r-accent"
></div>
</div>
<!-- Grow Spinner -->
<div>
<div class="spinner is-grow relative h-5 w-5">
<span
class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
></span>
<span
class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
></span>
</div>
<div class="spinner is-grow relative h-7 w-7">
<span
class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
></span>
<span
class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
></span>
</div>
<div class="spinner is-grow relative h-10 w-10">
<span
class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
></span>
<span
class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
></span>
</div>
<div class="spinner is-grow relative h-12 w-12">
<span
class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
></span>
<span
class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
></span>
</div>
<div class="spinner is-grow relative h-16 w-16">
<span
class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
></span>
<span
class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
></span>
</div>
</div>