{
"componentDescription": "## ARIA\n\nIf the progress bar is describing the loading progress of a particular region of a page,\nyou should use `aria-describedby` to point to the progress bar, and set the `aria-busy`\nattribute to `true` on that region until it has finished loading.",
"propDescriptions": {
"color": {
"description": "The color of the component. It supports those theme colors that make sense for this component."
},
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"determinate": {
"description": "The boolean to select a variant. Use indeterminate when there is no progress value."
},
"size": {
"description": "The size of the component. It accepts theme values between 'sm' and 'lg'."
},
"slotProps": { "description": "The props used for each slot inside." },
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
},
"thickness": { "description": "The thickness of the circle." },
"value": {
"description": "The value of the progress indicator for the determinate variant. Value between 0 and 100."
},
"variant": {
"description": "The global variant to use."
}
},
"classDescriptions": {
"colorContext": {
"description": "Class name applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the root element",
"conditions": "color inversion is triggered"
},
"colorDanger": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "color=\"danger\""
},
"colorNeutral": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "color=\"neutral\""
},
"colorPrimary": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "color=\"primary\""
},
"colorSuccess": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "color=\"success\""
},
"colorWarning": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "color=\"warning\""
},
"determinate": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "determinate is true"
},
"sizeLg": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "size=\"lg\""
},
"sizeMd": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "size=\"md\""
},
"sizeSm": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "size=\"sm\""
},
"variantOutlined": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"outlined\""
},
"variantPlain": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"plain\""
},
"variantSoft": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"soft\""
},
"variantSolid": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "variant=\"solid\""
}
},
"slotDescriptions": {
"progress": "The component that renders the progress.",
"root": "The component that renders the root.",
"svg": "The component that renders the svg.",
"track": "The component that renders the track."
}
}