Skip to content

Progress Block – a bar filled to a share

The progress block is a horizontal bar filled to a share of its length: how much of something is used up or done. Without a known share it shows a running stripe instead.

This page is part of the form block reference.

1. At a glance
Purpose Shows a share as a bar, or ongoing work as a running stripe
Typical use Consumed part of an SLA time, progress of a checklist, a used quota, an import that is running
Related Label Block, Skeleton Block

It is only the bar – without a title or a number. Put a label beside it where the value has to be read as well.

2. Settings

Setting Meaning Default
"Indeterminate" Shows a stripe running through the bar instead of a share, for work whose extent is not known. "Value" and "Maximum" are then ignored. off
"Value" How far the bar is filled – a number between 0 and the maximum 0
"Maximum" The value at which the bar is full 100 – the value reads as a percentage
"Bar Color" (Appearance) Color of the filled part (or of the stripe) primary color of the theme
"Auto Refresh", "Refresh Interval (s)" Evaluates value and color again on a clock of its own, every given number of seconds off, 30

The unfilled track takes "Background Color", the corner radius and the height of the settings every block has.

3. Behaviour

  • A value below 0 shows an empty bar, a value above the maximum a full one. With a maximum of 0 or less the bar stays empty.
  • For a count, hand over the count and the total – done tasks as "Value", all tasks as "Maximum" – instead of computing a percentage.
  • "Auto Refresh" works as on the Label Block. Use it for a value that moves with the clock.
  • An indeterminate bar that is always visible looks like something that never finishes. Show it with a "Visible" condition only while the work runs.

4. Examples

SLA bar. "Value" = minutes since the ticket was opened, "Maximum" = the SLA in minutes, "Bar Color" = green below 70 %, orange from 70 %, red from 90 %. "Auto Refresh" on, "Refresh Interval (s)" = 60.

Import running. "Indeterminate" on, "Visible" = Import Status = "Running". A second, normal bar with the opposite condition shows the result once it is known.