Add Progress Bar component

demo/progress/run.py

@@ -0,0 +1,28 @@
+import gradio as gr
+import random
+import time
+
+
+with gr.Blocks() as demo:
+    btn = gr.Button("Go")
+    progress = gr.ProgressBar(visible=False)
+    num = gr.Number()
+
+    def dummy():
+        yield {progress: gr.ProgressBar.update(value=0, visible=True)}
+        total_duration = random.randint(3, 10)
+        duration = 0
+        while duration < total_duration:
+            yield {progress: duration / total_duration}
+            time.sleep(1)
+            duration += 1
+        yield {
+            progress: gr.ProgressBar.update(visible=False),
+            num: random.randint(0, 100),
+        }
+
+    btn.click(dummy, None, {num, progress})
+
+
+if __name__ == "__main__":
+    demo.queue().launch()

gradio/__init__.py

@@ -34,6 +34,7 @@
     Model3D,
     Number,
     Plot,
+    ProgressBar,
     Radio,
     Slider,
     State,

gradio/components.py

@@ -2915,6 +2915,51 @@ def style(self, *, full_width: Optional[bool] = None, **kwargs):
         return IOComponent.style(self, **kwargs)
 
 
+@document()
+class ProgressBar(IOComponent, SimpleSerializable):
+    """
+    Used to create a progress bar, with a value between 0 and 1 representing progress level, or None indicating unknown progress duration.
+
+    Preprocessing: passes the progress value as a {float} into the function
+    Postprocessing: expects a {float} between 0 and 1 to be returned from a function, which is set as the progress level.
+    Demos: blocks_xray
+    """
+
+    def __init__(
+        self,
+        value: float | None = 0,
+        *,
+        visible: bool = True,
+        elem_id: Optional[str] = None,
+        **kwargs,
+    ):
+        """
+        Parameters:
+            value: Default text for the button to display. If callable, the function will be called whenever the app loads to set the initial value of the component.
+            visible: If False, component will be hidden.
+            elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+        """
+        IOComponent.__init__(
+            self, visible=visible, elem_id=elem_id, value=value, **kwargs
+        )
+
+    def get_config(self):
+        return {
+            "value": self.value,
+            **Component.get_config(self),
+        }
+
+    @staticmethod
+    def update(
+        value: Optional[str] = _Keywords.NO_VALUE,
+        visible: Optional[bool] = None,
+    ):
+        return {
+            "visible": visible,
+            "value": value,
+            "__type__": "update",
+        }
+
 @document("change", "submit", "style")
 class ColorPicker(Changeable, Submittable, IOComponent, SimpleSerializable):
     """

ui/packages/app/src/components/ProgressBar/ProgressBar.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let value: number = 0;
+	export let visible: boolean = true;
+	$: _value = (Math.max(Math.min(1, value), 0) * 100).toFixed(1);
+</script>
+
+<div
+	class="w-full bg-gray-50 dark:bg-gray-700 h-9 relative rounded flex justify-center items-center"
+	class:hidden={visible === false}
+>
+	<div class="absolute top-0 left-0 h-full w-full rounded">
+		<div
+			class="h-full rounded bg-gradient-to-b from-orange-500 to-orange-600 text-center truncate transition-all z-10"
+			style="width: {_value}%"
+		/>
+	</div>
+	<div class="py-0.5 px-2 bg-gray-900 bg-opacity-40 z-10 rounded-sm font-mono">{_value}%</div>
+</div>

ui/packages/app/src/components/ProgressBar/index.ts

@@ -0,0 +1,8 @@
+export { default as Component } from "./ProgressBar.svelte";
+export const modes = ["static", "dynamic"];
+
+export const document = (config: Record<string, any>) => ({
+	type: "number",
+	description: "progress level between 0 and 1",
+	example_data: 0.5
+});

ui/packages/app/src/components/directory.ts

@@ -27,6 +27,7 @@ export const component_map = {
 	model3d: () => import("./Model3D"),
 	number: () => import("./Number"),
 	plot: () => import("./Plot"),
+	progressbar: () => import("./ProgressBar"),
 	radio: () => import("./Radio"),
 	row: () => import("./Row"),
 	slider: () => import("./Slider"),