Border Spinner
Use the border spinners for a lightweight loading indicator.
<div class="inline-block h-8 w-8 animate-spin rounded-full border-2 border-current border-r-transparent" role="status">
<span class="sr-only">Loading...</span>
</div>
Colors
Change the colors of the spinner element using the fill and color utility classes.
<div
class="inline-block h-8 w-8 animate-spin rounded-full border-2 border-current border-r-transparent text-blue-500" role="status">
<span class="sr-only">Loading...</span>
</div>
<div
class="inline-block h-8 w-8 animate-spin rounded-full border-2 border-current border-r-transparent text-teal-500" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="inline-block h-8 w-8 animate-spin rounded-full border-2 border-current border-r-transparent text-red-500" role="status">
<span class="sr-only">Loading...</span>
</div>
<div
class="inline-block h-8 w-8 animate-spin rounded-full border-2 border-current border-r-transparent text-amber-500" role="status">
<span class="sr-only">Loading...</span>
</div>
<div
class="cyan inline-block h-8 w-8 animate-spin rounded-full border-2 border-current border-r-transparent text-muted" role="status">
<span class="sr-only">Loading...</span>
</div>
Size
Spinners can be resized using width and height utility classes.
<div class="inline-block h-4 w-4 animate-spin rounded-full border border-current border-r-transparent" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="inline-block h-6 w-6 animate-spin rounded-full border-[1.5px] border-current border-r-transparent" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="inline-block h-8 w-8 animate-spin rounded-full border-2 border-current border-r-transparent" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="inline-block h-10 w-10 animate-spin rounded-full border-2 border-current border-r-transparent" role="status">
<span class="sr-only">Loading...</span>
</div>
Buttons
Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
<button type="button" class="btn bg-blue-600/90 text-md text-white hover:bg-blue-600">
<span class="mr-2 inline-block h-4 w-4 animate-spin rounded-full border border-current border-r-transparent" role="status"></span>
Loading...
</button>