Progress Bar

Implementing progress bars to enhance user experience and visualize task completion, optimizing workflow efficiency within Yeeflow

Updated over a week ago

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

  1. Color: Change the color of the bar

  2. Background: Choose the color of the background of the bar

  3. Height: Specify the progress bar height

  4. Radius: Set the border radius to control corner roundness

  5. Inner Text Color: Choose the color of the text to be displayed within the bar

  6. Inner Text Typography: Choose the Typography of the text to be displayed within the bar

Title style

  1. Color: Choose the color of the title text that is displayed above the progress bar

  2. Typography: Set the typography options of the title text

Advanced Settings

Set the Advanced options that are applicable to this control.

Did this answer your question?