Skip to main content
All CollectionsViz FlowicsBuilding Blocks
Using the Progress Bar Building Block
Using the Progress Bar Building Block
Updated over a week ago

The Progress Bar Building Block allows you to visually represent progress, advancement, or growth.

For example, it's commonly used to compare votes from Mechanics into your Graphics‍ or to show percentage from a Flock To Unlock widget.

To learn how to add elements to the Tree, click here‍.


Use the Inspector‍ (at the right-sidebar) to customize the Progress Bar:

Progress Bar

The Progress Bar has two possible modes: Percentage and Custom Values. The default mode is Percentage and it works by taking the provided value as a fraction of 100.

You can change to Custom Values from the Mode menu to use any value range you desire. This could be useful for example to use the Progress Bar as a velocity indicator.

As you can see in the image, Value, Min and Max are able to be bound to a data provider value. They can also be exposed to the remote control.

In the example above, The Progress Bar value has been bound to the Percentage data coming from a Mechanic Provider.


Opacity: Set the transparency percentage of the Progress Bar element.

Bar Style


  • Use solid color, image or gradient to style the background of Progress Bars.


  • Set the color, image or gradient of the foreground progress bar. This will represent the current percentage of your data.


Style: Defines the sides and style of the border.

Width: Defines how wide the border will be.

Color: Choose a color for the border.

Radius: Increasing this number will round the corners of the rectangle.

Learn how to change these properties specific to borders by clicking here.

Conditional Visibility

Add conditions for showing the progress bar or not. Also useful to highlight the right answer of a Trivia when it gets closed.

Did this answer your question?