Skip to main content

Variable: ProgressBar

const ProgressBar: "ProgressBar"

Defined in: react/src/generated/jsx.ts:14627

Displays the progress of a long-running operation.

GtkProgressBar provides a visual clue that processing is underway. It can be used in two different modes: percentage mode and activity mode.

When an application can determine how much work needs to take place (e.g. read a fixed number of bytes from a file) and can monitor its progress, it can use the GtkProgressBar in percentage mode and the user sees a growing bar indicating the percentage of the work that has been completed. In this mode, the application is required to call [method@Gtk.ProgressBar.set_fraction] periodically to update the progress bar.

When an application has no accurate way of knowing the amount of work to do, it can use the GtkProgressBar in activity mode, which shows activity by a block moving back and forth within the progress area. In this mode, the application is required to call [method@Gtk.ProgressBar.pulse] periodically to update the progress bar.

There is quite a bit of flexibility provided to control the appearance of the GtkProgressBar. Functions are provided to control the orientation of the bar, optional text can be displayed along with the bar, and the step size used in activity mode can be set.

CSS nodes

progressbar[.osd]
├── [text]
╰── trough[.empty][.full]
╰── progress[.pulse]

GtkProgressBar has a main CSS node with name progressbar and subnodes with names text and trough, of which the latter has a subnode named progress. The text subnode is only present if text is shown. The progress subnode has the style class .pulse when in activity mode. It gets the style classes .left, .right, .top or .bottom added when the progress 'touches' the corresponding end of the GtkProgressBar. The .osd class on the progressbar node is for use in overlays like the one Epiphany has for page loading progress.

Accessibility

GtkProgressBar uses the [enum@Gtk.AccessibleRole.progress_bar] role and sets the [enum@Gtk.AccessibleProperty.value_min], [enum@Gtk.AccessibleProperty.value_max] and [enum@Gtk.AccessibleProperty.value_now] properties to reflect the progress.