# Progress Circle

Progress circles show the progression of a system operation such as downloading, uploading, or processing, in a visual way. They can represent determinate or indeterminate progress.

## Example

```python
from deephaven import ui


@ui.component
def ui_progress_circle():
    return ui.progress_circle(is_indeterminate=True)


progress_circle = ui_progress_circle()
```

## UI Recommendations

1. Use the appropriate size based on the parent’s size.
2. Use `static_color="white"` or `static_color="black"` if necessary to make sure the progress circle has enough contrast with the background.
3. If the value of the progress is unknown, use `is_indeterminate=True`.

## Value

The progress is controlled by the `value`, `min_value`, and `max_value` props. The default values of `min_value` and `max_value` are `0` and `100`, respectively.

```python
from deephaven import ui


@ui.component
def value_variants():
    return ui.flex(
        ui.progress_circle(value=50),
        ui.progress_circle(value=50, min_value=25, max_value=125),
    )


progress_circle_value_examples = value_variants()
```

## Indeterminate

Use `is_indeterminate=True` if the progress can not be determined.

```python
from deephaven import ui


@ui.component
def indeterminate_variant():
    return ui.progress_circle(is_indeterminate=True)


progress_circle_indeterminate_example = indeterminate_variant()
```

## Size

Progress Circle comes in three different sizes determined by the `size` prop: `"S"`, `"M"`, and `"L"`. By default, the size is `"M"`.

```python
from deephaven import ui


@ui.component
def size_variants():
    return ui.flex(
        ui.progress_circle(value=70, size="S"),
        ui.progress_circle(value=70),
        ui.progress_circle(value=70, size="L"),
    )


progress_circle_size_examples = size_variants()
```

## Static Color

The `static_color` prop can be used to control the color of the progress circle between the default color, `"black"`, and `"white"`.

```python
from deephaven import ui


@ui.component
def color_variants():
    return ui.view(
        ui.flex(
            ui.view(ui.progress_circle(value=70, margin="10px")),
            ui.view(
                ui.progress_circle(value=70, static_color="white", margin="10px"),
                background_color="black",
            ),
            ui.view(
                ui.progress_circle(value=70, static_color="black", margin="10px"),
                background_color="white",
            ),
        )
    )


progress_circle_color_examples = color_variants()
```

## API Reference

ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way. They can represent determinate or indeterminate progress.

**Returns:** `Element` The rendered ProgressCircle element.

