Home
khalidrootdevs
Matha ghurainna Ball

Matha ghurainna Ball

Tailwind Spinner

This tailwind example is contributed by khalidrootdevs, on 28-Nov-2023. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are loading, loader

Spinner / Loading

Author khalidrootdevs

5.1k

8

Fork Fullscreen

<div class="bg-white dark:bg-gray-800 flex justify-center items-center w-screen h-screen p-5">
	<svg class='animate-spin' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
		version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 455 455" style="enable-background:new 0 0 455 455;"
		xml:space="preserve" width="512" height="512">
		<g>
			<path style="fill:#185F8D;"
				d="M443.435,299.28c7.5-22.57,11.565-46.7,11.565-71.78c0-25.75-4.285-50.5-12.165-73.58l-45.58-77.865   c-32.37-36.26-76.165-62.08-125.745-71.79h-88.02c-49.58,9.71-93.385,35.53-125.755,71.79l-45.57,77.865   C4.285,177,0,201.75,0,227.5c0,25.08,4.065,49.22,11.565,71.79l43.685,76.83c32.59,37.74,77.38,64.655,128.24,74.615h88.02   c50.86-9.97,95.64-36.875,128.23-74.615L443.435,299.28z" />
			<path style="fill:#98D9D5;"
				d="M400.41,227.5L314.323,76.65L271.51,4.265C257.27,1.465,242.55,0,227.49,0   c-15.05,0-29.77,1.465-44,4.265L140.677,76.65L54.59,227.5c0,0-43.02,71.79-43.03,71.79c9.48,28.54,24.46,54.57,43.69,76.83   l85.53,0.885h173.44l85.52-0.885c19.24-22.26,34.215-48.3,43.695-76.84L400.41,227.5z" />
			<path style="fill:#C1E8E6;"
				d="M397.25,76.06l-82.927,0.59l-43.883,75.84h-85.88l-43.883-75.84l-82.942-0.595   c-20.01,22.41-35.65,48.815-45.57,77.865L54.59,227.5h86.19l43.78,75.01l-43.78,74.495l42.71,73.725c14.23,2.81,28.95,4.27,44,4.27   c15.06,0,29.78-1.465,44.02-4.265l42.71-73.73l-43.78-74.495l43.78-75.01h86.19c0,0,42.42-73.58,42.43-73.58   C432.91,124.87,417.27,98.46,397.25,76.06z" />
			<polygon style="fill:#185F8D;"
				points="270.44,152.49 184.56,152.49 140.78,227.5 184.56,302.51 270.44,302.51 314.22,227.5  " />
			<circle style="fill:#6DA8D6;" cx="342.16" cy="286.285" r="7.5" />
			<circle style="fill:#6DA8D6;" cx="372.16" cy="316.285" r="7.5" />
			<circle style="fill:#6DA8D6;" cx="82.84" cy="138.715" r="7.5" />
		</g>
</div>

Related Examples

Tailwind Spinner(Loader)
simple and precise

Author:
Tamani Phiri

1 year ago

8.3k
Loding spinner with image inside

Author:
JaxStone

2 years ago

14.8k
Spinner Design
Loader Design spinning loading dark mode supported and responsive

Author:
Shariar Hasan

1 year ago

4.4k
Ovel shaped loading spinner

Author:
Freja Jensen

2 years ago

16.2k
Animated Title
App Logo or Main Title

Author:
khalidrootdevs

1 year ago

6.2k
3D Box

Author:
Samuel Abera

11 months ago

4.4k
Tailwind spinner
loading spinner component

Author:
Arya

2 years ago

37.5k
Loading animation using animate-ping

Author:
JaxStone

2 years ago

16.4k
Steps -4

Author:
farisubuntu

7 months ago

1.4k
animate-spin spinner

Author:
Piet Vriend

2 years ago

9.6k
Spinner rings closed

Author:
Samuel Dawson

2 years ago

9.8k
Loading Overlay
Add loading overlay to your divs

Author:
Prajwal Hallale

2 years ago

23.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1