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