feat: ui.progress_bar and ui.progress_circle

plugins/ui/docs/components/progress_bar.md

@@ -0,0 +1,110 @@
+# 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
+
+```python
+from deephaven import ui
+
+
+@ui.component
+def ui_progress_bar():
+    return ui.progress_bar(is_indeterminate=True)
+
+
+progress_bar = ui_progress_bar()
+```
+
+## 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 ensure 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.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.
+
+```python
+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"`.
+
+```python
+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"`.
+
+```python
+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
+
+```{eval-rst}
+.. dhautofunction:: deephaven.ui.progress_bar
+```

plugins/ui/docs/components/progress_circle.md

@@ -0,0 +1,112 @@
+# 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
+
+```{eval-rst}
+.. dhautofunction:: deephaven.ui.progress_circle
+```

plugins/ui/docs/sidebar.json

@@ -57,6 +57,14 @@
             "label": "picker",
             "path": "components/picker.md"
           },
+          {
+            "label": "progress_bar",
+            "path": "components/progress_bar.md"
+          },
+          {
+            "label": "progress_circle",
+            "path": "components/progress_circle.md"
+          },
           {
             "label": "radio_group",
             "path": "components/radio_group.md"

plugins/ui/src/deephaven/ui/components/__init__.py

@@ -32,6 +32,8 @@
 from .number_field import number_field
 from .panel import panel
 from .picker import picker
+from .progress_bar import progress_bar
+from .progress_circle import progress_circle
 from .radio import radio
 from .radio_group import radio_group
 from .range_slider import range_slider
@@ -89,6 +91,8 @@
     "number_field",
     "panel",
     "picker",
+    "progress_bar",
+    "progress_circle",
     "radio",
     "radio_group",
     "range_slider",