Components
Tailwind CSS Loading Spinners
Tailwind Spinner loader are animated SVG files that work as a loading indicator in projects while fetching the data from the server. It shows the data being loaded or processed. Spinner can easily be implemented using utility classes offered by Tailwind CSS and offers customisation options like colors, sizes and styles. It helps in letting users know that the page is not hanging and it is being processed.
Default Tailwind Spinner
Loading animation can be shown with an SVG element by using “animate-spin” animation class as shown in the following Tailwind CSS Spinner example.
Loading...
<div role='status' aria-label='loading'>
<svg class='w-6 h-6 stroke-indigo-600 animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<g clip-path='url(#clip0_9023_61563)'>
<path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' class='my-path'></path>
</g>
<defs>
<clipPath id='clip0_9023_61563'>
<rect width='24' height='24' fill='white'></rect>
</clipPath>
</defs>
</svg>
<span class='sr-only'>Loading...</span>
</div>Color variants
Use below tailwind loading spinner by using fill and color utility classes from tailwind css you can easily change the colors of the spinner element.
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
<div class='space-x-6'>
<div class='inline-block ' role='status' aria-label='loading'>
<svg class='w-6 h-6 stroke-indigo-600 animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<g clip-path='url(#clip0_9023_61563)'>
<path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' class='my-path'></path>
</g>
<defs>
<clipPath id='clip0_9023_61563'>
<rect width='24' height='24' fill='white'></rect>
</clipPath>
</defs>
</svg>
<span class='sr-only'>Loading...</span>
</div>
<div class='inline-block' role='status' aria-label='loading'>
<svg class='w-6 h-6 stroke-gray-900 animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<g clip-path='url(#clip0_9023_61563)'>
<path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' class='my-path'></path>
</g>
<defs>
<clipPath id='clip0_9023_61563'>
<rect width='24' height='24' fill='white'></rect>
</clipPath>
</defs>
</svg>
<span class='sr-only'>Loading...</span>
</div>
<div class='inline-block' role='status' aria-label='loading'>
<svg class='w-6 h-6 stroke-gray-400 animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<g clip-path='url(#clip0_9023_61563)'>
<path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' class='my-path'></path>
</g>
<defs>
<clipPath id='clip0_9023_61563'>
<rect width='24' height='24' fill='white'></rect>
</clipPath>
</defs>
</svg>
<span class='sr-only'>Loading...</span>
</div>
<div class='inline-block' role='status' aria-label='loading'>
<svg class='w-6 h-6 stroke-red-600 animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<g clip-path='url(#clip0_9023_61563)'>
<path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' class='my-path'></path>
</g>
<defs>
<clipPath id='clip0_9023_61563'>
<rect width='24' height='24' fill='white'></rect>
</clipPath>
</defs>
</svg>
<span class='sr-only'>Loading...</span>
</div>
<div class='inline-block' role='status' aria-label='loading'>
<svg class='w-6 h-6 stroke-yellow-400 animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<g clip-path='url(#clip0_9023_61563)'>
<path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' class='my-path'></path>
</g>
<defs>
<clipPath id='clip0_9023_61563'>
<rect width='24' height='24' fill='white'></rect>
</clipPath>
</defs>
</svg>
<span class='sr-only'>Loading...</span>
</div>
<div class='inline-block' role='status' aria-label='loading'>
<svg class='w-6 h-6 stroke-green-600 animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<g clip-path='url(#clip0_9023_61563)'>
<path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' class='my-path'></path>
</g>
<defs>
<clipPath id='clip0_9023_61563'>
<rect width='24' height='24' fill='white'></rect>
</clipPath>
</defs>
</svg>
<span class='sr-only'>Loading...</span>
</div>
<div class='inline-block' role='status' aria-label='loading'>
<svg class='w-6 h-6 stroke-blue-600 animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<g clip-path='url(#clip0_9023_61563)'>
<path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' class='my-path'></path>
</g>
<defs>
<clipPath id='clip0_9023_61563'>
<rect width='24' height='24' fill='white'></rect>
</clipPath>
</defs>
</svg>
<span class='sr-only'>Loading...</span>
</div>
<div class='inline-block' role='status' aria-label='loading'>
<svg class='w-6 h-6 stroke-purple-600 animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<g clip-path='url(#clip0_9023_61563)'>
<path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' class='my-path'></path>
</g>
<defs>
<clipPath id='clip0_9023_61563'>
<rect width='24' height='24' fill='white'></rect>
</clipPath>
</defs>
</svg>
<span class='sr-only'>Loading...</span>
</div>
<div class='inline-block' role='status' aria-label='loading'>
<svg class='w-6 h-6 stroke-orange-400 animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<g clip-path='url(#clip0_9023_61563)'>
<path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' class='my-path'></path>
</g>
<defs>
<clipPath id='clip0_9023_61563'>
<rect width='24' height='24' fill='white'></rect>
</clipPath>
</defs>
</svg>
<span class='sr-only'>Loading...</span>
</div>
<div class='inline-block' role='status' aria-label='loading'>
<svg class='w-6 h-6 stroke-pink-400 animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<g clip-path='url(#clip0_9023_61563)'>
<path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' class='my-path'></path>
</g>
<defs>
<clipPath id='clip0_9023_61563'>
<rect width='24' height='24' fill='white'></rect>
</clipPath>
</defs>
</svg>
<span class='sr-only'>Loading...</span>
</div>
</div>Sizes
h-{h} and w-{w} utility classes from
tailwind css let you change and
adjust size of the tailwind loader.
Loading...
Loading...
Loading...
Loading...
<div class='flex items-center space-x-6'>
<div role='status' aria-label='loading'>
<svg class='w-4 h-4 stroke-indigo-600 animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<g clip-path='url(#clip0_9023_61563)'>
<path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' class='my-path'></path>
</g>
<defs>
<clipPath id='clip0_9023_61563'>
<rect width='24' height='24' fill='white'></rect>
</clipPath>
</defs>
</svg>
<span class='sr-only'>Loading...</span>
</div>
<div role='status' aria-label='loading'>
<svg class='w-6 h-6 stroke-indigo-600 animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<g clip-path='url(#clip0_9023_61563_1)'>
<path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' class='my-path'></path>
</g>
<defs>
<clipPath id='clip0_9023_61563_1'>
<rect width='24' height='24' fill='white'></rect>
</clipPath>
</defs>
</svg>
<span class='sr-only'>Loading...</span>
</div>
<div role='status' aria-label='loading'>
<svg class='w-8 h-8 stroke-indigo-600 animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<g clip-path='url(#clip0_9023_61563_2)'>
<path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' class='my-path'></path>
</g>
<defs>
<clipPath id='clip0_9023_61563_2'>
<rect width='24' height='24' fill='white'></rect>
</clipPath>
</defs>
</svg>
<span class='sr-only'>Loading...</span>
</div>
<div role='status' aria-label='loading'>
<svg class='w-10 h-10 stroke-indigo-600 animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<g clip-path='url(#clip0_9023_61563_3)'>
<path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' class='my-path'></path>
</g>
<defs>
<clipPath id='clip0_9023_61563_3'>
<rect width='24' height='24' fill='white'></rect>
</clipPath>
</defs>
</svg>
<span class='sr-only'>Loading...</span>
</div>
</div>Spinner with card
Whenever content is being loaded inside the card the following style of tailwind css loader can be used.
This is some text within a card body.
Loading...
<div class='flex flex-col bg-white border border-gray-200 shadow-sm rounded-lg opacity-50 p-4 md:p-5'> This is some text within a card body. </div>
<div role='status' class='absolute -translate-x-1/2 -translate-y-1/2 top-2/4 left-1/2'>
<svg class='w-8 h-8 stroke-indigo-600 animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<g clip-path='url(#clip0_9023_61563_2)'>
<path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' class='my-path'></path>
</g>
<defs>
<clipPath id='clip0_9023_61563_2'>
<rect width='24' height='24' fill='white'></rect>
</clipPath>
</defs>
</svg>
<span class='sr-only'>Loading...</span>
</div>Spinner with buttons
At the time of submitting the form data tailwind css loading can be used inside the button element too.
<div class='flex items-center gap-4'>
<button type='button' class='flex items-center gap-2 py-2.5 px-5 text-xs bg-indigo-500 text-white rounded-lg cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700'>
<svg class='w-4 h-4 stroke-white animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<g clip-path='url(#clip0_9023_61563_1)'>
<path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' class='my-path'></path>
</g>
<defs>
<clipPath id='clip0_9023_61563_1'>
<rect width='24' height='24' fill='white'></rect>
</clipPath>
</defs>
</svg>Loading... </button>
<button type='button' class='flex items-center gap-2 py-2.5 px-5 text-xs border border-gray-300 rounded-lg shadow-xs bg-white font-semibold text-gray-900 transition-all duration-500 hover:bg-gray-50'>
<svg class='w-4 h-4 stroke-indigo-600 animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<g clip-path='url(#clip0_9023_61563_1)'>
<path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' class='my-path'></path>
</g>
<defs>
<clipPath id='clip0_9023_61563_1'>
<rect width='24' height='24' fill='white'></rect>
</clipPath>
</defs>
</svg>Loading... </button>
</div>Tailwind Loader with alternate style
This default loading spinner designed in tailwild css shows different sizes with loading SVG and text. This examples uses tailwind loading animation.
<div class="w-full flex items-center justify-between">
<div class="grid gap-3">
<div class="flex items-center justify-center">
<svg class="animate-spin border-indigo-600" xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34" fill="none">
<g id="Component 2">
<circle id="Ellipse 717" cx="17.0007" cy="17.0001" r="14.2013" stroke="#D1D5DB" stroke-width="4" stroke-dasharray="2 3" />
<path id="Ellipse 715" d="M21.3573 30.5163C24.6694 29.4486 27.4741 27.2019 29.2391 24.2028C31.0041 21.2038 31.6065 17.661 30.9319 14.2471C30.2573 10.8332 28.3528 7.78584 25.5798 5.68345C22.8067 3.58105 19.3583 2.57 15.8891 2.84222" stroke="#4F46E5" stroke-width="4" />
</g>
</svg>
</div>
<span class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
<div class="grid gap-3">
<div class="flex items-center justify-center">
<svg class="animate-spin border-indigo-600" xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 42 42" fill="none">
<g id="Group 1000003709">
<circle id="Ellipse 717" cx="21" cy="21" r="17.9883" stroke="#D1D5DB" stroke-width="5" stroke-dasharray="4 4" />
<path id="Ellipse 715" d="M26.2226 38.2135C30.4948 36.9173 34.1323 34.0787 36.428 30.2497C38.7237 26.4206 39.5134 21.8746 38.6437 17.4957C37.7739 13.1167 35.3069 9.21759 31.7221 6.55647C28.1374 3.89535 23.6911 2.66236 19.2479 3.09723" stroke="#4F46E5" stroke-width="5" />
</g>
</svg>
</div>
<span class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
<div class="grid gap-3">
<div class="flex items-center justify-center">
<svg class="animate-spin border-indigo-600" xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52" fill="none">
<g id="Group 1000003710">
<circle id="Ellipse 717" cx="26.0007" cy="25.9994" r="22.7221" stroke="#D1D5DB" stroke-width="6" stroke-dasharray="4 4" />
<path id="Ellipse 715" d="M32.6373 47.7311C38.0288 46.0843 42.6156 42.4922 45.5067 37.6526C48.3977 32.8129 49.3864 27.0714 48.2808 21.5435C47.1751 16.0156 44.054 11.0961 39.5239 7.74084C34.9938 4.38554 29.3781 2.83406 23.768 3.38782" stroke="#4F46E5" stroke-width="6" />
</g>
</svg>
</div>
<span class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
<div class="grid gap-3">
<div class="flex items-center justify-center">
<svg class="animate-spin border-indigo-600" xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 62 62" fill="none">
<g id="Group 1000003711">
<circle id="Ellipse 717" cx="31.0018" cy="30.9993" r="26.5091" stroke="#D1D5DB" stroke-width="8" stroke-dasharray="5 5" />
<path id="Ellipse 715" d="M38.7435 56.3529C45.0336 54.4317 50.3849 50.2409 53.7578 44.5947C57.1307 38.9484 58.2842 32.25 56.9942 25.8008C55.7043 19.3516 52.063 13.6122 46.7779 9.69765C41.4928 5.78314 34.9412 3.97307 28.396 4.61912" stroke="#4F46E5" stroke-width="8" />
</g>
</svg>
</div>
<span class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
</div>Spinner with gradient
This tailwind css loader specially designed to animate SVG element which can be used as a page or content loader.
<div class="w-full flex items-center justify-between">
<div class="grid gap-3">
<div class="flex items-center justify-center">
<svg class="animate-spin border-indigo-600" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
<g id="Group 1000003698">
<circle id="Ellipse 713" cx="19.9997" cy="19.9277" r="15" stroke="#E5E7EB" stroke-width="2" />
<path id="Ellipse 714" d="M26.3311 33.528C29.9376 31.8488 32.7294 28.8058 34.0923 25.0683C35.4552 21.3308 35.2775 17.2049 33.5984 13.5984C31.9193 9.99189 28.8762 7.20011 25.1387 5.83723C21.4012 4.47434 17.2754 4.652 13.6689 6.33112" stroke="url(#paint0_linear_13416_7408)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</g>
<defs>
<linearGradient id="paint0_linear_13416_7408" x1="0.0704424" y1="12.6622" x2="12.7327" y2="39.8591" gradientUnits="userSpaceOnUse">
<stop stop-color="#4F46E5" />
<stop offset="1" stop-color="#8B5CF6" />
</linearGradient>
</defs>
</svg>
</div>
<span class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
<div class="grid gap-3">
<div class="flex items-center justify-center">
<svg class="animate-spin border-indigo-600" xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54" fill="none">
<g id="Group 1000003701">
<circle id="Ellipse 715" cx="26.9998" cy="26.5693" r="20" transform="rotate(90 26.9998 26.5693)" stroke="#E5E7EB" stroke-width="4" />
<path id="Ellipse 716" d="M35.4391 44.7038C37.8203 43.5955 39.9599 42.0291 41.7357 40.094C43.5115 38.1589 44.8887 35.893 45.7888 33.4256C46.6889 30.9582 47.0942 28.3377 46.9816 25.7137C46.8689 23.0896 46.2406 20.5135 45.1323 18.1323C44.0241 15.7512 42.4577 13.6116 40.5226 11.8358C38.5875 10.06 36.3215 8.68269 33.8541 7.7826C31.3867 6.8825 28.7662 6.4772 26.1422 6.58985C23.5182 6.7025 20.942 7.33088 18.5609 8.43912" stroke="url(#paint0_linear_13416_7433)" stroke-width="4" stroke-linecap="round" />
</g>
<defs>
<linearGradient id="paint0_linear_13416_7433" x1="0.428554" y1="16.8782" x2="17.3068" y2="53.1429" gradientUnits="userSpaceOnUse">
<stop stop-color="#4F46E5" />
<stop offset="1" stop-color="#8B5CF6" />
</linearGradient>
</defs>
</svg>
</div>
<span class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
<div class="grid gap-3">
<div class="flex items-center justify-center">
<svg class="animate-spin border-indigo-600" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
<g id="Group 1000003699">
<circle id="Ellipse 715" cx="31.9989" cy="31.8809" r="24" stroke="#E5E7EB" stroke-width="6" />
<path id="Ellipse 716" d="M42.111 53.6434C44.9694 52.3156 47.5383 50.4378 49.6709 48.1172C51.8036 45.7967 53.4583 43.0787 54.5406 40.1187C55.6229 37.1586 56.1115 34.0143 55.9787 30.8654C55.8458 27.7165 55.094 24.6246 53.7662 21.7662C52.4384 18.9078 50.5606 16.339 48.24 14.2063C45.9194 12.0736 43.2015 10.4189 40.2414 9.33662C37.2814 8.25434 34.1371 7.76569 30.9882 7.89856C27.8393 8.03143 24.7473 8.78323 21.889 10.111" stroke="url(#paint0_linear_13416_7438)" stroke-width="6" stroke-linecap="round" />
</g>
<defs>
<linearGradient id="paint0_linear_13416_7438" x1="0.122767" y1="20.2221" x2="20.3448" y2="63.7544" gradientUnits="userSpaceOnUse">
<stop stop-color="#4F46E5" />
<stop offset="1" stop-color="#8B5CF6" />
</linearGradient>
</defs>
</svg>
</div>
<span class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
<div class="grid gap-3">
<div class="flex items-center justify-center">
<svg class="animate-spin border-indigo-600" xmlns="http://www.w3.org/2000/svg" width="76" height="75" viewBox="0 0 76 75" fill="none">
<g id="Group 1000003700">
<circle id="Ellipse 715" cx="38.0004" cy="37.1953" r="28" stroke="#E5E7EB" stroke-width="8" />
<path id="Ellipse 716" d="M49.8079 62.5848C53.142 61.0342 56.138 58.842 58.6248 56.1335C61.1117 53.425 63.0407 50.2532 64.3018 46.7992C65.5629 43.3452 66.1313 39.6767 65.9745 36.003C65.8178 32.3293 64.939 28.7225 63.3884 25.3884C61.8378 22.0544 59.6456 19.0584 56.9371 16.5715C54.2286 14.0847 51.0568 12.1556 47.6028 10.8946C44.1488 9.63351 40.4802 9.06511 36.8066 9.22183C33.1329 9.37855 29.5261 10.2573 26.192 11.808" stroke="url(#paint0_linear_13416_7443)" stroke-width="8" stroke-linecap="round" />
</g>
<defs>
<linearGradient id="paint0_linear_13416_7443" x1="0.803595" y1="23.6159" x2="24.4195" y2="74.3928" gradientUnits="userSpaceOnUse">
<stop stop-color="#4F46E5" />
<stop offset="1" stop-color="#8B5CF6" />
</linearGradient>
</defs>
</svg>
</div>
<span class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
</div>Loader with arrow
This tailwind loading spinner shows SVG element with arrow style. it uses tailwind utility classes to animate the element.
<div class="w-full flex items-center justify-between">
<div class="grid gap-3">
<div class="flex items-center justify-center">
<svg class="animate-spin border-indigo-300" xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33" fill="none">
<g id="Group 1000003702">
<path id="Ellipse 713" d="M30.9123 14.3896L32.5368 2.95746L21.824 7.2667L30.9123 14.3896ZM12.7147 31.6593C13.2552 31.7727 13.7853 31.4264 13.8987 30.8859C14.012 30.3453 13.6657 29.8152 13.1252 29.7019L12.7147 31.6593ZM28.6651 6.22397C26.8622 3.88814 24.4486 2.09635 21.6909 1.04667L20.9794 2.91584C23.3924 3.83431 25.5043 5.40213 27.0818 7.44597L28.6651 6.22397ZM21.6909 1.04667C18.9333 -0.00300884 15.9391 -0.269685 13.0394 0.276123L13.4093 2.24161C15.9466 1.76403 18.5665 1.99737 20.9794 2.91584L21.6909 1.04667ZM13.0394 0.276123C10.1396 0.821932 7.4473 2.15896 5.26002 4.13941L6.60239 5.62198C8.51626 3.88909 10.8721 2.71919 13.4093 2.24161L13.0394 0.276123ZM5.26002 4.13941C3.07273 6.11986 1.47569 8.66657 0.645453 11.498L2.56465 12.0608C3.29111 9.58325 4.68852 7.35487 6.60239 5.62198L5.26002 4.13941ZM0.645453 11.498C-0.184785 14.3295 -0.215884 17.3353 0.555594 20.1834L2.48602 19.6604C1.81098 17.1684 1.83819 14.5383 2.56465 12.0608L0.645453 11.498ZM0.555594 20.1834C1.32707 23.0314 2.87108 25.6106 5.01692 27.6359L6.38968 26.1814C4.51207 24.4093 3.16107 22.1525 2.48602 19.6604L0.555594 20.1834ZM5.01692 27.6359C7.16276 29.6611 9.82685 31.0536 12.7147 31.6593L13.1252 29.7019C10.5984 29.1719 8.26729 27.9535 6.38968 26.1814L5.01692 27.6359Z" fill="#4F46E5" />
<path id="Ellipse 714" d="M16.001 31.0137C19.905 31.0137 23.6552 29.4916 26.4549 26.7708C29.2546 24.05 30.8833 20.3448 30.9948 16.4424" stroke="#A5B4FC" stroke-width="2" stroke-linecap="round" stroke-dasharray="3 4" />
</g>
</svg>
</div>
<span class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
<div class="grid gap-3">
<div class="flex items-center justify-center">
<svg class="animate-spin border-indigo-300" xmlns="http://www.w3.org/2000/svg" width="41" height="40" viewBox="0 0 41 40" fill="none">
<g id="Group 1000003703">
<path id="Ellipse 713" d="M38.8805 17.9524L40.9114 6.58536L30.0518 10.5101L38.8805 17.9524ZM15.8954 39.5567C16.4359 39.6701 16.966 39.3238 17.0794 38.7833C17.1928 38.2428 16.8465 37.7127 16.3059 37.5993L15.8954 39.5567ZM36.6545 8.93482C36.3923 8.53984 36.1156 8.15347 35.8247 7.77655L34.2414 8.99855C34.5032 9.33778 34.7523 9.68549 34.9883 10.041L36.6545 8.93482ZM35.8247 7.77655C33.5721 4.85805 30.5563 2.61929 27.1108 1.30776L26.3993 3.17693C29.5001 4.35724 32.2142 6.37203 34.2414 8.99855L35.8247 7.77655ZM27.1108 1.30776C23.6653 -0.00375938 19.9242 -0.336958 16.3011 0.345003L16.6711 2.31049C19.9317 1.69675 23.2985 1.99662 26.3993 3.17693L27.1108 1.30776ZM16.3011 0.345003C12.678 1.02696 9.31408 2.69752 6.58117 5.17199L7.92354 6.65457C10.383 4.42765 13.4104 2.92422 16.6711 2.31049L16.3011 0.345003ZM6.58117 5.17199C3.84826 7.64646 1.85284 10.8285 0.815496 14.3662L2.73469 14.929C3.66826 11.7451 5.46405 8.88148 7.92354 6.65457L6.58117 5.17199ZM0.815496 14.3662C-0.221848 17.904 -0.260705 21.6597 0.703221 25.2181L2.63365 24.6952C1.76616 21.4928 1.80113 18.1128 2.73469 14.929L0.815496 14.3662ZM0.703221 25.2181C1.66715 28.7766 3.59631 31.9992 6.27743 34.5297L7.65019 33.0752C5.2373 30.7979 3.50114 27.8977 2.63365 24.6952L0.703221 25.2181ZM6.27743 34.5297C8.95856 37.0602 12.2872 38.8 15.8954 39.5567L16.3059 37.5993C13.0587 36.9183 10.0631 35.3525 7.65019 33.0752L6.27743 34.5297Z" fill="#4F46E5" />
<path id="Ellipse 714" d="M20.001 39.002C24.9437 39.002 29.6918 37.0749 33.2365 33.6302C36.7812 30.1854 38.8431 25.4944 38.9844 20.5536" stroke="#A5B4FC" stroke-width="2" stroke-linecap="round" stroke-dasharray="3 4" />
</g>
</svg>
</div>
<span class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
<div class="grid gap-3">
<div class="flex items-center justify-center">
<svg class="animate-spin border-indigo-300" xmlns="http://www.w3.org/2000/svg" width="53" height="52" viewBox="0 0 53 52" fill="none">
<g id="Group 1000003704">
<path id="Ellipse 713" d="M49.8481 23.4123L52.2848 6.26401L36.2156 12.7279L49.8481 23.4123ZM20.7674 50.9323C21.5781 51.1023 22.3733 50.5829 22.5433 49.7721C22.7134 48.9613 22.194 48.1662 21.3832 47.9961L20.7674 50.9323ZM46.1759 10.4146C43.304 6.69369 39.4591 3.83942 35.0663 2.16731L33.999 4.97106C37.8748 6.44635 41.2671 8.96467 43.801 12.2476L46.1759 10.4146ZM35.0663 2.16731C30.6734 0.495207 25.9038 0.0704002 21.2846 0.939856L21.8395 3.88808C25.915 3.12097 30.1233 3.49577 33.999 4.97106L35.0663 2.16731ZM21.2846 0.939856C16.6654 1.80931 12.3766 3.93916 8.89232 7.09395L10.9059 9.31781C13.98 6.53436 17.764 4.6552 21.8395 3.88808L21.2846 0.939856ZM8.89232 7.09395C5.40804 10.2487 2.86401 14.3056 1.54146 18.816L4.42026 19.6601C5.58713 15.6806 7.83172 12.1013 10.9059 9.31781L8.89232 7.09395ZM1.54146 18.816C0.218917 23.3264 0.169377 28.1147 1.39832 32.6515L4.29396 31.8671C3.20967 27.8643 3.25338 23.6396 4.42026 19.6601L1.54146 18.816ZM1.39832 32.6515C2.62726 37.1883 5.08681 41.2969 8.50507 44.5231L10.5642 42.3414C7.5483 39.4949 5.37825 35.8699 4.29396 31.8671L1.39832 32.6515ZM8.50507 44.5231C11.9233 47.7493 16.1671 49.9674 20.7674 50.9323L21.3832 47.9961C17.3244 47.1449 13.5801 45.1878 10.5642 42.3414L8.50507 44.5231Z" fill="#4F46E5" />
<path id="Ellipse 714" d="M26.0008 50.0043C32.2439 50.0043 38.2411 47.5703 42.7183 43.2192C47.1956 38.8682 49.8 32.943 49.9785 26.7024" stroke="#A5B4FC" stroke-width="3" stroke-linecap="round" stroke-dasharray="3 5" />
</g>
</svg>
</div>
<span class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
<div class="grid gap-3">
<div class="flex items-center justify-center">
<svg class="animate-spin border-indigo-300" xmlns="http://www.w3.org/2000/svg" width="62" height="60" viewBox="0 0 62 60" fill="none">
<g id="Group 1000003705">
<path id="Ellipse 713" d="M57.8203 26.9786L61.0693 4.11423L39.6437 12.7327L57.8203 26.9786ZM23.8447 59.327C24.9258 59.5537 25.9859 58.8612 26.2127 57.7801C26.4394 56.6991 25.7469 55.6389 24.6658 55.4122L23.8447 59.327ZM53.7345 11.6632C50.3561 7.28607 45.8331 3.92839 40.6655 1.96138L39.2425 5.69971C43.7207 7.40431 47.6403 10.314 50.568 14.1072L53.7345 11.6632ZM40.6655 1.96138C35.4979 -0.00563836 29.887 -0.505368 24.4532 0.517433L25.1931 4.4484C29.902 3.56205 34.7644 3.99511 39.2425 5.69971L40.6655 1.96138ZM24.4532 0.517433C19.0193 1.54023 13.9741 4.04573 9.87528 7.75693L12.56 10.7221C16.112 7.50599 20.4841 5.33475 25.1931 4.4484L24.4532 0.517433ZM9.87528 7.75693C5.77649 11.4681 2.78376 16.2405 1.22796 21.5464L5.06635 22.6719C6.41459 18.0738 9.00806 13.9382 12.56 10.7221L9.87528 7.75693ZM1.22796 21.5464C-0.327842 26.8523 -0.386119 32.4851 1.05957 37.822L4.92043 36.7762C3.66761 32.1512 3.71811 27.2699 5.06635 22.6719L1.22796 21.5464ZM1.05957 37.822C2.50526 43.159 5.3986 47.9922 9.41974 51.7874L12.1653 48.8785C8.68059 45.5896 6.17325 41.4011 4.92043 36.7762L1.05957 37.822ZM9.41974 51.7874C13.4409 55.5826 18.4332 58.192 23.8447 59.327L24.6658 55.4122C19.9762 54.4286 15.6499 52.1674 12.1653 48.8785L9.41974 51.7874Z" fill="#4F46E5" />
<path id="Ellipse 714" d="M30.0007 58.0016C37.2836 58.0016 44.2797 55.1622 49.5026 50.0864C54.7255 45.0107 57.7638 38.0987 57.972 30.8187" stroke="#A5B4FC" stroke-width="4" stroke-linecap="round" stroke-dasharray="3 6" />
</g>
</svg>
</div>
<span class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
</div>Loader with text
This tailwind loading spinner shows SVG element with arrow style. it uses tailwind utility classes to animate the element.
Loading...
Loading...
Loading...
Loading...
<div class="w-full flex items-center justify-between">
<div class="grid gap-3">
<div class="flex items-center justify-center gap-2.5">
<svg class="animate-spin border-indigo-300"
xmlns="http://www.w3.org/2000/svg" width="30" height="30"
viewBox="0 0 30 30" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.4304 0.0323927C14.0002 0.172039 13.7522 0.420298 13.6321 0.825659C13.5643 1.05258 13.5527 1.58013 13.5527 4.33426C13.5527 7.98251 13.5488 7.93596 13.9208 8.30835C14.4187 8.80487 15.5812 8.80487 16.0792 8.30835C16.4511 7.93596 16.4473 7.98251 16.4473 4.33426C16.4473 0.804324 16.4415 0.742259 16.1547 0.400903C15.9145 0.115792 15.6568 0.0207556 15.0775 0.00523939C14.8614 -0.00695113 14.6447 0.00214369 14.4304 0.0323927ZM24.4026 3.89593C24.1643 4.00648 23.7574 4.38857 21.816 6.33779C20.0316 8.12797 19.4872 8.70595 19.4 8.89602C19.3276 9.05362 19.2902 9.2251 19.2905 9.39857C19.2909 9.57205 19.3289 9.74338 19.4019 9.9007C19.5376 10.1916 19.9832 10.6494 20.2835 10.8065C20.5877 10.9655 21.0391 10.9636 21.3549 10.8026C21.6785 10.6358 26.1541 6.15547 26.3207 5.83157C26.4001 5.66482 26.4417 5.4826 26.4427 5.29788C26.4437 5.11317 26.404 4.93051 26.3265 4.7629C26.1121 4.40396 25.8092 4.10611 25.4469 3.89787C25.2865 3.81116 25.1072 3.7656 24.925 3.76526C24.7427 3.76492 24.5633 3.80982 24.4026 3.89593ZM22.2559 13.5858C21.9939 13.6581 21.7571 13.8017 21.5719 14.0009C21.3065 14.3597 21.2232 15.0889 21.3898 15.6029C21.5022 15.952 21.785 16.2352 22.1338 16.3477C22.3702 16.4253 22.7557 16.435 25.6406 16.435C28.4093 16.435 28.9189 16.4233 29.1475 16.3554C29.719 16.1848 29.998 15.7348 30 14.9842C30 14.2375 29.7152 13.7894 29.1242 13.611C28.9247 13.5509 28.2989 13.5392 25.6484 13.5431C23.8698 13.547 22.343 13.5664 22.2559 13.5858ZM20.3339 19.3811C20.0277 19.5207 19.5763 19.963 19.4194 20.2772C19.3393 20.4342 19.2957 20.6073 19.2916 20.7836C19.2876 20.9599 19.3233 21.1348 19.3961 21.2954C19.5395 21.6154 24.0422 26.1384 24.3968 26.3188C24.8986 26.5767 25.4139 26.4507 25.9332 25.9425C26.4447 25.4421 26.5803 24.899 26.3207 24.3928C26.1405 24.0379 21.6223 19.5304 21.3026 19.3869C21.1498 19.3207 20.9853 19.286 20.8188 19.285C20.6524 19.284 20.4874 19.3167 20.3339 19.3811ZM14.5059 21.342C14.2442 21.4158 14.0076 21.56 13.822 21.759C13.5546 22.1197 13.5527 22.1449 13.5527 25.6322C13.5527 28.4096 13.5643 28.9197 13.6321 29.1485C13.8026 29.7207 14.254 30 15 30C15.7459 30 16.1973 29.7207 16.3678 29.1485C16.488 28.7374 16.486 22.5018 16.364 22.143C16.3264 21.9983 16.2577 21.8636 16.1627 21.7484C16.0676 21.6331 15.9485 21.5401 15.8137 21.4758C15.6006 21.3594 15.4766 21.3303 15.1104 21.3167C14.9086 21.3046 14.706 21.313 14.5059 21.342Z"
fill="#4F46E5" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M4.83402 3.86487C4.5279 4.00452 4.07647 4.44673 3.91953 4.76093C3.83948 4.918 3.79581 5.09111 3.79179 5.2674C3.78776 5.44369 3.82348 5.61861 3.89628 5.77918C4.03965 6.0992 8.54237 10.6222 8.89693 10.8026C9.39873 11.0605 9.91411 10.9344 10.4334 10.4263C10.9448 9.92589 11.0805 9.38282 10.8208 8.8766C10.6407 8.52167 6.12245 4.01421 5.80276 3.87069C5.65 3.80447 5.48545 3.76982 5.31899 3.76882C5.15252 3.76782 4.98757 3.80049 4.83402 3.86487ZM0.85443 13.6129C0.282873 13.7933 0 14.2491 0 14.9842C0.00193748 15.7348 0.280935 16.1847 0.852493 16.3554C1.08112 16.4233 1.59067 16.4349 4.35934 16.4349C7.24425 16.4349 7.62981 16.4252 7.86618 16.3477C8.03981 16.2905 8.19761 16.1934 8.32684 16.064C8.45607 15.9347 8.55313 15.7767 8.61018 15.6029C8.7768 15.0889 8.69349 14.3596 8.42805 13.9989C8.32166 13.8831 8.19656 13.7861 8.058 13.7118L7.79256 13.5644L4.4349 13.5528C1.73211 13.545 1.03268 13.5567 0.85443 13.6129ZM8.90274 19.4121C8.66443 19.5227 8.25756 19.9047 6.3162 21.854C4.53177 23.6442 3.98734 24.2221 3.90016 24.4122C3.82771 24.5698 3.79037 24.7413 3.7907 24.9148C3.79104 25.0882 3.82904 25.2596 3.90209 25.4169C4.03772 25.7078 4.48334 26.1655 4.78365 26.3226C5.08783 26.4817 5.53927 26.4797 5.85508 26.3188C6.17864 26.152 10.6542 21.6717 10.8208 21.3478C10.9002 21.181 10.9419 20.9988 10.9429 20.8141C10.9439 20.6294 10.9042 20.4467 10.8267 20.2791C10.6122 19.9201 10.3094 19.6223 9.94704 19.414C9.7867 19.3273 9.60738 19.2818 9.42513 19.2814C9.24289 19.2811 9.06341 19.326 8.90274 19.4121Z"
fill="#D1D5DB" />
</svg>
<p class="text-black text-sm font-medium leading-snug">
Loading<span class="animate-pulse" >...</span></p>
</div>
</div>
<div class="grid gap-3">
<div class="flex items-center justify-center gap-2.5">
<svg class="animate-spin border-indigo-300"
xmlns="http://www.w3.org/2000/svg" width="36" height="36"
viewBox="0 0 36 36" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M17.3164 0.0388713C16.8003 0.206446 16.5027 0.504357 16.3585 0.99079C16.2771 1.2631 16.2632 1.89616 16.2632 5.20111C16.2632 9.57901 16.2585 9.52315 16.7049 9.97002C17.3025 10.5658 18.6974 10.5658 19.295 9.97002C19.7414 9.52315 19.7367 9.57901 19.7367 5.20111C19.7367 0.965188 19.7297 0.890711 19.3856 0.481083C19.0973 0.138951 18.7881 0.0249067 18.0929 0.00628727C17.8337 -0.00834136 17.5736 0.00257242 17.3164 0.0388713ZM29.2831 4.67511C28.9971 4.80778 28.5089 5.26628 26.1792 7.60535C24.0379 9.75357 23.3846 10.4471 23.28 10.6752C23.193 10.8643 23.1482 11.0701 23.1486 11.2783C23.149 11.4865 23.1946 11.6921 23.2823 11.8808C23.4451 12.23 23.9798 12.7792 24.3402 12.9677C24.7052 13.1586 25.2469 13.1563 25.6259 12.9631C26.0142 12.7629 31.3849 7.38657 31.5848 6.99789C31.68 6.79778 31.73 6.57911 31.7312 6.35746C31.7324 6.13581 31.6848 5.91661 31.5918 5.71548C31.3345 5.28475 30.971 4.92733 30.5362 4.67744C30.3438 4.57339 30.1286 4.51872 29.91 4.51831C29.6913 4.51791 29.4759 4.57178 29.2831 4.67511ZM26.707 16.303C26.3926 16.3897 26.1085 16.5621 25.8863 16.801C25.5678 17.2316 25.4678 18.1067 25.6677 18.7235C25.8026 19.1424 26.142 19.4822 26.5605 19.6172C26.8442 19.7103 27.3068 19.722 30.7687 19.722C34.0911 19.722 34.7026 19.708 34.977 19.6265C35.6628 19.4217 35.9976 18.8817 35.9999 17.981C35.9999 17.085 35.6582 16.5473 34.9491 16.3332C34.7096 16.2611 33.9586 16.2471 30.778 16.2518C28.6437 16.2564 26.8116 16.2797 26.707 16.303ZM24.4006 23.2573C24.0333 23.4249 23.4915 23.9555 23.3032 24.3326C23.2072 24.5211 23.1548 24.7288 23.1499 24.9404C23.1451 25.1519 23.188 25.3618 23.2753 25.5545C23.4474 25.9385 28.8506 31.3661 29.2761 31.5825C29.8783 31.8921 30.4967 31.7408 31.1198 31.131C31.7336 30.5305 31.8964 29.8789 31.5848 29.2714C31.3686 28.8455 25.9467 23.4365 25.5631 23.2643C25.3798 23.1848 25.1823 23.1433 24.9826 23.1421C24.7828 23.1409 24.5849 23.1801 24.4006 23.2573ZM17.4071 25.6104C17.093 25.6989 16.8091 25.872 16.5864 26.1107C16.2655 26.5436 16.2632 26.5739 16.2632 30.7586C16.2632 34.0915 16.2771 34.7036 16.3585 34.9783C16.5631 35.6649 17.1048 36 17.9999 36C18.8951 36 19.4368 35.6649 19.6414 34.9783C19.7855 34.4848 19.7832 27.0022 19.6367 26.5716C19.5917 26.398 19.5093 26.2363 19.3952 26.098C19.2811 25.9597 19.1382 25.8481 18.9764 25.7709C18.7207 25.6313 18.5719 25.5964 18.1325 25.5801C17.8903 25.5655 17.6472 25.5756 17.4071 25.6104Z"
fill="#4F46E5" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.80083 4.63799C5.43348 4.80557 4.89176 5.33622 4.70344 5.71326C4.60737 5.90175 4.55498 6.10948 4.55015 6.32103C4.54532 6.53257 4.58818 6.74248 4.67554 6.93517C4.84759 7.31919 10.2508 12.7468 10.6763 12.9632C11.2785 13.2728 11.8969 13.1215 12.52 12.5117C13.1338 11.9112 13.2966 11.2595 12.985 10.6521C12.7688 10.2262 7.34694 4.8172 6.96332 4.64497C6.78 4.56551 6.58254 4.52393 6.38278 4.52273C6.18302 4.52153 5.98508 4.56074 5.80083 4.63799ZM1.02532 16.3357C0.339447 16.5521 0 17.0991 0 17.9812C0.00232498 18.8819 0.337122 19.4218 1.02299 19.6266C1.29734 19.7081 1.90881 19.7221 5.23121 19.7221C8.6931 19.7221 9.15577 19.7104 9.43942 19.6173C9.64778 19.5488 9.83713 19.4322 9.99221 19.277C10.1473 19.1217 10.2638 18.9322 10.3322 18.7236C10.5322 18.1068 10.4322 17.2317 10.1137 16.7988C9.98599 16.6599 9.83587 16.5434 9.6696 16.4544L9.35107 16.2775L5.32188 16.2635C2.07853 16.2542 1.23921 16.2682 1.02532 16.3357ZM10.6833 23.2947C10.3973 23.4273 9.90907 23.8858 7.57944 26.2249C5.43813 28.3731 4.78481 29.0667 4.68019 29.2948C4.59326 29.4839 4.54844 29.6897 4.54884 29.8979C4.54924 30.106 4.59485 30.3116 4.68251 30.5004C4.84526 30.8495 5.38001 31.3988 5.74038 31.5873C6.1054 31.7782 6.64712 31.7758 7.02609 31.5827C7.41436 31.3825 12.7851 26.0061 12.985 25.6174C13.0802 25.4173 13.1302 25.1987 13.1315 24.977C13.1327 24.7554 13.085 24.5362 12.992 24.335C12.7347 23.9043 12.3712 23.5469 11.9365 23.297C11.744 23.193 11.5289 23.1383 11.3102 23.1379C11.0915 23.1375 10.8761 23.1913 10.6833 23.2947Z"
fill="#D1D5DB" />
</svg>
<p class="text-black text-base font-medium leading-snug">
Loading<span class="animate-pulse">...</span></p>
</div>
</div>
<div class="grid gap-3">
<div class="flex items-center justify-center gap-2.5">
<svg class="animate-spin border-indigo-300"
xmlns="http://www.w3.org/2000/svg" width="48" height="48"
viewBox="0 0 48 48" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M23.0885 0.0518284C22.4003 0.275262 22.0035 0.672476 21.8113 1.32105C21.7028 1.68413 21.6842 2.52821 21.6842 6.93482C21.6842 12.772 21.678 12.6975 22.2732 13.2934C23.0699 14.0878 24.9299 14.0878 25.7266 13.2934C26.3218 12.6975 26.3156 12.772 26.3156 6.93482C26.3156 1.28692 26.3063 1.18761 25.8475 0.641444C25.4631 0.185268 25.0508 0.033209 24.1239 0.00838303C23.7782 -0.0111218 23.4314 0.0034299 23.0885 0.0518284ZM39.0441 6.23348C38.6628 6.41037 38.0118 7.02171 34.9056 10.1405C32.0505 13.0048 31.1794 13.9295 31.0399 14.2336C30.924 14.4858 30.8643 14.7602 30.8648 15.0377C30.8653 15.3153 30.9262 15.5894 31.043 15.8411C31.26 16.3066 31.973 17.039 32.4535 17.2903C32.9402 17.5448 33.6625 17.5417 34.1678 17.2841C34.6855 17.0172 41.8464 9.84876 42.113 9.33052C42.24 9.0637 42.3067 8.77215 42.3083 8.47661C42.3099 8.18108 42.2464 7.88881 42.1223 7.62063C41.7792 7.04633 41.2947 6.56978 40.7149 6.23659C40.4584 6.09786 40.1715 6.02496 39.8799 6.02442C39.5883 6.02387 39.3011 6.09571 39.0441 6.23348ZM35.6093 21.7373C35.1901 21.8529 34.8113 22.0828 34.515 22.4014C34.0903 22.9755 33.957 24.1423 34.2236 24.9646C34.4034 25.5232 34.856 25.9763 35.414 26.1563C35.7922 26.2804 36.4091 26.2959 41.0249 26.2959C45.4548 26.2959 46.2701 26.2773 46.6359 26.1687C47.5504 25.8956 47.9968 25.1757 47.9999 23.9747C47.9999 22.78 47.5442 22.0631 46.5987 21.7776C46.2794 21.6814 45.2781 21.6628 41.0373 21.669C38.1916 21.6752 35.7488 21.7062 35.6093 21.7373ZM32.5341 31.0098C32.0443 31.2332 31.322 31.9407 31.0709 32.4435C30.9428 32.6948 30.873 32.9717 30.8665 33.2538C30.8601 33.5359 30.9172 33.8158 31.0337 34.0727C31.2631 34.5847 38.4675 41.8214 39.0348 42.1101C39.8377 42.5228 40.6622 42.3211 41.493 41.508C42.3114 40.7074 42.5284 39.8385 42.113 39.0285C41.8247 38.4606 34.5956 31.2487 34.0841 31.0191C33.8397 30.9131 33.5764 30.8577 33.3101 30.8561C33.0437 30.8545 32.7798 30.9067 32.5341 31.0098ZM23.2094 34.1471C22.7906 34.2653 22.4121 34.496 22.1151 34.8143C21.6873 35.3915 21.6842 35.4319 21.6842 41.0115C21.6842 45.4553 21.7028 46.2715 21.8113 46.6377C22.0841 47.5531 22.8064 48 23.9999 48C25.1934 48 25.9157 47.5531 26.1885 46.6377C26.3807 45.9798 26.3776 36.0029 26.1823 35.4288C26.1222 35.1973 26.0123 34.9818 25.8602 34.7974C25.7081 34.613 25.5176 34.4641 25.3019 34.3613C24.9609 34.1751 24.7625 34.1285 24.1766 34.1068C23.8537 34.0873 23.5296 34.1009 23.2094 34.1471Z"
fill="#4F46E5" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.73444 6.18374C7.24464 6.40718 6.52235 7.11472 6.27125 7.61744C6.14316 7.86875 6.0733 8.14573 6.06686 8.42779C6.06042 8.70985 6.11757 8.98974 6.23405 9.24664C6.46345 9.75868 13.6678 16.9954 14.2351 17.284C15.038 17.6968 15.8626 17.4951 16.6934 16.682C17.5118 15.8814 17.7288 15.0125 17.3134 14.2025C17.0251 13.6346 9.79592 6.42269 9.28442 6.19305C9.04 6.0871 8.77672 6.03166 8.51038 6.03006C8.24403 6.02847 7.98011 6.08074 7.73444 6.18374ZM1.36709 21.7806C0.452596 22.0692 0 22.7985 0 23.9746C0.00309997 25.1756 0.449496 25.8955 1.36399 26.1686C1.72979 26.2772 2.54508 26.2959 6.97494 26.2959C11.5908 26.2959 12.2077 26.2803 12.5859 26.1562C12.8637 26.0648 13.1162 25.9094 13.3229 25.7024C13.5297 25.4954 13.685 25.2427 13.7763 24.9646C14.0429 24.1422 13.9096 22.9754 13.4849 22.3982C13.3147 22.2129 13.1145 22.0577 12.8928 21.9389L12.4681 21.7031L7.09584 21.6844C2.77138 21.672 1.65229 21.6906 1.36709 21.7806ZM14.2444 31.0593C13.8631 31.2362 13.2121 31.8475 10.1059 34.9663C7.25084 37.8306 6.37975 38.7554 6.24025 39.0595C6.12434 39.3116 6.06459 39.586 6.06512 39.8636C6.06566 40.1411 6.12647 40.4153 6.24335 40.667C6.46035 41.1324 7.17334 41.8648 7.65384 42.1162C8.14053 42.3706 8.86283 42.3675 9.36812 42.11C9.88582 41.8431 17.0468 34.6746 17.3134 34.1564C17.4403 33.8895 17.507 33.598 17.5086 33.3025C17.5102 33.0069 17.4467 32.7147 17.3227 32.4465C16.9796 31.8722 16.495 31.3956 15.9153 31.0624C15.6587 30.9237 15.3718 30.8508 15.0802 30.8503C14.7886 30.8497 14.5014 30.9215 14.2444 31.0593Z"
fill="#D1D5DB" />
</svg>
<p class="text-black text-lg font-medium leading-snug">
Loading<span class="animate-pulse">...</span></p>
</div>
</div>
<div class="grid gap-3">
<div class="flex items-center justify-center gap-2.5">
<svg class="animate-spin border-indigo-300"
xmlns="http://www.w3.org/2000/svg" width="56" height="56"
viewBox="0 0 56 56" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M26.9366 0.0604665C26.1337 0.321139 25.6707 0.784556 25.4465 1.54123C25.3199 1.96482 25.2982 2.94958 25.2982 8.09062C25.2982 14.9007 25.291 14.8138 25.9854 15.5089C26.9149 16.4358 29.0848 16.4358 30.0143 15.5089C30.7087 14.8138 30.7015 14.9007 30.7015 8.09062C30.7015 1.5014 30.6906 1.38555 30.1554 0.748351C29.7069 0.216146 29.2259 0.0387438 28.1445 0.0097802C27.7412 -0.0129754 27.3366 0.00400155 26.9366 0.0604665ZM45.5514 7.2724C45.1065 7.47876 44.347 8.19199 40.7232 11.8305C37.3923 15.1722 36.376 16.2511 36.2132 16.6059C36.078 16.9001 36.0083 17.2202 36.0089 17.544C36.0095 17.8678 36.0805 18.1876 36.2168 18.4813C36.47 19.0244 37.3018 19.8788 37.8624 20.1721C38.4302 20.4689 39.2729 20.4653 39.8624 20.1648C40.4664 19.8535 48.8208 11.4902 49.1319 10.8856C49.28 10.5743 49.3578 10.2342 49.3596 9.88938C49.3615 9.54459 49.2874 9.20362 49.1427 8.89074C48.7424 8.22072 48.1771 7.66474 47.5008 7.27602C47.2014 7.11417 46.8667 7.02912 46.5265 7.02849C46.1863 7.02785 45.8513 7.11166 45.5514 7.2724ZM41.5442 25.3602C41.0551 25.495 40.6131 25.7633 40.2675 26.1349C39.772 26.8047 39.6165 28.166 39.9275 29.1254C40.1373 29.7771 40.6653 30.3057 41.3163 30.5157C41.7575 30.6605 42.4772 30.6786 47.8624 30.6786C53.0306 30.6786 53.9818 30.6569 54.4085 30.5302C55.4754 30.2116 55.9962 29.3716 55.9998 27.9705C55.9998 26.5766 55.4682 25.7403 54.3651 25.4072C53.9926 25.295 52.8244 25.2733 47.8769 25.2805C44.5568 25.2877 41.7069 25.3239 41.5442 25.3602ZM37.9564 36.1781C37.385 36.4387 36.5423 37.2642 36.2494 37.8507C36.1 38.1439 36.0185 38.467 36.0109 38.7961C36.0034 39.1252 36.0701 39.4517 36.206 39.7514C36.4736 40.3488 44.8787 48.7917 45.5405 49.1284C46.4772 49.6099 47.4393 49.3746 48.4085 48.426C49.3633 47.4919 49.6165 46.4782 49.1319 45.5333C48.7955 44.8707 40.3615 36.4568 39.7648 36.1889C39.4796 36.0653 39.1725 36.0006 38.8617 35.9988C38.551 35.9969 38.2431 36.0579 37.9564 36.1781ZM27.0776 39.8383C26.589 39.9761 26.1474 40.2453 25.8009 40.6167C25.3018 41.2901 25.2982 41.3372 25.2982 47.8468C25.2982 53.0312 25.3199 53.9834 25.4465 54.4106C25.7648 55.4787 26.6074 56 27.9998 56C29.3923 56 30.2349 55.4787 30.5532 54.4106C30.7774 53.6431 30.7738 42.0033 30.546 41.3336C30.4759 41.0635 30.3477 40.8121 30.1702 40.5969C29.9928 40.3818 29.7705 40.2081 29.5188 40.0881C29.121 39.8709 28.8895 39.8166 28.206 39.7913C27.8292 39.7686 27.4512 39.7843 27.0776 39.8383Z"
fill="#4F46E5" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9.02351 7.21449C8.45208 7.47516 7.6094 8.30063 7.31646 8.88714C7.16702 9.18034 7.08552 9.50348 7.07801 9.83255C7.07049 10.1616 7.13716 10.4881 7.27306 10.7879C7.54069 11.3852 15.9457 19.8281 16.6076 20.1648C17.5443 20.6464 18.5063 20.411 19.4756 19.4625C20.4304 18.5284 20.6835 17.5147 20.1989 16.5697C19.8626 15.9072 11.4286 7.49327 10.8318 7.22535C10.5467 7.10174 10.2395 7.03706 9.92877 7.0352C9.61804 7.03333 9.31013 7.09432 9.02351 7.21449ZM1.59494 25.4109C0.528029 25.7476 0 26.5984 0 27.9705C0.00361664 29.3716 0.524413 30.2116 1.59132 30.5302C2.01808 30.6569 2.96926 30.6786 8.13743 30.6786C13.5226 30.6786 14.2423 30.6605 14.6835 30.5157C15.0077 30.4091 15.3022 30.2277 15.5434 29.9862C15.7847 29.7447 15.9658 29.4499 16.0723 29.1254C16.3834 28.166 16.2278 26.8047 15.7324 26.1313C15.5338 25.9152 15.3002 25.7341 15.0416 25.5955L14.5461 25.3204L8.27848 25.2986C3.23327 25.2841 1.92767 25.3059 1.59494 25.4109ZM16.6184 36.236C16.1736 36.4424 15.4141 37.1556 11.7902 40.7941C8.45931 44.1358 7.44304 45.2147 7.28029 45.5695C7.14506 45.8637 7.07535 46.1838 7.07597 46.5076C7.0766 46.8314 7.14755 47.1513 7.28391 47.4449C7.53707 47.988 8.3689 48.8424 8.92948 49.1357C9.49729 49.4325 10.34 49.4289 10.9295 49.1284C11.5335 48.8171 19.8879 40.4538 20.1989 39.8492C20.3471 39.5379 20.4248 39.1978 20.4267 38.853C20.4286 38.5082 20.3545 38.1672 20.2098 37.8543C19.8095 37.1843 19.2441 36.6283 18.5678 36.2396C18.2685 36.0778 17.9338 35.9927 17.5936 35.9921C17.2534 35.9915 16.9184 36.0753 16.6184 36.236Z"
fill="#D1D5DB" />
</svg>
<p class="text-black text-xl font-medium leading-snug">
Loading<span class="animate-pulse">...</span></p>
</div>
</div>
</div>
circular loader
This tailwind loading spinner shows SVG element with arrow style. it uses tailwind utility classes to animate the element.
<div class="w-full flex items-center justify-between">
<div class="grid gap-3">
<div class="flex items-center justify-center">
<svg class="animate-spin border-indigo-300"
xmlns="http://www.w3.org/2000/svg" width="30" height="30"
viewBox="0 0 30 30" fill="none">
<circle cx="15" cy="15" r="14" stroke="#4F46E5"
stroke-width="2" stroke-dasharray="6 6" />
</svg>
</div>
<span
class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
<div class="grid gap-3">
<div class="flex items-center justify-center">
<svg class="animate-spin border-indigo-300"
xmlns="http://www.w3.org/2000/svg" width="36" height="36"
viewBox="0 0 36 36" fill="none">
<circle cx="18" cy="18" r="17" stroke="#4F46E5"
stroke-width="2" stroke-dasharray="6 6" />
</svg>
</div>
<span
class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
<div class="grid gap-3">
<div class="flex items-center justify-center">
<svg class="animate-spin border-indigo-300"
xmlns="http://www.w3.org/2000/svg" width="48" height="48"
viewBox="0 0 48 48" fill="none">
<circle cx="24" cy="24" r="22.5" stroke="#4F46E5"
stroke-width="3" stroke-dasharray="10 10" />
</svg>
</div>
<span
class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
<div class="grid gap-3">
<div class="flex items-center justify-center">
<svg class="animate-spin border-indigo-300"
xmlns="http://www.w3.org/2000/svg" width="56" height="56"
viewBox="0 0 56 56" fill="none">
<circle cx="28" cy="28" r="26" stroke="#4F46E5"
stroke-width="4" stroke-dasharray="12 12" />
</svg>
</div>
<span
class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
</div>
Loader with Wheel
This tailwind loading spinner shows SVG element with arrow style. it uses tailwind utility classes to animate the element.
<div class="w-full flex items-center justify-between">
<div class="grid gap-3">
<div class="flex items-center justify-center">
<svg class="animate-spin border-indigo-300"
xmlns="http://www.w3.org/2000/svg" width="30" height="30"
viewBox="0 0 30 30" fill="none">
<path
d="M0 15C0 16.9698 0.387987 18.9204 1.14181 20.7403C1.89563 22.5601 3.00052 24.2137 4.3934 25.6066C5.78628 26.9995 7.43987 28.1044 9.25975 28.8582C11.0796 29.612 13.0302 30 15 30L15 15H0Z"
fill="#4F46E5" />
<path
d="M30 15C30 13.0302 29.612 11.0796 28.8582 9.25975C28.1044 7.43986 26.9995 5.78628 25.6066 4.3934C24.2137 3.00052 22.5601 1.89563 20.7402 1.14181C18.9204 0.387985 16.9698 -1.48355e-06 15 -1.31134e-06L15 15L30 15Z"
fill="#4F46E5" />
<path
d="M15 30C16.9698 30 18.9204 29.612 20.7403 28.8582C22.5601 28.1044 24.2137 26.9995 25.6066 25.6066C26.9995 24.2137 28.1044 22.5601 28.8582 20.7403C29.612 18.9204 30 16.9698 30 15L15 15L15 30Z"
fill="#EEF2FF" />
<path
d="M15 1.96701e-06C13.0302 2.22532e-06 11.0796 0.38799 9.25974 1.14181C7.43986 1.89563 5.78627 3.00052 4.39339 4.3934C3.00052 5.78628 1.89563 7.43987 1.1418 9.25975C0.387985 11.0796 -2.22532e-06 13.0302 -1.96701e-06 15L15 15L15 1.96701e-06Z"
fill="#EEF2FF" />
</svg>
</div>
<span>
class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
<div class="grid gap-3">
<div class="flex items-center justify-center">
<svg class="animate-spin border-indigo-300"
xmlns="http://www.w3.org/2000/svg" width="36" height="36"
viewBox="0 0 36 36" fill="none">
<path
d="M7.62939e-06 18C7.62939e-06 20.3638 0.465591 22.7044 1.37017 24.8883C2.27476 27.0722 3.60063 29.0565 5.27209 30.7279C6.94354 32.3994 8.92784 33.7252 11.1117 34.6298C13.2956 35.5344 15.6362 36 18 36V18H7.62939e-06Z"
fill="#4F46E5" />
<path
d="M36 18C36 15.6362 35.5344 13.2956 34.6298 11.1117C33.7252 8.92784 32.3994 6.94354 30.7279 5.27208C29.0565 3.60063 27.0722 2.27476 24.8883 1.37017C22.7044 0.465589 20.3638 5.84914e-06 18 6.05578e-06L18 18L36 18Z"
fill="#4F46E5" />
<path
d="M18 36C20.3638 36 22.7044 35.5344 24.8883 34.6298C27.0722 33.7252 29.0565 32.3994 30.7279 30.7279C32.3994 29.0565 33.7252 27.0722 34.6298 24.8883C35.5344 22.7044 36 20.3638 36 18L18 18L18 36Z"
fill="#EEF2FF" />
<path
d="M18 9.98981e-06C15.6362 1.02998e-05 13.2956 0.465594 11.1117 1.37018C8.92784 2.27476 6.94353 3.60064 5.27208 5.27209C3.60063 6.94354 2.27476 8.92785 1.37017 11.1117C0.465588 13.2956 4.95901e-06 15.6362 5.26898e-06 18L18 18L18 9.98981e-06Z"
fill="#EEF2FF" />
</svg>
</div>
<span>
class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
<div class="grid gap-3">
<div class="flex items-center justify-center">
<svg class="animate-spin border-indigo-300"
xmlns="http://www.w3.org/2000/svg" width="48" height="48"
viewBox="0 0 48 48" fill="none">
<path
d="M1.14441e-05 24C1.14441e-05 27.1517 0.620789 30.2726 1.8269 33.1844C3.03302 36.0962 4.80084 38.7419 7.02945 40.9706C9.25805 43.1992 11.9038 44.967 14.8156 46.1731C17.7274 47.3792 20.8483 48 24 48L24 24H1.14441e-05Z"
fill="#4F46E5" />
<path
d="M48 24C48 20.8483 47.3792 17.7274 46.1731 14.8156C44.967 11.9038 43.1992 9.25805 40.9706 7.02944C38.7419 4.80084 36.0962 3.03301 33.1844 1.8269C30.2726 0.620786 27.1517 9.07041e-06 24 9.34595e-06L24 24L48 24Z"
fill="#4F46E5" />
<path
d="M24 48C27.1517 48 30.2726 47.3792 33.1844 46.1731C36.0962 44.967 38.7419 43.1992 40.9706 40.9706C43.1992 38.7419 44.967 36.0962 46.1731 33.1844C47.3792 30.2726 48 27.1517 48 24L24 24L24 48Z"
fill="#EEF2FF" />
<path
d="M24 1.45913e-05C20.8483 1.50046e-05 17.7274 0.620793 14.8156 1.8269C11.9038 3.03302 9.25805 4.80085 7.02944 7.02945C4.80084 9.25806 3.03301 11.9038 1.8269 14.8156C0.620785 17.7274 7.88357e-06 20.8483 8.29687e-06 24L24 24L24 1.45913e-05Z"
fill="#EEF2FF" />
</svg>
</div>
<span>
class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
<div class="grid gap-3">
<div class="flex items-center justify-center">
<svg class="animate-spin border-indigo-300"
xmlns="http://www.w3.org/2000/svg" width="56" height="56"
viewBox="0 0 56 56" fill="none">
<path
d="M1.52588e-05 28C1.52588e-05 31.677 0.724255 35.318 2.13139 38.7151C3.53852 42.1122 5.60098 45.1989 8.20102 47.799C10.8011 50.399 13.8878 52.4615 17.2849 53.8686C20.682 55.2757 24.323 56 28 56L28 28H1.52588e-05Z"
fill="#4F46E5" />
<path
d="M56 28C56 24.323 55.2757 20.682 53.8686 17.2849C52.4615 13.8878 50.399 10.8011 47.799 8.20102C45.1989 5.60098 42.1122 3.53851 38.7151 2.13138C35.318 0.724252 31.677 1.24895e-05 28 1.2811e-05L28 28L56 28Z"
fill="#4F46E5" />
<path
d="M28 56C31.677 56 35.318 55.2757 38.7151 53.8686C42.1122 52.4615 45.1989 50.399 47.799 47.799C50.399 45.1989 52.4615 42.1122 53.8686 38.7151C55.2757 35.318 56 31.677 56 28L28 28L28 56Z"
fill="#EEF2FF" />
<path
d="M28 1.89305e-05C24.323 1.94127e-05 20.682 0.724259 17.2849 2.13139C13.8878 3.53853 10.8011 5.60099 8.20102 8.20103C5.60098 10.8011 3.53851 13.8878 2.13138 17.2849C0.72425 20.682 1.11049e-05 24.323 1.1587e-05 28L28 28L28 1.89305e-05Z"
fill="#EEF2FF" />
</svg>
</div>
<span>
class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
</div>Loader with Dots
This tailwind loading spinner shows div element with width height style. it uses tailwind utility classes to animate the element.
Add tailwind animation into your website with pagedone customizable
classes. You have to follow few steps to add classes in your 'tailwind.config.js' file where you define your
project's customized styles.
- Add below styles in 'tailwind.config.js' file in your project or if you are using tailwind CDN than, add below style into your 'tailwind.config' object inside script tag
- Use customized amimation classes shown below.
module.exports = {
theme: {
extend: {
animation: {
BounceDelayOne: 'bounce 1s 0.2s infinite',
BounceDelayTwo: 'bounce 1s 0.4s infinite',
BounceDelayThree: 'bounce 1s 0.6s infinite',
},
},
},
plugins: [],
}<div class="w-full flex items-center justify-between">
<div class="grid gap-3">
<div class="flex items-center justify-center gap-1.5">
<div class="w-2.5 h-2.5 rounded-full bg-indigo-600 animate-BounceDelayOne"></div>
<div class="w-2.5 h-2.5 rounded-full bg-indigo-600 animate-BounceDelayTwo"></div>
<div class="w-2.5 h-2.5 rounded-full bg-indigo-600 animate-BounceDelayThree"></div>
</div>
<span
class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
<div class="grid gap-3">
<div class="flex items-center justify-center gap-1.5">
<div class="w-3 h-3 rounded-full bg-indigo-600 animate-BounceDelayOne"></div>
<div class="w-3 h-3 rounded-full bg-indigo-600 animate-BounceDelayTwo"></div>
<div class="w-3 h-3 rounded-full bg-indigo-600 animate-BounceDelayThree"></div>
</div>
<span
class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
<div class="grid gap-3">
<div class="flex items-center justify-center gap-1.5">
<div class="w-3.5 h-3.5 rounded-full bg-indigo-600 animate-BounceDelayOne"></div>
<div class="w-3.5 h-3.5 rounded-full bg-indigo-600 animate-BounceDelayTwo"></div>
<div class="w-3.5 h-3.5 rounded-full bg-indigo-600 animate-BounceDelayThree"></div>
</div>
<span
class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
<div class="grid gap-3">
<div class="flex items-center justify-center gap-1.5">
<div class="w-4 h-4 rounded-full bg-indigo-600 animate-BounceDelayOne"></div>
<div class="w-4 h-4 rounded-full bg-indigo-600 animate-BounceDelayTwo"></div>
<div class="w-4 h-4 rounded-full bg-indigo-600 animate-BounceDelayThree"></div>
</div>
<span
class="text-black text-sm font-normal leading-snug">Loading...</span>
</div>
</div>Loader in text
This tailwind loading spinner shows SVG element with arrow style. it uses tailwind utility classes to animate the element.
L
ading...
L 0 ading...
L
ading...
L
ading...
<div class="w-full flex items-center justify-around pb-5">
<div class="grid gap-3">
<h2
class="text-4xl font-manrope font-extrabold text-transparent bg-gradient-to-tr from-indigo-600 to-pink-600 bg-clip-text flex items-center">
L <div
class="rounded-full flex items-center justify-center w-7 h-7 bg-gradient-to-tr from-indigo-600 to-pink-600 animate-spin">
<div class="h-5 w-4 rounded-full bg-white"></div>
</div> ading...
</h2>
</div>
<div class="grid gap-3">
<h2
class="text-4xl font-manrope font-extrabold text-transparent bg-gradient-to-tr from-indigo-600 to-pink-600 bg-clip-text flex items-center">
L <span
class=" text-transparent bg-gradient-to-tr from-indigo-600 to-pink-600 bg-clip-text animate-spin">0</span>
ading...
</h2>
</div>
<div class="grid gap-3">
<h2
class="text-4xl font-manrope font-extrabold text-transparent bg-gradient-to-tr from-indigo-600 to-pink-600 bg-clip-text flex items-center">
L <div
class="items-center justify-center rounded-full w-7 h-7 p-0.5 bg-gradient-to-tr from-indigo-500 to-pink-500 animate-spin">
<div class="h-5 w-5 rounded-full bg-white "></div>
</div>
ading...
</h2>
</div>
<div class="grid gap-3">
<h2
class="text-4xl font-manrope font-extrabold text-transparent bg-gradient-to-tr from-indigo-600 to-pink-600 bg-clip-text flex items-center">
L <div
class="items-center justify-center rounded-md w-6 h-6 flex bg-gradient-to-tr from-indigo-500 to-pink-500 animate-spin">
<div class="h-4 w-4 rounded-md bg-white "></div>
</div>
ading...
</h2>
</div>
</div>