Modernize TailwindCSS HTML Admin Template

Default Spinner

Default Spinner - View Code

       
<div class="animate-spin inline-block size-6 border-[3px] border-current border-t-transparent text-primary rounded-full dark:text-primary" role="status" aria-label="loading">
   <span class="sr-only">Loading...</span>
</div>

A simple loading status.

Placement Flex

Placement Flex - View Code

       
<div class="flex justify-center">
   <div class="animate-spin inline-block size-8 border-[3px] border-current border-t-transparent text-primary rounded-full dark:text-primary" role="status" aria-label="loading">
      <span class="sr-only">Loading...</span>
   </div>
</div>

A simple spinner align itself at center position.

Color variants

Color variants - View Code

       
<div class="animate-spin inline-block size-8 border-[3px] border-current border-t-transparent text-gray-800 rounded-full dark:text-white" role="status" aria-label="loading">
   <span class="sr-only">Loading...</span>
</div>
<div class="animate-spin inline-block size-8 border-[3px] border-current border-t-transparent text-gray-400 rounded-full" role="status" aria-label="loading">
   <span class="sr-only">Loading...</span>
</div>
<div class="animate-spin inline-block size-8 border-[3px] border-current border-t-transparent text-error rounded-full" role="status" aria-label="loading">
   <span class="sr-only">Loading...</span>
</div>
<div class="animate-spin inline-block size-8 border-[3px] border-current border-t-transparent text-warning rounded-full" role="status" aria-label="loading">
   <span class="sr-only">Loading...</span>
</div>
<div class="animate-spin inline-block size-8 border-[3px] border-current border-t-transparent text-success rounded-full" role="status" aria-label="loading">
   <span class="sr-only">Loading...</span>
</div>
<div class="animate-spin inline-block size-8 border-[3px] border-current border-t-transparent text-primary rounded-full dark:text-blue-500" role="status" aria-label="loading">
   <span class="sr-only">Loading...</span>
</div>
<div class="animate-spin inline-block size-8 border-[3px] border-current border-t-transparent text-indigo-600 rounded-full" role="status" aria-label="loading">
   <span class="sr-only">Loading...</span>
</div>
<div class="animate-spin inline-block size-8 border-[3px] border-current border-t-transparent text-purple-600 rounded-full" role="status" aria-label="loading">
   <span class="sr-only">Loading...</span>
</div>
<div class="animate-spin inline-block size-8 border-[3px] border-current border-t-transparent text-pink-600 rounded-full" role="status" aria-label="loading">
   <span class="sr-only">Loading...</span>
</div>
<div class="animate-spin inline-block size-8 border-[3px] border-current border-t-transparent text-orange-600 rounded-full" role="status" aria-label="loading">
   <span class="sr-only">Loading...</span>
</div>

Predefined spinner color styles.

Customized description

Customized description - View Code

       
<div class="relative">
   <div class="bg-lightprimary border border-lightprimary rounded-lg p-4">
      <div class="flex">
         <div class="flex-shrink-0">
            <i class="ti ti-alert-triangle text-lg leading-tight font-medium text-primary"></i>
         </div>
         <div class="ms-3">
            <h3 class="text-sm text-primaryemphasis font-medium">
               Attention needed
            </h3>
            <div class="text-sm text-primaryemphasis mt-2">
               <span class="font-semibold">Holy guacamole!</span> You should check in on some of those fields below.
            </div>
         </div>
      </div>
   </div>
   <div class="absolute top-0 start-0 size-full bg-white/[.5] rounded-lg dark:bg-gray-800/[.4]"></div>
   <div class="absolute top-1/2 start-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <div class="animate-spin inline-block size-8 border-[3px] border-current border-t-transparent text-primary rounded-full dark:text-primary" role="status" aria-label="loading">
         <span class="sr-only">Loading...</span>
      </div>
   </div>
</div>

Predefined spinner color styles.

Attention needed

Holy guacamole! You should check in on some of those fields below.

Text-align

Text-align - View Code

       
<div class="text-center">
   <div class="animate-spin inline-block size-8 border-[3px] border-current border-t-transparent text-primary rounded-full dark:text-primary" role="status" aria-label="loading">
      <span class="sr-only">Loading...</span>
   </div>
</div>

Use text-utlity classes to align spinner.

Spinner with Buttons

Spinner with Buttons - View Code

       
<button type="button" class="flex justify-center items-center size-[40px] text-sm font-semibold rounded-lg border border-transparent bg-primary text-white hover:bg-primaryemphasis disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<span class="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading">
<span class="sr-only">Loading...</span>
</span>
</button>
<button type="button" class="btn-md inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-primary text-white hover:bg-primaryemphasis dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<span class="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading"></span>
Loading
</button>

Different sizes of spinner.

Sizes

Sizes - View Code

       
<div class="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-primary rounded-full dark:text-primary" role="status" aria-label="loading">
   <span class="sr-only">Loading...</span>
</div>
<div class="animate-spin inline-block size-6 border-[3px] border-current border-t-transparent text-primary rounded-full dark:text-primary" role="status" aria-label="loading">
   <span class="sr-only">Loading...</span>
</div>
<div class="animate-spin inline-block size-8 border-[3px] border-current border-t-transparent text-primary rounded-full dark:text-primary" role="status" aria-label="loading">
   <span class="sr-only">Loading...</span>
</div>

Different sizes of spinner.

Inside a card

Inside a card - View Code

       
<div class="min-h-40 flex flex-col bg-white border  rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
   <div class="flex flex-auto flex-col justify-center items-center p-4 md:p-5">
      <div class="flex justify-center">
         <div class="animate-spin inline-block size-6 border-[3px] border-current border-t-transparent text-primary rounded-full dark:text-primary" role="status" aria-label="loading">
            <span class="sr-only">Loading...</span>
         </div>
      </div>
   </div>
</div>

Spin in a card.