{
  "element": "nve-progress-ring",
  "entrypoint": "@nvidia-elements/core/progress-ring/progress-ring.examples.json",
  "items": [
    {
      "id": "progress-ring",
      "name": "Default",
      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-progress-ring status=\"accent\"></nve-progress-ring>\n\n  <nve-progress-ring status=\"accent\" value=\"66\"></nve-progress-ring>\n</div>\n",
      "summary": "Circular progress indicators showing indeterminate loading state and determinate completion progress.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "progress-ring-values",
      "name": "Values",
      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-progress-ring status=\"accent\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" value=\"0\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" value=\"33\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" value=\"66\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" value=\"100\"></nve-progress-ring>\n</div>\n",
      "summary": "Progress rings displaying completion percentages from indeterminate to 0%, 33%, 66%, and 100%.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "progress-ring-max",
      "name": "Max",
      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-progress-ring status=\"accent\" max=\"20\" value=\"5\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" max=\"20\" value=\"10\"></nve-progress-ring>\n\n  <nve-progress-ring status=\"accent\" max=\"20\" value=\"15\"></nve-progress-ring>\n</div>\n",
      "summary": "Progress rings with custom max values for proportional progress within a defined scale.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "progress-ring-status",
      "name": "Status",
      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-progress-ring status=\"warning\" value=\"75\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" value=\"75\"></nve-progress-ring>\n  <nve-progress-ring status=\"warning\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\"></nve-progress-ring>\n</div>\n",
      "summary": "Progress rings with warning and danger status colors for indicating critical or cautionary states.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "progress-ring-with-text",
      "name": "WithText",
      "template": "<div nve-layout=\"row gap:xs align:vertical-center\" nve-text=\"medium\">\n  <nve-progress-ring status=\"accent\" size=\"xs\" aria-labelledby=\"processing-label\"></nve-progress-ring>\n  <span id=\"processing-label\">Processing...</span>\n</div>\n",
      "summary": "Progress ring paired inline with descriptive text label for communicating loading state.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "progress-ring-slotted-icon",
      "name": "SlottedIcon",
      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-progress-ring status=\"accent\">\n    <nve-icon name=\"pause\" status=\"accent\"></nve-icon>\n  </nve-progress-ring>\n</div>\n",
      "summary": "Progress ring with custom status icon slotted in the center for enhanced visual communication.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "progress-ring-sizing",
      "name": "Sizing",
      "template": "<div nve-layout=\"row gap:sm pad:md\">\n  <nve-progress-ring status=\"accent\" size=\"xxs\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"xs\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"sm\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"md\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"lg\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"xl\"></nve-progress-ring>\n</div>\n<div nve-layout=\"row gap:sm pad:md\">\n  <nve-progress-ring status=\"danger\" size=\"xxs\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" size=\"xs\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" size=\"sm\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" size=\"md\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" size=\"lg\"></nve-progress-ring>\n</div>\n",
      "summary": "Progress rings in many sizes from extra-extra-small to extra-large for different UI contexts.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "progress-ring-with-button",
      "name": "WithButton",
      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-button>\n    <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n    Button\n  </nve-button>\n  <nve-button interaction=\"emphasis\">\n    <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n    Button\n  </nve-button>\n  <nve-button interaction=\"destructive\">\n    <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n    Button\n  </nve-button>\n  <nve-button>\n    <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n    Button\n  </nve-button>\n  <nve-button interaction=\"emphasis\">\n    <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n    Button\n  </nve-button>\n  <nve-button interaction=\"destructive\">\n    <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n    Button\n  </nve-button>\n</div>\n",
      "summary": "Progress rings integrated within buttons to show loading states during actions and operations.",
      "description": "",
      "composition": false,
      "tags": []
    }
  ]
}