Progress Circle control is a dynamic visualization tool within Yeeflow designed to enhance user interaction by displaying task completion in a visually appealing circular format. This control is especially useful for tasks that benefit from a compact, round progress indicator.
Creating a Progress Circle
Firstly, find the Progress Circle control in the controls add panel,. Then, drag and drop it into a section or container on your page.
The Progress Circle control will insert a circular progress bar into your layout. Each new circle will require separate settings adjustments.
Content Settings
Consequently, open the Content > Progress Circle block, and in the value type dropdown, where you can set to Percent or Absolute.
1. Percent v-Based Progress
Value Type: Set as "Percent" to indicate progress as a percentage.
Current Percent: Adjustable slider to define the current completion status as a percentage, e.g., 50.00%. Or click the switch button to set dynamic contents.
Percent Position: Choose to display the percentage inside or outside the circle or none.
Counter Title: Field to input a title or label associated with the counter, customizable for dynamic content.
Title Position: Placed the title inside or outside the circle or none.
Progress Line: Selected as "Flat" or "Rounded" for the progress line, visually making circular progress indicator appealing.
2. Absolute Value-Based Progress
Value Type: Change to "Absolute" for situations where a precise numeric value is more informative than a percentage.
Current Value: Allows for input of the exact progress point, e.g., 50 out of a maximum. Or click the switch button to set dynamic contents.
Max Value: Defines the total or end-point value, e.g., 100, representing the goal or completion point. Or click the switch button to set dynamic contents.
Value Position: Keeps the value inside or outside the circle or none.
Counter Title: Field to input a title or label associated with the counter, customizable for dynamic content.
Title Position: Placed the title inside or outside the circle or none.
Progress Line Style: Selected as "Flat" or "Rounded" for the progress line, visually making circular progress indicator appealing.
Display dynamic content
You can set dynamic contents for Current percent, Counter Title, Current value and Max value 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 Circle
Progress Circle
Circle Size: Adjustable size, determining the overall diameter of the circle.
Stroke Value Width: Set to define the thickness of the progress line.
Stroke Background Width: Set to match the thickness for a uniform look.
Circle Fill Color: Option to choose the fill color inside the circle.
Stroke Background Color: Color selection for the background part of the stroke.
Stroke Value Color: Color setting for the progress part of the stroke.
Shadow: A toggle to enable or disable shadow effects.
Animation Duration: Adjusts how long the filling animation takes to complete.
Number style
Color: Chooses the color of the numerical percentage display.
Typography: Sets the font style and size for the number.
Padding: Adjusts spacing around the number, with options for top, right, bottom, and left padding.
Title style
Color: Choose the color of the title text that is displayed inside/outside the progress circle
Typography: Set the typography options of the title text
Padding: Configures the padding around the title text.
Advanced Settings
Set the Advanced options that are applicable to this control.