<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="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>
                
                                                        

       
<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>
                
                                                        

       
<div class="relative">
   <div class="bg-lightprimary border border-lightprimary rounded-md 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-md 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>
                
                                                        

       
<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>
                
                                                        

       
<button type="button" class="flex justify-center items-center size-[40px] text-sm font-semibold rounded-md 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-md 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>
                
                                                        

       
<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>
                
                                                        

       
<div class="min-h-40 flex flex-col bg-white border  rounded-md 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>