Skip to content
HyperUI

No results found.

Back to application components

Loaders

Loading and progress indicator components for web applications. Includes spinners, progress bars, and animated loaders for data fetching states in dashboards, forms, and content-heavy applications.

7/7 Dark Mode Updated: Jul 4, 2026

Spinner

markmead

<div role="status" aria-label="Loading">
  <svg
    class="mx-auto size-8 animate-spin text-indigo-600"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    aria-hidden="true"
  >
    <circle
      class="opacity-25"
      cx="12"
      cy="12"
      r="10"
      stroke="currentColor"
      stroke-width="4"
    ></circle>

    <path
      class="opacity-75"
      fill="currentColor"
      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
    ></path>
  </svg>
</div>

Circular spinning loader for general loading states

Spinner (Dark)

markmead

<div role="status" aria-label="Loading">
  <svg
    class="mx-auto size-8 animate-spin text-indigo-600 dark:text-indigo-300"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    aria-hidden="true"
  >
    <circle
      class="opacity-25"
      cx="12"
      cy="12"
      r="10"
      stroke="currentColor"
      stroke-width="4"
    ></circle>

    <path
      class="opacity-75"
      fill="currentColor"
      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
    ></path>
  </svg>
</div>

Circular spinning loader for general loading states

Spinner with text

markmead

<div class="text-center" role="status">
  <svg
    class="mx-auto size-8 animate-spin text-indigo-600"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    aria-hidden="true"
  >
    <circle
      class="opacity-25"
      cx="12"
      cy="12"
      r="10"
      stroke="currentColor"
      stroke-width="4"
    ></circle>

    <path
      class="opacity-75"
      fill="currentColor"
      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
    ></path>
  </svg>

  <p class="mt-4 font-medium text-gray-700">Loading...</p>
</div>

Centered spinner with loading message displayed below

Spinner with text (Dark)

markmead

<div class="text-center" role="status">
  <svg
    class="mx-auto size-8 animate-spin text-indigo-600 dark:text-indigo-300"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    aria-hidden="true"
  >
    <circle
      class="opacity-25"
      cx="12"
      cy="12"
      r="10"
      stroke="currentColor"
      stroke-width="4"
    ></circle>

    <path
      class="opacity-75"
      fill="currentColor"
      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
    ></path>
  </svg>

  <p class="mt-4 font-medium text-gray-700 dark:text-gray-200">Loading...</p>
</div>

Centered spinner with loading message displayed below

Spinner inline

markmead

<div class="inline-flex items-center gap-3" role="status">
  <svg
    class="size-6 animate-spin text-indigo-600"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    aria-hidden="true"
  >
    <circle
      class="opacity-25"
      cx="12"
      cy="12"
      r="10"
      stroke="currentColor"
      stroke-width="4"
    ></circle>

    <path
      class="opacity-75"
      fill="currentColor"
      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
    ></path>
  </svg>

  <p class="font-medium text-gray-700">Loading...</p>
</div>

Compact spinner with text aligned horizontally

Spinner inline (Dark)

markmead

<div class="inline-flex items-center gap-3" role="status">
  <svg
    class="size-6 animate-spin text-indigo-600 dark:text-indigo-300"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    aria-hidden="true"
  >
    <circle
      class="opacity-25"
      cx="12"
      cy="12"
      r="10"
      stroke="currentColor"
      stroke-width="4"
    ></circle>

    <path
      class="opacity-75"
      fill="currentColor"
      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
    ></path>
  </svg>

  <p class="font-medium text-gray-700 dark:text-gray-200">Loading...</p>
</div>

Compact spinner with text aligned horizontally

Progress bar

markmead

<div class="w-full max-w-sm" role="status">
  <div class="h-2 overflow-hidden rounded-full bg-gray-200">
    <div class="h-full w-[80%] animate-pulse bg-indigo-600"></div>
  </div>

  <p class="mt-4 text-center font-medium text-gray-700">Loading...</p>
</div>

Horizontal bar indicator showing loading progress

Progress bar (Dark)

markmead

