Progress circle
Progress circles show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. They can represent determinate or indeterminate progress.
| Property | Values | Default value | Required |
|---|---|---|---|
| variant | default / over background | default | |
| value | yes / no | no | no |
| min value | yes / no | no | no |
| max value | yes / no | no | no |
| size | s / m / l | m | |
| is indeterminate | yes / no | no |
{
"slug": "progress-circle",
"$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
"$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/progress-circle.json",
"title": "Progress circle",
"description": "Progress circles show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. They can represent determinate or indeterminate progress.",
"meta": {
"category": "status",
"documentationUrl": "https://spectrum.adobe.com/page/progress-circle/"
},
"type": "object",
"properties": {
"variant": {
"type": "string",
"enum": [
"default",
"over background"
],
"default": "default"
},
"value": {
"type": "number",
"description": "Not applicable when indeterminate."
},
"minValue": {
"type": "number",
"default": 0,
"description": "Not applicable when indeterminate."
},
"maxValue": {
"type": "number",
"default": 1,
"description": "Not applicable when indeterminate."
},
"size": {
"type": "string",
"enum": [
"s",
"m",
"l"
],
"default": "m"
},
"isIndeterminate": {
"type": "boolean",
"default": false
}
}
}