Chat List

Show All

  • A
  • B
  • D
  • J
  • O
Chat with Khelesh

Online

  • View profile
  • Add to btn-close friends
  • Add to group
  • Block
Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Notications

Show All

  • SEVER STATUS
  • KK
  • SOCIAL
  • RU
  • SEVER STATUS
  • AU
  • MO
Notes

Show All

Create Workout Plan Now

Gymove Fitness Admin Dashboard © 2023 All Rights Reserved

Made with by DexignZone

  1. Spinners

  2. Home
  3. Spinners

Spinners.

Make use of Tailwind's unique Spinners styles to provide visual feedback for ongoing processes, ensuring users are aware of background activities.

Spinners

Default Spinner

														
<div class="spinner-border" role="status">
	<span class="spinner size-8 animate-spin rounded-full border-2 border-slate-500 border-r-transparent inline-block"></span>
</div>

Growing Spinner

														
<div class="relative size-7">
	<span class="absolute inline-block size-full rounded-full bg-slate-500 opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
	<span class="absolute inline-block size-full rounded-full bg-slate-500 opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
</div>

Custom Spinners

														
<div class="inline-block relative size-8 mr-4">
	<div class="absolute size-8 rounded-full animate-[spin_1.5s_cubic-bezier(.7,.1,.3,.9)_infinite] border-transparent border-t-primary border-6 [animation-delay:-0.1s] opacity-80"></div>
	<div class="absolute size-8 rounded-full animate-[spin_1.5s_cubic-bezier(.7,.1,.3,.9)_infinite] border-transparent border-t-primary border-6 [animation-delay:-0.2s] opacity-60"></div>
	<div class="absolute size-8 rounded-full animate-[spin_1.5s_cubic-bezier(.7,.1,.3,.9)_infinite] border-transparent border-t-primary border-6 [animation-delay:-0.3s] opacity-40"></div>
	<div class="absolute size-8 rounded-full animate-[spin_1.5s_cubic-bezier(.7,.1,.3,.9)_infinite] border-transparent border-t-primary border-6 [animation-delay:-0.4s] opacity-20"></div>
	<div class="absolute size-8 rounded-full animate-[spin_1.5s_cubic-bezier(.7,.1,.3,.9)_infinite] border-transparent border-t-primary border-6"></div>
</div>
<div class="spinner relative size-8 rounded-full inline-block">
	<div class="absolute border-4 border-primary border-l-transparent border-b-0 size-full rounded-full animate-spin [animation-direction:reverse]"></div>
	<div class="absolute border-4 border-primary border-r-0 border-t-transparent size-5 rounded-full top-[calc(50%-10px)] left-[calc(50%-10px)] animate-spin"></div>
</div>

Colorfull Spinners

														
<div class="spinner size-8 animate-spin rounded-full border-2 border-primary border-r-transparent inline-block" role="status">
	<span class="visually-hidden"></span>
</div>
<div class="spinner size-8 animate-spin rounded-full border-2 border-secondary border-r-transparent inline-block" role="status">
	<span class="visually-hidden"></span>
</div>
<div class="spinner size-8 animate-spin rounded-full border-2 border-success border-r-transparent inline-block" role="status">
	<span class="visually-hidden"></span>
</div>
<div class="spinner size-8 animate-spin rounded-full border-2 border-danger border-r-transparent inline-block" role="status">
	<span class="visually-hidden"></span>
</div>
<div class="spinner size-8 animate-spin rounded-full border-2 border-warning border-r-transparent inline-block" role="status">
	<span class="visually-hidden"></span>
</div>
<div class="spinner size-8 animate-spin rounded-full border-2 border-info border-r-transparent inline-block" role="status">
	<span class="visually-hidden"></span>
</div>
<div class="spinner size-8 animate-spin rounded-full border-2 border-light border-r-transparent inline-block" role="status">
	<span class="visually-hidden"></span>
</div>
<div class="spinner size-8 animate-spin rounded-full border-2 border-secondary border-r-transparent inline-block" role="status">
	<span class="visually-hidden"></span>
</div>

Colorfull Growing Spinners

														
<div class="relative size-7 inline-block mr-2">
	<span class="absolute inline-block size-full rounded-full bg-primary opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
	<span class="absolute inline-block size-full rounded-full bg-primary opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
</div>
<div class="relative size-7 inline-block mr-2">
	<span class="absolute inline-block size-full rounded-full bg-secondary opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
	<span class="absolute inline-block size-full rounded-full bg-secondary opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
</div>
<div class="relative size-7 inline-block mr-2">
	<span class="absolute inline-block size-full rounded-full bg-success opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
	<span class="absolute inline-block size-full rounded-full bg-success opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
</div>
<div class="relative size-7 inline-block mr-2">
	<span class="absolute inline-block size-full rounded-full bg-danger opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
	<span class="absolute inline-block size-full rounded-full bg-danger opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