<div class="w-full max-w-sm" role="status">
  <div class="h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
    <div class="h-full w-[80%] animate-pulse bg-indigo-600 dark:bg-indigo-300"></div>
  </div>

  <p class="mt-4 text-center font-medium text-gray-700 dark:text-gray-200">Loading...</p>
</div>

Horizontal bar indicator showing loading progress

Dots pulse

markmead

<div class="flex gap-2" role="status" aria-label="Loading">
  <span class="size-3 animate-pulse rounded-full bg-indigo-600" aria-hidden="true"></span>
  <span
    class="size-3 animate-pulse rounded-full bg-indigo-600 [animation-delay:0.2s]"
    aria-hidden="true"
  ></span>
  <span
    class="size-3 animate-pulse rounded-full bg-indigo-600 [animation-delay:0.4s]"
    aria-hidden="true"
  ></span>
</div>

Three animated dots with sequential pulse effect

Dots pulse (Dark)

markmead

<div class="flex gap-2" role="status" aria-label="Loading">
  <span
    class="size-3 animate-pulse rounded-full bg-indigo-600 dark:bg-indigo-300"
    aria-hidden="true"
  ></span>
  <span
    class="size-3 animate-pulse rounded-full bg-indigo-600 [animation-delay:0.2s] dark:bg-indigo-300"
    aria-hidden="true"
  ></span>
  <span
    class="size-3 animate-pulse rounded-full bg-indigo-600 [animation-delay:0.4s] dark:bg-indigo-300"
    aria-hidden="true"
  ></span>
</div>

Three animated dots with sequential pulse effect

Dots ping

markmead

<div class="flex gap-2" role="status" aria-label="Loading">
  <span class="size-3 animate-ping rounded-full bg-indigo-600" aria-hidden="true"></span>
  <span
    class="size-3 animate-ping rounded-full bg-indigo-600 [animation-delay:0.2s]"
    aria-hidden="true"
  ></span>
  <span
    class="size-3 animate-ping rounded-full bg-indigo-600 [animation-delay:0.4s]"
    aria-hidden="true"
  ></span>
</div>

Three animated dots with expanding ping effect

Dots ping (Dark)

markmead

<div class="flex gap-2" role="status" aria-label="Loading">
  <span
    class="size-3 animate-ping rounded-full bg-indigo-600 dark:bg-indigo-300"
    aria-hidden="true"
  ></span>
  <span
    class="size-3 animate-ping rounded-full bg-indigo-600 [animation-delay:0.2s] dark:bg-indigo-300"
    aria-hidden="true"
  ></span>
  <span
    class="size-3 animate-ping rounded-full bg-indigo-600 [animation-delay:0.4s] dark:bg-indigo-300"
    aria-hidden="true"
  ></span>
</div>

Three animated dots with expanding ping effect

Dots bounce

markmead

<div class="flex gap-2" role="status" aria-label="Loading">
  <span class="size-3 animate-bounce rounded-full bg-indigo-600" aria-hidden="true"></span>
  <span
    class="size-3 animate-bounce rounded-full bg-indigo-600 [animation-delay:0.2s]"
    aria-hidden="true"
  ></span>
  <span
    class="size-3 animate-bounce rounded-full bg-indigo-600 [animation-delay:0.4s]"
    aria-hidden="true"
  ></span>
</div>

Three animated dots with bouncing effect

Dots bounce (Dark)

markmead

<div class="flex gap-2" role="status" aria-label="Loading">
  <span
    class="size-3 animate-bounce rounded-full bg-indigo-600 dark:bg-indigo-300"
    aria-hidden="true"
  ></span>
  <span
    class="size-3 animate-bounce rounded-full bg-indigo-600 [animation-delay:0.2s] dark:bg-indigo-300"
    aria-hidden="true"
  ></span>
  <span
    class="size-3 animate-bounce rounded-full bg-indigo-600 [animation-delay:0.4s] dark:bg-indigo-300"
    aria-hidden="true"
  ></span>
</div>

Three animated dots with bouncing effect

Related components

View all application components