10 Tailwind Loader components

Tailwind: Loader Components With Code

Sure, here are 10 Tailwind loaders components that you can use in your web projects:

1. Spinner Loader Component

<div class="flex items-center justify-center">
  <div
    class="h-12 w-12 animate-spin rounded-full border-4 border-t-4 border-gray-200 border-t-primary-500 ease-linear"
  ></div>
</div>

2. Circular Progress Bar Loader Component

<div class="relative h-4 w-4">
  <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75"></span>
  <span class="relative inline-flex h-3 w-3 rounded-full bg-sky-500"></span>
</div>

3. Wave Loader Component

<div class="relative h-12 w-full">
  <div class="overlay pin-t pin-l absolute flex h-full w-full items-center justify-center">
    <div class="loader m-2 inline-block h-5 w-5 rounded-full" />
    <div class="loader m-2 inline-block h-5 w-5 rounded-full" />
    <div class="loader m-2 inline-block h-5 w-5 rounded-full" />
  </div>
  <div class="wave pin-t pin-l absolute flex h-12 w-full items-center justify-center">
    <svg viewBox="0 0 75 75" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle
        cx="37.5"
        cy="37.5"
        r="24"
        stroke-width="4"
        stroke-dasharray="100 63"
        stroke-linecap="round"
      />
    </svg>
  </div>
</div>

4. Ring Loader Component

<div class="h-8 w-8">
  <div class="loader h-8 w-8 rounded-full border-4 border-t-4 border-gray-200 ease-linear"></div>
</div>

5. Pulse Loader Component

<div class="mx-auto w-full max-w-sm rounded-md border border-blue-300 p-4 shadow">
  <div class="flex animate-pulse space-x-4">
    <div class="h-10 w-10 rounded-full bg-slate-200"></div>
    <div class="flex-1 space-y-6 py-1">
      <div class="h-2 rounded bg-slate-200"></div>
      <div class="space-y-3">
        <div class="grid grid-cols-3 gap-4">
          <div class="col-span-2 h-2 rounded bg-slate-200"></div>
          <div class="col-span-1 h-2 rounded bg-slate-200"></div>
        </div>
        <div class="h-2 rounded bg-slate-200"></div>
      </div>
    </div>
  </div>
</div>

6. Bounce Loader Component

<div class="flex items-center justify-center">
  <div class="loader h-24 w-24 rounded-full border-8 border-t-8 border-gray-200 ease-linear"></div>
</div>

7. Fade Loader Component

<div class="flex items-center justify-center">
  <div class="loader h-24 w-24 rounded-full border-8 border-t-8 border-gray-200 ease-linear"></div>
</div>

8. Ring Bounce Loader Component

<div class="flex items-center justify-center">
  <div class="loader h-12 w-12 rounded-full border-4 border-t-4 border-gray-200 ease-linear"></div>
</div>

9. Ellipsis Loader Component

<div class="flex items-center justify-center">
  <div class="loader h-12 w-12 rounded-full border-4 border-t-4 border-gray-200 ease-linear"></div>
</div>

10. Grid Loader Component

<div class="grid grid-cols-3 gap-4">
  <div class="loader h-12 w-12 rounded-full border-2 border-t-2 border-gray-200 ease-linear"></div>
  <div class="loader h-12 w-12 rounded-full border-2 border-t-2 border-gray-200 ease-linear"></div>
  <div class="loader h-12 w-12 rounded-full border-2 border-t-2 border-gray-200 ease-linear"></div>
  <div class="loader h-12 w-12 rounded-full border-2 border-t-2 border-gray-200 ease-linear"></div>
  <div class="loader h-12 w-12 rounded-full border-2 border-t-2 border-gray-200 ease-linear"></div>
  <div class="loader h-12 w-12 rounded-full border-2 border-t-2 border-gray-200 ease-linear"></div>
  <div class="loader h-12 w-12 rounded-full border-2 border-t-2 border-gray-200 ease-linear"></div>
  <div class="loader h-12 w-12 rounded-full border-2 border-t-2 border-gray-200 ease-linear"></div>
  <div class="loader h-12 w-12 rounded-full border-2 border-t-2 border-gray-200 ease-linear"></div>
</div>

Use these Tailwind Loader components to display loading animations when your web applications are processing data or fetching data from an API.