{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "radial-progress",
  "name": "Radial progress",
  "category": "Feedback",
  "description": "Circular progress with a centred value.",
  "tags": [
    "radial",
    "circular progress",
    "donut",
    "gauge",
    "percent"
  ],
  "requiresJs": true,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "circular progress",
      "score ring",
      "percentage circle",
      "goal progress"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/radial-progress",
  "markdownUrl": "https://mian.ro/ai/components/radial-progress.md",
  "classes": [
    {
      "name": "mn-radial",
      "description": "Set aria-valuenow (0–100); mian.js paints it."
    },
    {
      "name": "mn-radial-sm · mn-radial-lg",
      "description": "Sizes."
    }
  ],
  "accessibility": [
    "Same semantics as the linear bar: role=\"progressbar\", aria-valuenow, a name."
  ],
  "examples": [
    {
      "title": "Sizes and colours",
      "description": null,
      "html": "<div class=\"mn-radial mn-radial-sm\" role=\"progressbar\" aria-label=\"Tasks\" aria-valuenow=\"25\"><span>25%</span></div>\n<div class=\"mn-radial mn-success\" role=\"progressbar\" aria-label=\"Goal\" aria-valuenow=\"70\"><span>70%</span></div>\n<div class=\"mn-radial mn-radial-lg mn-accent\" role=\"progressbar\" aria-label=\"Score\" aria-valuenow=\"92\"><span>92</span></div>"
    }
  ],
  "css": ".mn-radial {\n  --_v: 0; --_s: 4.5rem; --_t: .45rem;\n  position: relative; display: inline-grid; place-items: center;\n  width: var(--_s); height: var(--_s); border-radius: 50%;\n  background: conic-gradient(var(--_c, var(--mn-primary)) calc(var(--_v) * 1%), var(--mn-surface-2) 0);\n  font: 650 calc(var(--_s) * .22)/1 var(--mn-font); font-variant-numeric: tabular-nums;\n}\n.mn-radial::before { content: \"\"; position: absolute; inset: var(--_t); border-radius: 50%; background: var(--mn-bg); }\n.mn-radial > * { position: relative; }\n.mn-radial-sm { --_s: 3rem; --_t: .3rem; } .mn-radial-lg { --_s: 6.5rem; --_t: .6rem; }",
  "js": "const paintProgress = (el) => {\n  const v = +el.getAttribute('aria-valuenow'), max = +(el.getAttribute('aria-valuemax') || 100);\n  if (isNaN(v)) return;\n  const pct = Math.max(0, Math.min(100, (v / max) * 100));\n  if (el.classList.contains('mn-radial')) el.style.setProperty('--_v', pct);\n  else el.style.setProperty('--_v', pct + '%');\n};\nregister('progress', (root) => {\n  each(root, '.mn-progress, .mn-radial', 'Prg', (el) => {\n    if (!el.getAttribute('role')) el.setAttribute('role', 'progressbar');\n    if (el.hasAttribute('aria-valuenow') && !el.hasAttribute('aria-valuemin')) el.setAttribute('aria-valuemin', '0');\n    if (el.hasAttribute('aria-valuenow') && !el.hasAttribute('aria-valuemax')) el.setAttribute('aria-valuemax', '100');\n    paintProgress(el);\n  });\n});",
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": "https://mian.ro/dist/mian.js",
    "registryItem": "https://mian.ro/r/radial-progress.json"
  }
}