tailgrids
Version:
Handcrafted Library of Tailwind CSS UI Components & Blocks for HTML, React and Vue.
175 lines (170 loc) • 10.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spinner | TailGrids</title>
<link
rel="shortcut icon"
href="../../assets/images/favicon.svg"
type="image/x-icon"
/>
<link rel="stylesheet" href="../../assets/css/tailwind.css" />
</head>
<body>
<!-- ====== Spinner Start -->
<section class="bg-white py-20 dark:bg-dark">
<div class="container">
<div class="flex flex-wrap items-center gap-4">
<div>
<svg
width="20"
height="21"
viewBox="0 0 20 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="animate-spin"
>
<circle
cx="10"
cy="10.5"
r="8.5"
stroke="#E5E7EB"
stroke-width="3"
/>
<mask id="path-2-inside-1_2527_20905" fill="white">
<path
d="M18.5172 10.5C19.3361 10.5 20.0113 9.83252 19.8903 9.02257C19.6474 7.39692 19.0062 5.84812 18.014 4.51868C16.7246 2.79109 14.9114 1.52642 12.8448 0.913166C10.7781 0.299916 8.5686 0.370921 6.54558 1.1156C4.9888 1.68865 3.60659 2.63704 2.51635 3.86711C1.97316 4.47997 2.17495 5.40767 2.86134 5.85436C3.54773 6.30104 4.45707 6.09214 5.03749 5.51442C5.75143 4.8038 6.61392 4.2506 7.57003 3.89866C8.9931 3.37482 10.5473 3.32488 12.0011 3.75626C13.4549 4.18764 14.7303 5.07726 15.6373 6.29251C16.2467 7.109 16.6679 8.0431 16.8787 9.02811C17.05 9.82892 17.6983 10.5 18.5172 10.5Z"
/>
</mask>
<path
d="M18.5172 10.5C19.3361 10.5 20.0113 9.83252 19.8903 9.02257C19.6474 7.39692 19.0062 5.84812 18.014 4.51868C16.7246 2.79109 14.9114 1.52642 12.8448 0.913166C10.7781 0.299916 8.5686 0.370921 6.54558 1.1156C4.9888 1.68865 3.60659 2.63704 2.51635 3.86711C1.97316 4.47997 2.17495 5.40767 2.86134 5.85436C3.54773 6.30104 4.45707 6.09214 5.03749 5.51442C5.75143 4.8038 6.61392 4.2506 7.57003 3.89866C8.9931 3.37482 10.5473 3.32488 12.0011 3.75626C13.4549 4.18764 14.7303 5.07726 15.6373 6.29251C16.2467 7.109 16.6679 8.0431 16.8787 9.02811C17.05 9.82892 17.6983 10.5 18.5172 10.5Z"
stroke="#3758F9"
stroke-width="8"
mask="url(#path-2-inside-1_2527_20905)"
/>
</svg>
</div>
<div>
<svg
width="28"
height="29"
viewBox="0 0 28 29"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="animate-spin"
>
<circle
cx="14"
cy="14.5"
r="12"
stroke="#E5E7EB"
stroke-width="4"
/>
<mask id="path-2-inside-1_2527_20979" fill="white">
<path
d="M26.0032 14.5C27.106 14.5 28.0146 13.6015 27.8578 12.5099C27.5269 10.2054 26.6246 8.0087 25.2196 6.12615C23.4144 3.70752 20.876 1.93698 17.9827 1.07843C15.0893 0.219883 11.996 0.31929 9.16381 1.36184C6.95934 2.17331 5.00491 3.52235 3.47057 5.27332C2.74376 6.10275 3.01525 7.35142 3.93957 7.95295C4.86389 8.55447 6.08878 8.27457 6.86161 7.48784C7.89234 6.43857 9.14776 5.62338 10.5434 5.10965C12.5677 4.3645 14.7786 4.29345 16.8466 4.90709C18.9145 5.52073 20.7288 6.7862 22.0191 8.51488C22.9086 9.70671 23.5162 11.0747 23.8078 12.5164C24.0264 13.5973 24.9004 14.5 26.0032 14.5Z"
/>
</mask>
<path
d="M26.0032 14.5C27.106 14.5 28.0146 13.6015 27.8578 12.5099C27.5269 10.2054 26.6246 8.0087 25.2196 6.12615C23.4144 3.70752 20.876 1.93698 17.9827 1.07843C15.0893 0.219883 11.996 0.31929 9.16381 1.36184C6.95934 2.17331 5.00491 3.52235 3.47057 5.27332C2.74376 6.10275 3.01525 7.35142 3.93957 7.95295C4.86389 8.55447 6.08878 8.27457 6.86161 7.48784C7.89234 6.43857 9.14776 5.62338 10.5434 5.10965C12.5677 4.3645 14.7786 4.29345 16.8466 4.90709C18.9145 5.52073 20.7288 6.7862 22.0191 8.51488C22.9086 9.70671 23.5162 11.0747 23.8078 12.5164C24.0264 13.5973 24.9004 14.5 26.0032 14.5Z"
stroke="#3758F9"
stroke-width="8"
mask="url(#path-2-inside-1_2527_20979)"
/>
</svg>
</div>
<div>
<svg
width="36"
height="37"
viewBox="0 0 36 37"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="animate-spin"
>
<circle
cx="18"
cy="18.5"
r="16"
stroke="#E5E7EB"
stroke-width="4"
/>
<mask id="path-2-inside-1_2527_20906" fill="white">
<path
d="M34.0036 18.5C35.1062 18.5 36.0115 17.6034 35.8894 16.5077C35.5365 13.3389 34.3464 10.3078 32.4252 7.73362C30.1042 4.62395 26.8405 2.34755 23.1206 1.2437C19.4006 0.139849 15.4235 0.267659 11.782 1.60808C8.76764 2.71769 6.11686 4.60908 4.09274 7.07246C3.39277 7.92432 3.66248 9.16953 4.58658 9.77092C5.51068 10.3723 6.73753 10.099 7.46408 9.26966C8.99937 7.51722 10.9552 6.16706 13.1613 5.35499C15.995 4.3119 19.0899 4.21244 21.9847 5.07144C24.8796 5.93043 27.4193 7.70189 29.2254 10.1218C30.6315 12.0057 31.5343 14.2041 31.8653 16.5104C32.0219 17.6017 32.9011 18.5 34.0036 18.5Z"
/>
</mask>
<path
d="M34.0036 18.5C35.1062 18.5 36.0115 17.6034 35.8894 16.5077C35.5365 13.3389 34.3464 10.3078 32.4252 7.73362C30.1042 4.62395 26.8405 2.34755 23.1206 1.2437C19.4006 0.139849 15.4235 0.267659 11.782 1.60808C8.76764 2.71769 6.11686 4.60908 4.09274 7.07246C3.39277 7.92432 3.66248 9.16953 4.58658 9.77092C5.51068 10.3723 6.73753 10.099 7.46408 9.26966C8.99937 7.51722 10.9552 6.16706 13.1613 5.35499C15.995 4.3119 19.0899 4.21244 21.9847 5.07144C24.8796 5.93043 27.4193 7.70189 29.2254 10.1218C30.6315 12.0057 31.5343 14.2041 31.8653 16.5104C32.0219 17.6017 32.9011 18.5 34.0036 18.5Z"
stroke="#3758F9"
stroke-width="8"
mask="url(#path-2-inside-1_2527_20906)"
/>
</svg>
</div>
<div>
<svg
width="40"
height="41"
viewBox="0 0 40 41"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="animate-spin"
>
<circle
cx="20"
cy="20.5"
r="18"
stroke="#E5E7EB"
stroke-width="4"
/>
<mask id="path-2-inside-1_2527_20909" fill="white">
<path
d="M38.0028 20.5C39.1058 20.5 40.0103 19.6036 39.9004 18.5061C39.5397 14.9057 38.2071 11.457 36.0279 8.53735C33.4491 5.08217 29.8228 2.55283 25.6895 1.32633C21.5562 0.0998324 17.1372 0.241843 13.0912 1.7312C9.67218 2.98973 6.67421 5.15341 4.40811 7.97427C3.71731 8.83418 3.9865 10.0789 4.91099 10.6805C5.83548 11.2821 7.06377 11.0105 7.77579 10.1681C9.55682 8.06082 11.8606 6.44059 14.471 5.47969C17.709 4.28779 21.2454 4.17414 24.5532 5.15568C27.861 6.13723 30.7631 8.16141 32.8269 10.9265C34.4907 13.1557 35.5378 15.7703 35.8812 18.5079C36.0185 19.6024 36.8998 20.5 38.0028 20.5Z"
/>
</mask>
<path
d="M38.0028 20.5C39.1058 20.5 40.0103 19.6036 39.9004 18.5061C39.5397 14.9057 38.2071 11.457 36.0279 8.53735C33.4491 5.08217 29.8228 2.55283 25.6895 1.32633C21.5562 0.0998324 17.1372 0.241843 13.0912 1.7312C9.67218 2.98973 6.67421 5.15341 4.40811 7.97427C3.71731 8.83418 3.9865 10.0789 4.91099 10.6805C5.83548 11.2821 7.06377 11.0105 7.77579 10.1681C9.55682 8.06082 11.8606 6.44059 14.471 5.47969C17.709 4.28779 21.2454 4.17414 24.5532 5.15568C27.861 6.13723 30.7631 8.16141 32.8269 10.9265C34.4907 13.1557 35.5378 15.7703 35.8812 18.5079C36.0185 19.6024 36.8998 20.5 38.0028 20.5Z"
stroke="#3758F9"
stroke-width="8"
mask="url(#path-2-inside-1_2527_20909)"
/>
</svg>
</div>
<div>
<svg
width="48"
height="49"
viewBox="0 0 48 49"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="animate-spin"
>
<circle
cx="24"
cy="24.5"
r="22"
stroke="#E5E7EB"
stroke-width="4"
/>
<mask id="path-2-inside-1_2527_20912" fill="white">
<path
d="M46.0051 24.5C47.1068 24.5 48.0086 23.6053 47.9172 22.5073C47.5452 18.0426 45.9291 13.7565 43.2335 10.1448C40.139 5.9986 35.7874 2.9634 30.8274 1.4916C25.8674 0.019799 20.5646 0.190212 15.7094 1.97744C11.4802 3.53423 7.78776 6.24518 5.04079 9.78438C4.36525 10.6547 4.63305 11.8965 5.55649 12.4975C6.47993 13.0984 7.70826 12.8295 8.39813 11.9705C10.6656 9.14692 13.6659 6.98122 17.0877 5.72166C21.1357 4.23155 25.557 4.08947 29.6924 5.31659C33.8278 6.54371 37.456 9.07434 40.0361 12.5313C42.217 15.4533 43.5504 18.905 43.9108 22.5083C44.0205 23.6046 44.9033 24.5 46.0051 24.5Z"
/>
</mask>
<path
d="M46.0051 24.5C47.1068 24.5 48.0086 23.6053 47.9172 22.5073C47.5452 18.0426 45.9291 13.7565 43.2335 10.1448C40.139 5.9986 35.7874 2.9634 30.8274 1.4916C25.8674 0.019799 20.5646 0.190212 15.7094 1.97744C11.4802 3.53423 7.78776 6.24518 5.04079 9.78438C4.36525 10.6547 4.63305 11.8965 5.55649 12.4975C6.47993 13.0984 7.70826 12.8295 8.39813 11.9705C10.6656 9.14692 13.6659 6.98122 17.0877 5.72166C21.1357 4.23155 25.557 4.08947 29.6924 5.31659C33.8278 6.54371 37.456 9.07434 40.0361 12.5313C42.217 15.4533 43.5504 18.905 43.9108 22.5083C44.0205 23.6046 44.9033 24.5 46.0051 24.5Z"
stroke="#3758F9"
stroke-width="8"
mask="url(#path-2-inside-1_2527_20912)"
/>
</svg>
</div>
</div>
</div>
</section>
<!-- ====== Spinner End -->
</body>
</html>