loadersBeginneranimation

Spinner Loader

A simple animated SVG spinner for loading states.

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 loading spinner with Tailwind: an SVG circle with a partial stroke that rotates infinitely (animate-spin). Make sizes for inline button use (size-4) and standalone (size-12). Color it via currentColor so it inherits text-{color} from its parent.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/loaders/1.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-app-loader-spinner
-->
<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">
<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"
    >
      <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>
</div>