Progress Bar Element
The Progress Bar Element shows a value as a horizontal bar that fills up when it comes into view. It suits skills, project status, survey results, funding goals or stock levels: anything that is best understood as part of a whole.
Next to the bar you can show a label, the active value and the maximum value, each with its own unit, position and typography. The value can be shown as a percentage or as the actual number, for example “350 of 500”.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Progress Bar Element
Add the Progress Bar Element and enter the Active Value and the Maximum Value; the maximum counts as 100%. Value Display Type decides what visitors read: Percentage shows the calculated percentage, Value shows the numbers you entered. Write a label into Active Value Text, add a unit such as % or kg with Active Value Unit, and turn on Display Maximum Value if the total should be visible too.
On the Design tab place each text Above Bar, On Bar or Below Bar and set its alignment and typography. Choose the Progress Bar Height, the Filled Color and Unfilled Color, a border and a border radius. Striped Filling adds diagonal stripes, and Animated Stripes makes them move.
Stock Mode changes how the values are read: the active value counts as “already sold” and the maximum value as “still available”, and both are added up before the percentage is calculated. 100% Filled Color gives a completely filled bar its own color, for example to mark a goal that has been reached. Filling Speed sets how long the fill animation takes, in milliseconds.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Progress Bar. Change them there to style every Progress Bar at once.
General
| Heading | Description |
|---|---|
| Active Value | Use an integer or float here to denote the active value of the progress bar. |
| Maximum Value | Use an integer or float here to denote the maximum value of the progress bar. The value set here will serve as the 100% measure. |
| Value Display Type | Select if you want to display the set values or their corresponding percentage value. |
| Stock Mode | If set to “yes”, the bar will handle active and maximum values as “already sold” and “still available, so the numbers will be added up before the percentage is calculated. |
| Filling Speed | Set the fill animation speed. In milliseconds. |
| Active Value Text | Additional text for the active value. |
| Display Active Value | Select if you want to display the active value. |
| Active Value Unit | Insert a unit for the active value. ex %. |
| Active Value Unit Position | Choose the positioning of the active value unit. |
| Maximum Value Text | Additional text for the maximum value. |
| Display Maximum Value | Select if you want to display the maximum value. |
| Maximum Value Unit | Insert a unit for the maximum value. ex %. |
| Maximum Value Unit Position | Choose the positioning of the maximum value unit. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Active Value Text Position | Select the position of the active value text. Choose “Default” for Global Options selection. |
| Active Value Text Align | Choose the alignment of the active value text. |
| Maximum Value Text Position | Select the position of the maximum value text. Choose “Default” for Global Options selection. |
| Maximum Value Text Align | Choose the alignment of the maximum value text. |
| Active Value Typography | Controls the active value typography. |
| Maximum Value Typography | Controls the maximum value typography. |
| Striped Filling | Choose to get the filled area striped. |
| Animated Stripes | Choose to get the the stripes animated. |
| Progress Bar Height | Insert a height for the progress bar. Enter value including any valid CSS unit, for example 10px. |
| Filled Color | Controls the color of the filled in area. |
| 100% Filled Color | Controls the color of the progress bar when fully filled. |
| Unfilled Color | Controls the color of the unfilled in area. |
| Border Radius | Enter values including any valid CSS unit, for example 10px or 10%. |
| Filled Border Size | In pixels. |
| Filled Border Color | Controls the border color of the filled in area. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Tips
- Always fill in Active Value Text. It is the bar’s label for screen readers, which announce the bar as a progress bar with its percentage.
- The percentage is rounded to a whole number and kept between 0 and 100, so an active value above the maximum simply shows a full bar.
- When the active value and the maximum value text share the same position above or below the bar, they are placed on one line together. Use Active Value Text Align and Maximum Value Text Align to push them to opposite ends.
- With On Bar the text sits inside the filled area. Make the bar tall enough with Progress Bar Height and check the contrast between text and Filled Color.
- Stack several progress bars in one column for a skills or results overview, and keep their colors and heights the same so they are easy to compare.