---
meta:
title: Progress Ring
description: Progress rings are used to show the progress of a determinate operation in a circular fashion.
layout: component
---
```html:preview
```
```jsx:react
import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
const App = () => ;
```
## Examples
### Size
Use the `--size` custom property to set the diameter of the progress ring.
```html:preview
```
{% raw %}
```jsx:react
import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
const App = () => ;
```
{% endraw %}
### Track and Indicator Width
Use the `--track-width` and `--indicator-width` custom properties to set the width of the progress ring's track and indicator.
```html:preview
```
{% raw %}
```jsx:react
import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
const App = () => ;
```
{% endraw %}
### Colors
To change the color, use the `--track-color` and `--indicator-color` custom properties.
```html:preview
```
{% raw %}
```jsx:react
import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
const App = () => (
);
```
{% endraw %}
### Labels
Use the `label` attribute to label the progress ring and tell assistive devices how to announce it.
```html:preview
```
```jsx:react
import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
const App = () => ;
```
### Showing Values
Use the default slot to show a label inside the progress ring.
```html:preview
50%
```
{% raw %}
```jsx:react
import { useState } from 'react';
import SlButton from '@shoelace-style/shoelace/dist/react/button';
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
const App = () => {
const [value, setValue] = useState(50);
function adjustValue(amount) {
let newValue = value + amount;
if (newValue < 0) newValue = 0;
if (newValue > 100) newValue = 100;
setValue(newValue);
}
return (
<>
{value}%
adjustValue(-10)}>
adjustValue(10)}>
>
);
};
```
{% endraw %}