{
  "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file",
  "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json",
  "apiVersion": "1.0.0",
  "name": "Spinner",
  "description": "Spinners are CSS loading indicators that should be shown when retrieving data or performing slow computations.",
  "structure": {
    "name": "root",
    "restrict": [
      "div"
    ],
    "description": "Spinner element",
    "attributes": {
      "static": {
        "role": "status",
        "class": "slds-spinner"
      }
    },
    "children": [
      {
        "name": "assistiveText",
        "restrict": [
          "span"
        ],
        "description": "Screen reader loading text",
        "slot": {
          "name": "assistiveText"
        },
        "attributes": {
          "static": {
            "class": "slds-assistive-text"
          }
        }
      },
      {
        "name": "dotA",
        "restrict": [
          "div"
        ],
        "description": "This creates two of the circles",
        "attributes": {
          "static": {
            "class": "slds-spinner__dot-a"
          }
        }
      },
      {
        "name": "dotB",
        "restrict": [
          "div"
        ],
        "description": "This creates two of the circles",
        "attributes": {
          "static": {
            "class": "slds-spinner__dot-b"
          }
        }
      },
      {
        "name": "container",
        "restrict": [
          "div"
        ],
        "description": "optional overlay container for spinner",
        "attributes": {
          "static": {
            "class": "slds-spinner_container"
          }
        }
      }
    ],
    "modifiers": [
      {
        "name": "colorScheme",
        "attribute": "class",
        "description": "Color scheme for the spinner",
        "default": "default",
        "options": [
          {
            "propValue": "default",
            "value": ""
          },
          {
            "propValue": "brand",
            "value": "slds-spinner_brand",
            "description": "This creates the blue brand spinner"
          },
          {
            "propValue": "inverse",
            "value": "slds-spinner_inverse",
            "description": "This creates the inverse spinner"
          }
        ]
      },
      {
        "name": "size",
        "attribute": "class",
        "description": "Spinner size",
        "default": "medium",
        "options": [
          {
            "propValue": "xx-small",
            "value": "slds-spinner_xx-small",
            "description": "This is the extra extra small spinner"
          },
          {
            "propValue": "x-small",
            "value": "slds-spinner_x-small",
            "description": "This is the extra small spinner"
          },
          {
            "propValue": "small",
            "value": "slds-spinner_small",
            "description": "This is the small spinner"
          },
          {
            "propValue": "medium",
            "value": "slds-spinner_medium",
            "description": "This is the medium spinner"
          },
          {
            "propValue": "large",
            "value": "slds-spinner_large",
            "description": "This is the large spinner"
          }
        ]
      },
      {
        "name": "delayed",
        "attribute": "class",
        "value": "slds-spinner_delayed",
        "description": "Set a delay of 300ms on spinner"
      },
      {
        "name": "inline",
        "attribute": "class",
        "value": "slds-spinner_inline",
        "description": "Returns the spinner back into the document flow"
      }
    ]
  },
  "states": [
    {
      "name": "fixed",
      "type": "boolean",
      "description": "whether the spinner container uses fixed positioning"
    },
    {
      "name": "hidden",
      "type": "boolean",
      "description": "whether the spinner container is visually hidden (fades out, retains space)"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "status-role",
        "description": "Spinner must have role='status' to announce loading state"
      },
      {
        "id": "loading-text",
        "description": "Include assistive text like 'Loading' for screen readers"
      }
    ]
  },
  "extensions": {
    "com.salesforce-ux": {
      "dateAdded": "2015-09-04",
      "genReady": false,
      "lbc": "lightning-spinner"
    }
  },
  "cssSource": "./spinner.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "stateClasses": [
    {
      "state": "fixed",
      "class": "slds-is-fixed"
    },
    {
      "state": "hidden",
      "class": "is-hidden"
    }
  ]
}