Progress Bar control assist you when you need to visualize the information and want the numbers to speak for you. You can use them to display the stages of a process, progress, use it to compare several items, etc.
Creating a Progress Bar
Firstly, find the Progress Bar control in the controls add panel,. Then, drag and drop it into a section or container on your page.
The Progress Bar control will add a single bar to the page. You will have to do all the settings again for each new bar.
Content Settings
Consequently, open the Content > Progress Bar block, and in the Title section type in the text which will be displayed on the top of this progress bar.
Afterward, move on to the Percentage section, where you should specify the state of the progress bar you’re currently editing.
Set Show/Hide in the Display percentage section to control the display the number or not.
Input the Inner Text which will be displayed inside in the progress bar.
Display dynamic content
You can set dynamic contents for Title, Percentage and Inner Text by clicking the switch button at the end of each input field. Then, in click settings button to open the expression editor and build your dynamic contents. For example: display the value of a percent filed in your list, or associate to a numeric variable in your approval form.
Style Progress Bar
Progress Bar
Color: Change the color of the bar
Background: Choose the color of the background of the bar
Height: Specify the progress bar height
Radius: Set the border radius to control corner roundness
Inner Text Color: Choose the color of the text to be displayed within the bar
Inner Text Typography: Choose the Typography of the text to be displayed within the bar
Title style
Color: Choose the color of the title text that is displayed above the progress bar
Typography: Set the typography options of the title text
Advanced Settings
Set the Advanced options that are applicable to this control.