Progress Bar
Progress Bars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way. They can represent either determinate or indeterminate progress.
Example
from deephaven import ui
@ui.component
def ui_progress_bar():
return ui.progress_bar(is_indeterminate=True)
progress_bar = ui_progress_bar()
UI Recommendations
- Use the appropriate size based on the parent’s size.
- Use
static_color="white"orstatic_color="black"if necessary to ensure 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.progress_bar(value=50),
ui.progress_bar(value=50, min_value=25, max_value=125),
]
progress_bar_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_bar(is_indeterminate=True)
progress_bar_indeterminate_example = indeterminate_variant()
Size
Progress Bar comes in two different sizes determined by the size prop: "S" and "L". By default, the size is "L".
from deephaven import ui
@ui.component
def size_variants():
return [
ui.progress_bar(value=70, size="S"),
ui.progress_bar(value=70),
]
progress_bar_size_examples = size_variants()
Static Color
The static_color prop can be used to control the color of the progress bar between the default color, "black", and "white".
from deephaven import ui
@ui.component
def color_variants():
return ui.flex(
ui.view(ui.progress_bar(value=70, margin="10px")),
ui.view(
ui.progress_bar(value=70, static_color="white", margin="10px"),
background_color="black",
),
ui.view(
ui.progress_bar(value=70, static_color="black", margin="10px"),
background_color="white",
),
direction="column",
)
progress_bar_color_examples = color_variants()
API Reference
ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way. They can represent either determinate or indeterminate progress.
Returns: Element The rendered ProgressBar element.
| Parameters | Type | Default | Description |
|---|---|---|---|
| size | Literal['S', 'L'] | 'L' | How thick the bar should be. |
| static_color | Literal['white', 'black'] | None | None | The static color style to apply. Useful when the button appears over a color background. |
| label_position | Literal['top', 'side'] | 'top' | The label's overall position relative to the element it is labeling. |
| show_value_label | bool | None | None | Whether the value label should be displayed. True by default if the label is provided. |
| label | None | bool | int | str | Element | List[NodeType] | None | The content to display as the label. |
| value_label | None | bool | int | str | Element | List[NodeType] | None | The content to display as the value's label. |
| 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. |
| is_indeterminate | bool | None | None | Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction. |
| key | str | None | None | A unique identifier used by React to render elements in a list. |