PageFly - Progress element

446 views PageFly 0

In this article, you’ll learn about the Progress element and how to use it.

About Progress element

Progress element can add more data or statistics to your page. Numbers can be a great help in bumping conversion rates because let’s be honest, who doesn’t like convincing stats?
To use the Progress element, choose the icon named Add element on the left sidebar > ADVANCED > choose the Progress element, and then drag and drop this element into the page editor.
Note that you can search this element by using the search function instead of finding it in the sidebar.

Progress element comes with multiple variations covering most needs. But we will continue to add more variations to help you save time.
Drag a variation to the layout and see how it can be configured.

Progress element configuration

Progress element comes with plenty of parameters allowing you to fine-tune content appearance for the best possible conversion rate.
Select the element ProgressBox in layout to see its parameter

In this article, we will show the parameters of the General and Styling tabs for the Progress element.

General tab’s parameters
1. PROGRESS ITEMSYou can add the progress item(s) and rearrange the order of these item(s)by dragging the 3 dotted icon on the left of the items’ name.
You can also duplicate or remove the progress item(s) from the progress box.
2. ACTIONYou can read more about the ACTION parameter here.
3.ATTRIBUTESThis is a parameter that all elements have. You can read more here.
4. VISIBILITYThis is a parameter that all elements have. You can read more here.
5. ANIMATIONThis is a parameter that all elements have. You can read more here.
Styling tab’s parameters
1. OVERALLYou can read about the OVERALL parameter here.
2. SPACINGYou can read about the SPACING parameter here.
3. TYPOGRAPHYYou can read about the TYPOGRAPHY parameter here.
4. BACKGROUNDYou can read about the BACKGROUND parameter here.
5. BORDERYou can read about the BORDER parameter here.
6. DISPLAYYou can read about the DISPLAY parameter here.
7. CUSTOM CSSYou can read about the CUSTOM CSS parameter here.

Nested elements configuration

Please note that the Progress element is the combination of multiple Progress. To edit each progress bar, choose it separately > go to the General tab.

  • Progress Type: Select bar type: Bar

or Circle

  • Style: Select the style for text: Text

Inside, Text Outside, or Text First

  • Percent: Set the percentage of the


  • Weight: Adjust the bar’s thickness
  • Text: Enter the title for the progress


  • Color: Set color for the text, or bar title
  • Font Size: Set font size for the text, or

bar title

  • Spacing: Set border spacing for 4 sides of the text.
  • Number: Set color for the number of

progress value

  • Active: Set color for the active

progress area

  • Background: Set color for the inactive

progress area, or background

Was this helpful?