<ParamTable param={{"module_name": "deephaven.ui.", "name": "progress_circle", "parameters": [{"name": "size", "type": "Literal['S', 'M', 'L']", "description": "What the progress_circle's diameter should be.", "default": "'M'"}, {"name": "static_color", "type": "Literal['white', 'black'] | None", "description": "The static color style to apply. Useful when the button appears over a color background.", "default": "None"}, {"name": "is_indeterminate", "type": "bool | None", "description": "Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction.", "default": "None"}, {"name": "value", "type": "float", "description": "The current value (controlled).", "default": "0"}, {"name": "min_value", "type": "float", "description": "The smallest value allowed for the input.", "default": "0"}, {"name": "max_value", "type": "float", "description": "The largest value allowed for the input.", "default": "100"}, {"name": "flex", "type": "str | float | bool | None", "description": "When used in a flex layout, specifies how the element will grow or shrink to fit the space available.", "default": "None"}, {"name": "flex_grow", "type": "float | None", "description": "When used in a flex layout, specifies how much the element will grow to fit the space available.", "default": "None"}, {"name": "flex_shrink", "type": "float | None", "description": "When used in a flex layout, specifies how much the element will shrink to fit the space available.", "default": "None"}, {"name": "flex_basis", "type": "str | float | None", "description": "When used in a flex layout, specifies the initial size of the element.", "default": "None"}, {"name": "align_self", "type": "Literal['auto', 'normal', 'start', 'end', 'center', 'flex-start', 'flex-end', 'self-start', 'self-end', 'stretch'] | None", "description": "Overrides the align_items property of a flex or grid container.", "default": "None"}, {"name": "justify_self", "type": "Literal['auto', 'normal', 'start', 'end', 'flex-start', 'flex-end', 'self-start', 'self-end', 'center', 'left', 'right', 'stretch'] | None", "description": "Specifies how the element is justified inside a flex or grid container.", "default": "None"}, {"name": "order", "type": "int | None", "description": "The layout order for the element within a flex or grid container.", "default": "None"}, {"name": "grid_area", "type": "str | None", "description": "The name of the grid area to place the element in.", "default": "None"}, {"name": "grid_row", "type": "str | None", "description": "The name of the grid row to place the element in.", "default": "None"}, {"name": "grid_row_start", "type": "str | None", "description": "The name of the grid row to start the element in.", "default": "None"}, {"name": "grid_row_end", "type": "str | None", "description": "The name of the grid row to end the element in.", "default": "None"}, {"name": "grid_column", "type": "str | None", "description": "The name of the grid column to place the element in.", "default": "None"}, {"name": "grid_column_start", "type": "str | None", "description": "The name of the grid column to start the element in.", "default": "None"}, {"name": "grid_column_end", "type": "str | None", "description": "The name of the grid column to end the element in.", "default": "None"}, {"name": "margin", "type": "str | float | None", "description": "The margin to apply around the element.", "default": "None"}, {"name": "margin_top", "type": "str | float | None", "description": "The margin to apply above the element.", "default": "None"}, {"name": "margin_bottom", "type": "str | float | None", "description": "The margin to apply below the element.", "default": "None"}, {"name": "margin_start", "type": "str | float | None", "description": "The margin to apply before the element.", "default": "None"}, {"name": "margin_end", "type": "str | float | None", "description": "The margin to apply after the element.", "default": "None"}, {"name": "margin_x", "type": "str | float | None", "description": "The margin to apply to the left and right of the element.", "default": "None"}, {"name": "margin_y", "type": "str | float | None", "description": "The margin to apply to the top and bottom of the element.", "default": "None"}, {"name": "width", "type": "str | float | None", "description": "The width of the element.", "default": "None"}, {"name": "height", "type": "str | float | None", "description": "The height of the element.", "default": "None"}, {"name": "min_width", "type": "str | float | None", "description": "The minimum width of the element.", "default": "None"}, {"name": "min_height", "type": "str | float | None", "description": "The minimum height of the element.", "default": "None"}, {"name": "max_width", "type": "str | float | None", "description": "The maximum width of the element.", "default": "None"}, {"name": "max_height", "type": "str | float | None", "description": "The maximum height of the element.", "default": "None"}, {"name": "position", "type": "Literal['static', 'relative', 'absolute', 'fixed', 'sticky'] | None", "description": "Specifies how the element is positioned.", "default": "None"}, {"name": "top", "type": "str | float | None", "description": "The distance from the top of the containing element.", "default": "None"}, {"name": "bottom", "type": "str | float | None", "description": "The distance from the bottom of the containing element.", "default": "None"}, {"name": "start", "type": "str | float | None", "description": "The distance from the start of the containing element.", "default": "None"}, {"name": "end", "type": "str | float | None", "description": "The distance from the end of the containing element.", "default": "None"}, {"name": "left", "type": "str | float | None", "description": "The distance from the left of the containing element.", "default": "None"}, {"name": "right", "type": "str | float | None", "description": "The distance from the right of the containing element.", "default": "None"}, {"name": "z_index", "type": "int | None", "description": "The stack order of the element.", "default": "None"}, {"name": "is_hidden", "type": "bool | None", "description": "Whether the element is hidden.", "default": "None"}, {"name": "id", "type": "str | None", "description": "A unique identifier for the element.", "default": "None"}, {"name": "exclude_from_tab_order", "type": "bool | None", "description": "Whether the element should be excluded from the tab order.", "default": "None"}, {"name": "aria_expanded", "type": "Literal['true', 'false'] | bool | None", "description": "Whether the element is expanded.", "default": "None"}, {"name": "aria_haspopup", "type": "Literal['true', 'false'] | bool | Literal['menu', 'listbox', 'tree', 'grid', 'dialog'] | None", "description": "Whether the element has a popup.", "default": "None"}, {"name": "aria_controls", "type": "str | None", "description": "The id of the element that the element controls.", "default": "None"}, {"name": "aria_label", "type": "str | None", "description": "The label for the element.", "default": "None"}, {"name": "aria_labelledby", "type": "str | None", "description": "The id of the element that labels the element.", "default": "None"}, {"name": "aria_describedby", "type": "str | None", "description": "The id of the element that describes the element.", "default": "None"}, {"name": "aria_pressed", "type": "Literal['true', 'false'] | bool | Literal['mixed'] | None", "description": "Whether the element is pressed.", "default": "None"}, {"name": "aria_details", "type": "str | None", "description": "The details for the element.", "default": "None"}, {"name": "UNSAFE_class_name", "type": "str | None", "description": "A CSS class to apply to the element.", "default": "None"}, {"name": "UNSAFE_style", "type": "Dict[str, Any] | None", "description": "A CSS style to apply to the element.", "default": "None"}, {"name": "key", "type": "str | None", "description": "A unique identifier used by React to render elements in a list.", "default": "None"}]}} />