</div>
<div class="relative size-7 inline-block mr-2">
	<span class="absolute inline-block size-full rounded-full bg-warning opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
	<span class="absolute inline-block size-full rounded-full bg-warning opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
</div>
<div class="relative size-7 inline-block mr-2">
	<span class="absolute inline-block size-full rounded-full bg-info opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
	<span class="absolute inline-block size-full rounded-full bg-info opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
</div>
<div class="relative size-7 inline-block mr-2">
	<span class="absolute inline-block size-full rounded-full bg-light opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
	<span class="absolute inline-block size-full rounded-full bg-light opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
</div>
<div class="relative size-7 inline-block mr-2">
	<span class="absolute inline-block size-full rounded-full bg-secondary opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
	<span class="absolute inline-block size-full rounded-full bg-secondary opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
</div>

Alighment Flex

Loading... 
														
<div class="flex justify-center">
	<div class="spinner size-8 animate-spin rounded-full border-2 border-slate-500 border-r-transparent inline-block" role="status">
	<span class="visually-hidden"></span>
	</div>
</div>
<div class="flex items-center">
	<strong role="status">Loading...</strong>
	<div class="spinner size-8 animate-spin rounded-full border-2 border-slate-500 border-r-transparent inline-block ml-auto"></div>
</div>

Spinner Sizes

														
<div class="spinner size-4 animate-spin rounded-full border-2 border-slate-500 border-r-transparent inline-block mr-6" role="status">
	<span class="visually-hidden"></span>
</div>
<div class="relative size-4 inline-block mr-2">
	<span class="absolute inline-block size-full rounded-full bg-slate-500 opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
	<span class="absolute inline-block size-full rounded-full bg-slate-500 opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
</div>
<div class="spinner size-12 animate-spin rounded-full border-2 border-slate-500 border-r-transparent inline-block mr-6" style="width: 3rem; height: 3rem;" role="status">
	<span class="visually-hidden"></span>
</div>
<div class="relative size-12 inline-block mr-2">
	<span class="absolute inline-block size-full rounded-full bg-slate-500 opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
	<span class="absolute inline-block size-full rounded-full bg-slate-500 opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
</div>

Buttons Spinner

														
<button class="btn btn-primary mb-2 me-2 opacity-65 pointer-events-none">
	<span class="spinner size-4 animate-spin rounded-full border-2 border-white border-r-transparent inline-block"></span>
	<span class="visually-hidden" role="status"></span>
</button>
<button class="btn btn-primary mb-2 me-2 opacity-65 pointer-events-none">
	<span class="spinner size-4 animate-spin rounded-full border-2 border-white border-r-transparent inline-block"></span>
	<span role="status" class="ms-1">Loading...</span>
</button>
<button class="btn btn-primary mb-2 me-2 opacity-65 pointer-events-none">
	<div class="relative size-4 inline-flex">
		<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
		<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
	</div>
	<span class="visually-hidden" role="status"></span>
</button>
<button class="btn btn-primary mb-2 me-2 opacity-65 pointer-events-none">
	<div class="relative size-4 inline-flex">
		<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
		<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
	</div>
	<span role="status" class="ms-1">Loading...</span>
</button>
<button class="btn bg-secondary text-white mb-2 me-2 opacity-65 pointer-events-none">
	<div class="relative size-4 inline-flex">
		<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
		<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
	</div>
	<span role="status" class="ms-1">Loading...</span>
</button>
<button class="btn bg-success text-white mb-2 me-2 opacity-65 pointer-events-none">
	<div class="relative size-4 inline-flex">
		<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
		<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
	</div>
	<span role="status" class="ms-1">Loading...</span>
</button>
<button class="btn bg-danger text-white mb-2 me-2 opacity-65 pointer-events-none">
	<div class="relative size-4 inline-flex">
		<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
		<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
	</div>
	<span role="status" class="ms-1">Loading...</span>
</button>
<button class="btn bg-warning text-white mb-2 me-2 opacity-65 pointer-events-none">
	<div class="relative size-4 inline-flex">
		<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
		<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
	</div>
	<span role="status" class="ms-1">Loading...</span>
</button>
<button class="btn bg-info text-white mb-2 me-2 opacity-65 pointer-events-none">
	<div class="relative size-4 inline-flex">
		<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
		<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
	</div>
	<span role="status" class="ms-1">Loading...</span>
</button>
<button class="btn bg-dark text-white mb-2 me-2 opacity-65 pointer-events-none">
	<div class="relative size-4 inline-flex">
		<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
		<span class="absolute inline-block size-full rounded-full bg-white opacity-75 first:[animation-delay:-.75s] animate-spinnergrow"></span>
	</div>
	<span role="status" class="ms-1">Loading...</span>
</button>
Quick Actions
    Help