General Elements

How to Add Progress Bar in Bricks Builder Using BricksFly

Estimated reading: 2 minutes 37 views

BricksFly Progress Bar Element allows you to display progress values using different visual layouts. Follow the steps below to activate the element and configure its layout and percentage settings in Bricks Builder.

Requirement 

Make sure you have installed:

  • Bricks Theme 
  • BricksFly Pro
Add bricks theme
Adding bricksfly pro

Activate Progress Bar in BricksFly

  1. Go to your WordPress Dashboard. 
  2. Click on BricksFly. 
  3. Head to the Elements tab. 
  4. Under General, toggle on Progress Bar.
Activate progress bar

Step 1: Select the Progress Bar Layout

Click the Plus (+) icon and search for the Progress Bar element. Once it appears in the results, drag and drop it into the desired section of your page.

Search progress bar in search field

Layout: Selects the visual style used to display the progress value. Available options include Line, Circle, and Dots.

Line: Displays the progress as a horizontal bar that fills according to the selected percentage.

Circle: Displays the progress in a circular format, filling around the circle based on the selected percentage.

Dots: Displays the progress using a series of dots, with the active dots representing the selected percentage.

For this example, Line is selected. However, you can choose either option based on your preference.

Layout settings option

Step 2: Set the Progress Value

Percentage: Sets the progress value displayed by the Progress Bar Element. For example, setting the value to 75 displays the progress at 75%. However, in this example, 80% is added.

Display Percentage: Displays or hides the percentage value alongside or inside the progress indicator.

Configuration of progress bar

Done! You have successfully configured the BricksFly Progress Bar Element. You can now adjust the layout, percentage value, and display settings based on your design requirements.

Share this Doc

How to Add Progress Bar in Bricks Builder Using BricksFly

Or copy link

CONTENTS