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
from deephaven import ui
@ui.component
def ui_progress_circle():
return ui.progress_circle(is_indeterminate=True)
progress_circle = ui_progress_circle()
UI Recommendations
- Use the appropriate size based on the parent’s size.
- Use
static_color="white"orstatic_color="black"if necessary to make sure the progress circle has enough contrast with the background. - 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.
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.
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".
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".
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.
| Parameters | Type | Default | Description |
|---|---|---|---|
| size | Literal['S', 'M', 'L'] | 'M' | What the progress_circle's diameter should be. |
| static_color | Literal['white', 'black'] | None | None | The static color style to apply. Useful when the button appears over a color background. |
| is_indeterminate | bool | None | None | Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction. |
| value | float | 0 | The current value (controlled). |
| min_value | float | 0 | The smallest value allowed for the input. |
| max_value | float | 100 | The largest value allowed for the input. |
| key | str | None | None | A unique identifier used by React to render elements in a list. |