## SemiCircleProgress  
Use the SemiCircleProgress component to represent progress with semi circle diagram  
Category: Feedback  

### Usage

### Simple Example

```python
import dash_mantine_components as dmc

component = dmc.SemiCircleProgress(
      fillDirection="left-to-right",
      orientation="up",
      filledSegmentColor="blue",
      size=200,
      thickness=12,
      value=40,
      label="Label"
)
```
### Change empty segment color

Use `emptySegmentColor` prop to change color of empty segment, it accepts key of theme colors or any valid CSS color value:

```python
import dash_mantine_components as dmc

component = dmc.SemiCircleProgress(
    value=30, emptySegmentColor="var(--mantine-color-dimmed)"
)
```
### Change label position
By default, the `label` is displayed at the bottom of the component, you can change its position to center by using `labelPosition` prop:


```python
import dash_mantine_components as dmc

component = dmc.Stack([
    dmc.SemiCircleProgress( value=30, label="Bottom", mb="xl"),
    dmc.SemiCircleProgress(value=30, label="Center", labelPosition="center")
])
```
### Filled segment transition
By default, transitions are disabled, to enable them, set `transitionDuration` prop to a number of milliseconds:


```python
import random
import dash_mantine_components as dmc
from dash import Input, Output, callback

component = dmc.Box([
    dmc.SemiCircleProgress(value=30, transitionDuration=250, label="30%", id="semi-circle-progress"),
    dmc.Button("Set random value", mt="md", ml=22, id="semi-circle-progress-btn"),

])

@callback(
    Output("semi-circle-progress", "value"),
    Output("semi-circle-progress", "label"),
    Input("semi-circle-progress-btn", "n_clicks")
)
def update(n):
    number = random.randint(1, 100)
    return number, f"{number}%"
```
### 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.


#### Selectors

| Selector       | Static Selector                       | Description                |
|----------------|---------------------------------------|----------------------------|
| `root`         | `.mantine-SemiCircleProgress-root`    | Root element               |
| `svg`          | `.mantine-SemiCircleProgress-svg`     | Root SVG element           |
| `emptySegment` | `.mantine-SemiCircleProgress-emptySegment` | Empty circle segment       |
| `filledSegment`| `.mantine-SemiCircleProgress-filledSegment` | Filled circle segment      |
| `label`        | `.mantine-SemiCircleProgress-label`   | Label element              |

#### CSS Variables

| Selector | Variable                      | Description                                                   |
|----------|-------------------------------|---------------------------------------------------------------|
| `root`   | `--scp-empty-segment-color`   | Color of the empty segment                                    |
|          | `--scp-filled-segment-color`  | Color of the filled segment                                   |
|          | `--scp-rotation`              | Transform styles of the SVG, controlled by `orientation` and `fillDirection` props |
|          | `--scp-thickness`             | Controls `strokeWidth` of the circle                         |
|          | `--scp-transition-duration`   | Controls transition duration of the filled segment           |

#### Data Attributes

| Selector | Attribute       | Value                         |
|----------|-----------------|-------------------------------|
| `label`  | `data-position` | Value of `labelPosition` prop |



### Keyword Arguments
#### SemiCircleProgress

- 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.

- emptySegmentColor (optional):
    Key of `theme.colors` or any valid CSS color value, by default the
    value is determined based on the color scheme value.

- fillDirection (a value equal to: 'right-to-left', 'left-to-right'; optional):
    Direction from which the circle is filled, `'left-to-right'` by
    default.

- filledSegmentColor (optional):
    Key of `theme.colors` or any valid CSS color value,
    `theme.primaryColor` by default.

- 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 rendered inside the circle.

- labelPosition (a value equal to: 'bottom', 'center'; optional):
    Label position relative to the circle center, `'bottom'` by
    default.

- 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.

- orientation (a value equal to: 'up', 'down'; optional):
    Orientation of the circle, `'up'` by default.

- size (number; optional):
    Diameter of the svg in px, `200` by default.

- 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):
    Circle thickness in px, `12` by default.

- transitionDuration (number; optional):
    Transition duration of filled section styles changes in ms, `0` by
    default.

- value (number; required):
    Progress value from `0` to `100`.

- variant (string; optional):
    variant.

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