loadersBeginneranimation

Loader — Bouncing Dots

Three bouncing dots loader animation.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a 3-dot bouncing loader with Tailwind: three small circles in a row, each with an animation-delay so they bounce in sequence. Pure CSS keyframes.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/loaders/3.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-app-loader-3
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="flex min-h-screen items-center justify-center p-6 w-full">
<div class="inline-flex items-center gap-3">
      <svg
        class="size-6 animate-spin text-indigo-600"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
      >
        <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>
  </div>
</div>