# swc-progress-circle

Progress circles show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way.

```js
import '@adobe/spectrum-wc/components/progress-circle/index.js';
// <swc-progress-circle></swc-progress-circle>
```

## Attributes

| Name           | Type                                     | Default | Description                                                                                                                                            |
| -------------- | ---------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `static-color` | `ProgressCircleStaticColor \| undefined` | -       | Static color variant for use on different backgrounds. When set to 'white', the component uses white styling for images with a dark tinted background. |
| `size`         | `ElementSize`                            | -       | The size of the progress circle.                                                                                                                       |
| `label`        | `string`                                 | `''`    | Accessible label for the progress circle. Used to provide context about what is loading or progressing.                                                |
| `progress`     | `number \| null`                         | `null`  | Progress value from 0 to 100. When `null` (indeterminate), the component shows a loading animation. Setting a number switches to determinate mode.     |

## CSS Custom Properties

| Name                                       | Description                             |
| ------------------------------------------ | --------------------------------------- |
| `--swc-progress-circle-size`               | Inline and block size of the circle.    |
| `--swc-progress-circle-track-border-color` | Color of the track (background ring).   |
| `--swc-progress-circle-fill-border-color`  | Color of the fill (progress indicator). |
| `--swc-progress-circle-thickness`          | Stroke width of the circle rings.       |