{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "spinner",
  "name": "Spinner",
  "category": "Feedback",
  "description": "Indeterminate loading indicators: ring and dots.",
  "tags": [
    "spinner",
    "loader",
    "loading",
    "busy"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "spinner",
      "loading indicator",
      "busy"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [
      "loader",
      "skeleton"
    ],
    "avoid": null
  },
  "url": "https://mian.ro/components/spinner",
  "markdownUrl": "https://mian.ro/ai/components/spinner.md",
  "classes": [
    {
      "name": "mn-spinner",
      "description": "Ring. Inherits the text colour unless a role is set."
    },
    {
      "name": "mn-spinner-sm · mn-spinner-lg",
      "description": "Sizes."
    },
    {
      "name": "mn-dots",
      "description": "Three-dot loader (three empty spans)."
    }
  ],
  "accessibility": [
    "Give the spinner role=\"status\" and a label, or hide it and mark the loading region aria-busy=\"true\". Motion slows under reduced motion."
  ],
  "examples": [
    {
      "title": "Ring and dots",
      "description": null,
      "html": "<span class=\"mn-spinner mn-spinner-sm\" role=\"status\" aria-label=\"Loading\"></span>\n<span class=\"mn-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n<span class=\"mn-spinner mn-spinner-lg mn-primary\" role=\"status\" aria-label=\"Loading\"></span>\n<span class=\"mn-dots\" role=\"status\" aria-label=\"Typing\"><span></span><span></span><span></span></span>"
    }
  ],
  "css": ".mn-spinner {\n  --_s: 1.25rem;\n  display: inline-block; width: var(--_s); height: var(--_s); flex: none;\n  border: 2px solid color-mix(in oklab, var(--_c, currentColor) 20%, transparent);\n  border-top-color: var(--_c, currentColor);\n  border-radius: 50%; animation: mn-spin .7s linear infinite; vertical-align: middle;\n}\n.mn-spinner-sm { --_s: .9rem; } .mn-spinner-lg { --_s: 2rem; border-width: 3px; }\n.mn-dots { --_d: var(--_c, currentColor); display: inline-flex; gap: .25rem; }\n.mn-dots > span { width: .4rem; height: .4rem; border-radius: 50%; background: var(--_d); animation: mn-bounce 1s var(--mn-ease) infinite; }\n.mn-dots > span:nth-child(2) { animation-delay: .15s; } .mn-dots > span:nth-child(3) { animation-delay: .3s; }\n@keyframes mn-bounce { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }\n@media (prefers-reduced-motion: reduce) { .mn-spinner { animation-duration: 2s; } .mn-dots > span { animation: none; opacity: .6; } }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/spinner.json"
  }
}