BLOCKS: Progress Bar Block

Progress Bar Block

The Progress Bar Block lets you create visual progress bars on a Dashboard, Portal Page, or Public Page. Progress bars give a clear and immediate visual representation of how far along something is, whether that is a project, a goal, a usage limit, or any other measurable metric. Values can be entered manually or pulled dynamically from Number Type Custom Fields.

What This Block Is Used For

Use this block whenever you want to display progression or completion visually. It is particularly effective for showing users how much of something has been completed or consumed at a glance.

Show a Client the progress of their project or onboarding steps.
Display usage data such as hours consumed out of a total package.
Visualise goal completion or performance metrics on a staff dashboard.
Pull live data from Number Type Custom Fields so progress bars update automatically as values change.
Display multiple progress bars together to compare several metrics side by side.

How to Add This Block

1. Open the Content Block Editor on the page or portal you wish to edit.

2. Click the Add Block (+) button to open the block selection menu.

3. Select Progress Bar from the list.

Once added, the block will appear in your layout. Alternatively, click the pencil (edit) icon in the block toolbar to open the block options at anytime.

How to Configure the Block

After clicking the edit icon, the Progress Bar Options modal will appear with three tabs: Block Options, Style Options, and Access Options and it will automatically open in the General Tab.

Title: Optionally enter a title to be displayed above the progress bar or bars. Leave this blank if you do not want a title shown.

Values: Add and manage the data points that will appear as individual progress bars. Click the Add New Value button to create a new bar. For each value you can configure the following:

Label - The name displayed alongside the progress bar.
Source Type - Choose between entering a manual number value or pulling data automatically from a Number Type Custom Field.
Value - Enter the current numerical value manually, or select the Custom Field to pull the data from by selecting the relevant Custom Field from the dropdown

Color - Choose a colour for this progress bar. Simply click the color to open the color wheel or add your HEX code to the box.

You can reorder, edit, duplicate, or delete values at any time using the icons displayed alongside each value.

Completed Value: Enter the number that represents a fully completed bar. For example, if you enter 100, a value of 50 will show as half of the bar. If you enter 500, a value of 50 will show as one tenth of the bar. The default completed value is 100.

Show Value: By default the progress bar will not show the current value as text. Toggle this ON to display the value alongside the bar. You can also choose a unit to accompany it, such as %, /100, or hours.

Progress Type: Choose between displaying the progress bar as a straight horizontal line or as an arc in a doughnut shape.

Progress Styles: Apply a stripe effect to your progress bars for additional visual interest. You can also animate the stripes to move left or right.

Label Styles: Configure the colour, font style, and size of the text displayed inside or alongside the progress bar. You can also make the text bold. If you have multiple progress bars in different colours and the label text is hard to read, use the Invert Label Color option to automatically improve contrast.

Width and Height: Enter size values in pixels or as a percentage to control how large the progress bars appear on the page.

Alignment: Align the progress bars to the centre, left, or right of the block.

Padding: Add padding around the content inside the block to control spacing between the progress bars and the block edges.

TIP: Using the Number Type Custom Field source type means your progress bar values will update automatically whenever the Custom Field data changes, without you needing to edit the block manually. This is ideal for dashboards displaying live usage or completion data.

What Users Will See

Visitors on the published page or portal will see one or more animated progress bars displayed at the size and alignment you have configured.

One or more progress bars showing the proportion of completion based on the values and completed value you have set.
Labels identifying each bar, displayed in the font style and colour you have configured.
The current value shown alongside the bar if the Show Value option has been enabled.
Stripe animations if a progress style has been applied.
Live data reflected in the bars if Number Type Custom Fields are being used as the data source.

Best Practices

A well-configured Progress Bar Block gives your users an immediate and intuitive understanding of status and completion without needing to read through detailed reports.

Set a clear and accurate Completed Value so the bar length is meaningful and proportional to the actual data
Use distinct colours for each bar when displaying multiple progress metrics together so users can easily differentiate between them
Enable Show Value and add a unit such as hours or % to give users the exact figure alongside the visual bar
Use Number Type Custom Fields as the data source wherever possible so your progress bars stay current without manual updates
Use the Doughnut progress type for a more visual and modern appearance, particularly on Client-facing portals

TIP: The Progress Bar Block works especially well alongside the Chart Block on reporting or summary pages. Use progress bars for individual metrics and completion tracking, and charts for broader data comparisons, giving your users a comprehensive and visually engaging dashboard experience.

CLICK HERE to learn about the Content Block Editor.

CLICK HERE to learn about all Block Editor Block Types.

CLICK HERE to learn about Custom Fields.