diff --git a/CHANGELOG.md b/CHANGELOG.md index 79b319a6e..b035cbc79 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,7 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/). -## Unrelased +## Unreleased ### Added diff --git a/docs/widget_gallery.md b/docs/widget_gallery.md index 7a9d40e29..fe4ea065d 100644 --- a/docs/widget_gallery.md +++ b/docs/widget_gallery.md @@ -158,6 +158,17 @@ Display placeholder content while you are designing a UI. ```{.textual path="docs/examples/widgets/placeholder.py"} ``` +## ProgressBar + +A configurable progress bar with ETA and percentage complete. + +[ProgressBar reference](./widgets/progress_bar.md){ .md-button .md-button--primary } + + +```{.textual path="docs/examples/widgets/progress_bar.py" press="tab,5,0,tab,enter"} +``` + + ## RadioButton A simple radio button. diff --git a/docs/widgets/progress_bar.md b/docs/widgets/progress_bar.md index 1544686a6..560d9d8df 100644 --- a/docs/widgets/progress_bar.md +++ b/docs/widgets/progress_bar.md @@ -106,27 +106,22 @@ Refer to the [section below](#styling-the-progress-bar) for more information. ## Reactive Attributes -| Name | Type | Default | Description | -|------|------|---------|-------------| -| `percentage` | `float | None` | `None` | The read-only percentage of progress that has been made. This is `None` if the `total` hasn't been set. | -| `progress` | `float` | `0` | 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] +| Name | Type | Default | Description | +| ------------ | ------- | ------- | ------------------------------------------------------------------------------------------------------- | +| `percentage` | `float | None` | The read-only percentage of progress that has been made. This is `None` if the `total` hasn't been set. | +| `progress` | `float` | `0` | The number of steps of progress already made. | +| `total` | `float | None` | The total number of steps that we are keeping track of. | ## Styling the Progress Bar The progress bar is composed of three sub-widgets that can be styled independently: -| Widget name | ID | Description | -|-------------|----|-------------| -| `Bar` | `#bar` | The bar that visually represents the progress made. | -| `PercentageStatus` | `#percentage` | [Label](./label.md) that shows the percentage of completion. | -| `ETAStatus` | `#eta` | [Label](./label.md) that shows the estimated time to completion. | +| Widget name | ID | Description | +| ------------------ | ------------- | ---------------------------------------------------------------- | +| `Bar` | `#bar` | The bar that visually represents the progress made. | +| `PercentageStatus` | `#percentage` | [Label](./label.md) that shows the percentage of completion. | +| `ETAStatus` | `#eta` | [Label](./label.md) that shows the estimated time to completion. | ### Bar Component Classes