devsnips

Component

Circular Spinner

Spinning ring loading indicator in four sizes (xs, sm, md, lg) and multiple colors, with an optional text label. Pure CSS animation via Tailwind's animate-spin — no JavaScript required.

  • Component
  • Tailwind
  • HTML
  • MIT

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.dev/library/tailwind/components/progress/circular-spinner/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Progress/circular-spinner
registry path: Tailwind/Components/Progress/circular-spinner

Source

Implementation

code.html 
<!--
Snippet Name: Circular Spinner
Description: Spinning ring loading indicator with three sizes and an optional label. Pure CSS animation, no JS.
Author: DevSnips Contributors
Usage Example: Drop inline where content is loading. Use the .spinner-ring class on an svg circle.
-->
<div class="flex flex-col items-center gap-3" role="status" aria-live="polite">
  <svg class="spinner-ring h-10 w-10 animate-spin text-blue-600" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <circle class="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3"/>
    <path class="opacity-100" d="M22 12a10 10 0 00-10-10" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
  </svg>
  <span class="text-sm font-medium text-gray-500">Loading…</span>
</div>
13 lines UTF-8 · LF · Spaces: 2

AI-ready

Available to your agent.

This component is reachable through the DevSnips CLI, MCP server and Skills integrations — one registry, one resource path.

Resource path

devsnips://components/progress/circular-spinner

Continue browsing

Related components

View all
Linear Progress Bar Tailwind Animated horizontal progress bar with percentage label and gradient fill. Includes determinate (value-driven), completed (green), and indeterminate (sliding) modes. Accessible via role=progressbar with aria-valuenow/valuetext. tailwind / components / progress / linear-bar Skeleton Loader Tailwind Shimmering placeholder skeletons that match the shape of incoming content - card image, avatar, title, and text lines, plus a list-row variant. Pure CSS shimmer animation with prefers-reduced-motion support. tailwind / components / progress / skeleton-loader Upload Progress Tailwind Multi-file upload list where each file shows an animated progress bar and percentage, then transitions to a green success check when complete. Files can be removed mid-upload. Call addFile(name) to push files programmatically. tailwind / components / progress / upload-progress