<div className="ti-spinner" role="status">
<span className="sr-only">Loading...</span>
</div>

{Colorspinner.map((idx) =>(
     <div className={a&#768;ti-spinner text-&#36;{idx.color}a&#769;} role="status" key={Math.random()}>
     <span className="sr-only">Loading...</span>
     </div>
     ))}

<div className="ti-spinner !bg-black dark:!bg-light !animate-ping !border-transparent " role="status" aria-label="loading"><span className="sr-only">Loading...</span></div>

<div className="space-x-6 space-y-4 rtl:space-x-reverse">
<div className="ti-spinner !animate-ping !border-transparent  bg-primary" role="status" aria-label="loading">
<span className="sr-only">Loading...</span>
</div>
<div className="ti-spinner !animate-ping !border-transparent  bg-secondary" role="status" aria-label="loading">
<span className="sr-only">Loading...</span>
</div>
<div className="ti-spinner !animate-ping !border-transparent  bg-warning" role="status" aria-label="loading"> 
<span className="sr-only">Loading...</span></div>
<div className="ti-spinner !animate-ping !border-transparent  bg-danger" role="status" aria-label="loading">
<span className="sr-only">Loading...</span></div>
<div className="ti-spinner !animate-ping !border-transparent  bg-success" role="status" aria-label="loading">
<span className="sr-only">Loading...</span></div>
<div className="ti-spinner !animate-ping !border-transparent  bg-info" role="status" aria-label="loading">
<span className="sr-only">Loading...</span></div>
<div className="ti-spinner !animate-ping !border-transparent  bg-black/20 dark:!bg-light dark:animate-ping "  role="status" aria-label="loading">
<span className="sr-only">Loading...</span></div>
<div className="ti-spinner !animate-ping !border-transparent  bg-gray-400" role="status" aria-label="loading">
<span className="sr-only">Loading...</span>
</div>
</div>

<div className="flex justify-center mb-6">
<div className="ti-spinner" role="status"><span className="sr-only">Loading...</span>
</div></div>
<div className="flex items-center justify-between"><strong>Loading...</strong>
<div className="ti-spinner" role="status"><span className="sr-only">Loading...</span>
</div>
</div>

<div className="clearfix mb-6">
<div className="ti-spinner ltr:float-right rtl:float-left" role="status">
<span className="sr-only">Loading...</span>
</div></div><div className="clearfix">
<div className="ti-spinner ltr:float-left rtl:float-right" role="status"><span className="sr-only">Loading...</span>
</div>
</div>

<div className="text-center">
<div className="ti-spinner" role="status">
<span className="sr-only">Loading...</span>
</div>
</div>

   <div className="box-body ">
<div className="ti-spinner !w-[1rem] !h-[1rem] me-6" role="status"> <span className="sr-only">Loading...</span>
</div>
<div className="ti-spinner !w-[1rem] !h-[1rem] !bg-black dark:!bg-white !animate-ping !border-transparent me-6" role="status"> 
<span className="sr-only">Loading...</span>
</div>
<div className="ti-spinner me-6 w-12 h-12" role="status"> 
<span className="sr-only">Loading...</span></div>
<div className="ti-spinner !bg-black dark:!bg-white !animate-ping !border-transparent w-8 h-8" role="status">
 <span className="sr-only">Loading...</span>
 </div>
 </div>

<div className="ti-spinner m-[3rem]" role="status">
<span className="sr-only">Loading...</span>
</div>

{Buttonspinner.map((idx)=>(
    <button type="button" className={a&#768;ti-btn ti-btn-disabled ti-btn-&#36;{idx.color}a&#769;} disabled key={Math.random()}>
    <span className="ti-spinner text-white" role="status" aria-label="loading">
    <span className="sr-only">Loading...</span>
    </span>
    </button>
    <button type="button" className={a&#768;ti-btn ti-btn-disabled ti-btn-&#36;{idx.color}a&#769;} disabled><span className="ti-spinner text-white" role="status" aria-label="loading"></span><span>Loading...</span>
    </button>
    ))}