Implement a Progress Bar widget.

docs/examples/widgets/progress_bar.css

@@ -0,0 +1,22 @@
+Container {
+    overflow: hidden hidden;
+    height: auto;
+}
+
+Center {
+    margin-top: 1;
+    margin-bottom: 1;
+    layout: horizontal;
+}
+
+ProgressBar {
+    padding-left: 3;
+}
+
+Input {
+    width: 16;
+}
+
+VerticalScroll {
+    height: auto;
+}

docs/examples/widgets/progress_bar.py

@@ -0,0 +1,40 @@
+from textual.app import App, ComposeResult
+from textual.containers import Center, VerticalScroll
+from textual.widgets import Button, Header, Input, Label, ProgressBar
+
+
+class FundingProgressApp(App[None]):
+    CSS_PATH = "progress_bar.css"
+
+    TITLE = "Funding tracking"
+
+    def compose(self) -> ComposeResult:
+        yield Header()
+        with Center():
+            yield Label("Funding: ")
+            yield ProgressBar(total=100, hide_eta=True)  # (1)!
+        with Center():
+            yield Input(placeholder="$$$")
+            yield Button("Donate")
+
+        yield VerticalScroll(id="history")
+
+    def on_button_pressed(self) -> None:
+        self.add_donation()
+
+    def on_input_submitted(self) -> None:
+        self.add_donation()
+
+    def add_donation(self) -> None:
+        text_value = self.query_one(Input).value
+        try:
+            value = int(text_value)
+        except ValueError:
+            return
+        self.query_one(ProgressBar).advance(value)
+        self.query_one(VerticalScroll).mount(Label(f"Donation for ${value} received!"))
+        self.query_one(Input).value = ""
+
+
+if __name__ == "__main__":
+    FundingProgressApp().run()

docs/widgets/progress_bar.md

@@ -0,0 +1,60 @@
+# ProgressBar
+
+
+A widget that displays progress on a time-consuming task.
+
+- [ ] Focusable
+- [ ] Container
+
+## Example
+
+The example below shows a simple app with a progress bar that is keeping track of a fictitious funding level for an organisation.
+
+=== "Output"
+
+    ```{.textual path="docs/examples/widgets/progress_bar.py"}
+    ```
+
+=== "Output (partial funding)"
+
+    ```{.textual path="docs/examples/widgets/progress_bar.py" press="tab,1,5,enter,2,0,enter"}
+    ```
+
+=== "Output (full funding)"
+
+    ```{.textual path="docs/examples/widgets/progress_bar.py" press="tab,1,5,enter,2,0,enter,6,5,enter"}
+    ```
+
+=== "progress_bar.py"
+
+    ```python hl_lines="15"
+    --8<-- "docs/examples/widgets/progress_bar.py"
+    ```
+
+    1. We create a progress bar with a total of `100` steps and we hide the ETA countdown because we are not keeping track of a continuous, uninterrupted task.
+
+=== "progress_bar.css"
+
+    ```sass
+    --8<-- "docs/examples/widgets/progress_bar.css"
+    ```
+
+
+## Reactive Attributes
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `progress` | `float | None` | `None` | The number of steps of progress already made. |
+| `total` | `float | None` | `None` | The total number of steps that we are keeping track of. |
+
+## Messages
+
+- [ProgressBar.Completed][textual.widgets.ProgressBar.Completed]
+- [ProgressBar.Started][textual.widgets.ProgressBar.Started]
+
+---
+
+
+::: textual.widgets.ProgressBar
+    options:
+      heading_level: 2

mkdocs-nav.yml

@@ -146,6 +146,7 @@ nav:
       - "widgets/markdown.md"
       - "widgets/option_list.md"
       - "widgets/placeholder.md"
+      - "widgets/progress_bar.md"
       - "widgets/radiobutton.md"
       - "widgets/radioset.md"
       - "widgets/static.md"

src/textual/renderables/underline_bar.py → src/textual/renderables/bar.py

@@ -5,7 +5,7 @@
 from rich.text import Text
 
 
-class UnderlineBar:
+class RenderableBar:
     """Thin horizontal bar with a portion highlighted.
 
     Args:
@@ -119,18 +119,18 @@ def frange(start, end, step):
     end_range = frange(10, 20, step)
     ranges = zip(start_range, end_range)
 
-    console.print(UnderlineBar(width=20), f"   (.0, .0)")
+    console.print(RenderableBar(width=20), f"   (.0, .0)")
 
     for range in ranges:
         color = random.choice(list(ANSI_COLOR_NAMES.keys()))
         console.print(
-            UnderlineBar(range, highlight_style=color, width=20),
+            RenderableBar(range, highlight_style=color, width=20),
             f"   {range}",
         )
 
     from rich.live import Live
 
-    bar = UnderlineBar(highlight_range=(0, 4.5), width=80)
+    bar = RenderableBar(highlight_range=(0, 4.5), width=80)
     with Live(bar, refresh_per_second=60) as live:
         while True:
             bar.highlight_range = (

src/textual/widgets/__init__.py

@@ -26,6 +26,7 @@
     from ._option_list import OptionList
     from ._placeholder import Placeholder
     from ._pretty import Pretty
+    from ._progress_bar import ProgressBar
     from ._radio_button import RadioButton
     from ._radio_set import RadioSet
     from ._static import Static
@@ -55,6 +56,7 @@
     "OptionList",
     "Placeholder",
     "Pretty",
+    "ProgressBar",
     "RadioButton",
     "RadioSet",
     "Static",

src/textual/widgets/__init__.pyi

@@ -16,6 +16,7 @@ from ._markdown import MarkdownViewer as MarkdownViewer
 from ._option_list import OptionList as OptionList
 from ._placeholder import Placeholder as Placeholder
 from ._pretty import Pretty as Pretty
+from ._progress_bar import ProgressBar as ProgressBar
 from ._radio_button import RadioButton as RadioButton
 from ._radio_set import RadioSet as RadioSet
 from ._static import Static as Static