## RingProgress  
Use the RingProgress component to give feedback to the user about the status of a task with label, sections, etc.  
Category: Feedback  

### Simple Example

Set `sections` prop to an array of:
* `value` - number between 0 and 100 - amount of space filled by segment
* `color` - segment color from theme or any other css color value

```python
import dash_mantine_components as dmc

component = dmc.Group(
    [
        dmc.RingProgress(
            sections=[
                {"value": 40, "color": "cyan"},
                {"value": 15, "color": "orange"},
                {"value": 15, "color": "grape"},
            ]
        ),
        dmc.RingProgress(
            sections=[
                {"value": 40, "color": "#68b5e8"},
                {"value": 15, "color": "#6888e8"},
                {"value": 15, "color": "#8468e8"},
            ]
        ),
    ]
)
```
### Root Color

Use `rootColor` property to change the root color.

```python
import dash_mantine_components as dmc

component = dmc.RingProgress(
    sections=[
        {"value": 40, "color": "yellow"},
    ],
    rootColor="red",
)
```
### Section Tooltips

Hover on the sections to see tooltips in action.

```python
import dash_mantine_components as dmc

component = dmc.RingProgress(
    sections=[
        {"value": 14, "color": "yellow", "label": "Docs", "tooltip": "Docs - 14GB"},
        {"value": 17, "color": "red", "label": "Apps", "tooltip": "Apps - 17GB"},
        {"value": 69, "color": "violet", "label": "Other", "tooltip": "Other - 69GB"},
    ],
)
```
### With label

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Group(
    [
        dmc.RingProgress(
            id="ring-progress-label",
            sections=[{"value": 33, "color": "indigo"}],
            label=dmc.Text("33%", c="indigo", ta="center"),
        ),
        dmc.RingProgress(
            id="ring-progress-label2",
            sections=[
                {"value": 25, "color": "indigo"},
                {"value": 15, "color": "orange"},
            ],
            label=dmc.Text("App data usage", size="xs", ta="center"),
        ),
        dmc.RingProgress(
            id="ring-progress-label3",
            sections=[{"value": 60, "color": "green"}, {"value": 5, "color": "yellow"}],
            label=dmc.Center(
                dmc.ActionIcon(
                    color="teal",
                    variant="light",
                    radius="xl",
                    size="xl",
                    children=DashIconify(icon="tabler:check", height=40),
                )
            ),
        ),
    ]
)
```
### Size, Thickness And Rounded Caps

Use `size`, `thickness`, `roundCaps` props to customize the component.

```python
import dash_mantine_components as dmc

dmc.RingProgress(
    size=120,
    thickness=12,
    roundCaps=False,
    sections=[
        {"value": 40, "color": "red"},
        {"value": 15, "color": "yellow"},
        {"value": 15, "color": "violet"},
    ],
)
```

### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


| Name  | Static selector             | Description    |
|:------|:----------------------------|:---------------|
| root  | .mantine-RingProgress-root  | Root element   |
| svg   | .mantine-RingProgress-svg   | svg element    |
| curve | .mantine-RingProgress-curve | circle element |
| label | .mantine-RingProgress-label | Label element  |


### Keyword Arguments
#### RingProgress

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- label (a list of or a singular dash component, string or number; optional):
    Label displayed in the center of the ring.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- rootColor (optional):
    Color of the root section, key of theme.colors or CSS color value.

- roundCaps (boolean; optional):
    Sets whether the edges of the progress circle are rounded.

- sections (list of dicts; required):
    Ring sections.

    `sections` is a list of dicts with keys:

- size (number; optional):
    Width and height of the progress ring.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- thickness (number; optional):
    Ring thickness.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.