Circle Progress Bar Widget
Use the widget to add circle progress bars to a page.
Content
General
Add a needed amount of elements using +ADD ITEM button or copying items that are already added.
Each Item contains Content and Settings tabs.
In a Content Tab you can set the Progress Bar Value, add a Title and choose the needed icon.
In a Settings Tab you can set a Custom Value, add Value Prefix and Suffix and choose the Line Color and Line Background Color.
Content Items: Choose a desired items to be displayed, i.e. Value, Title and Icon.
Title Tag: Choose a tag from the dropdown.
Global Settings
Columns: Add the number of Columns for desktop, tablet portrait and mobile portrait modes.
Columns Gap: Set a gap between columns for desktop, tablet portrait and mobile portrait modes.
Line Thickness: Set a line thickness.
Background Line Padding: Add a background line padding.
Rotate: Rotate a line in a desired way.
Arch View: Slide to YES to enable arch view.
Round Corners: Slide to YES to enable round corners for a line.
Duration: Set the animation duration in milliseconds.
Step by Step: Slide to YES to make progress bars appear one by one and set a desired delay.
Style
Progress Bar
Box
Background Color: Choose a box background color.
Border Type: Choose a Border Type from the dropdown and set it.
Box Shadow: Choose desired settings from the dropdown.
Border Radius: Set a Box Border Radius.
Padding: Set padding for desktop, tablet portrait and mobile portrait modes.
Progress Line
Line Color: Choose a line color.
Background Line Color: Choose background line color.
Progress Bar Content
Background Color: Choose a desired Background color here.
Border Type: Choose a Border Type from the dropdown and set it.
Box Shadow: Choose desired settings from the dropdown.
Box Size: Set a Box size for for desktop, tablet portrait and mobile portrait modes.
Padding: Set paddings for desktop, tablet portrait and mobile portrait modes.
Value
Typography: Set typography using settings from the dropdown.
Value Color: Set a value color here.
Value Prefix Color: Choose a value prefix color.
Value Suffix Color: Choose a value suffix color.
Gap: Set a gap between elements for desktop, tablet portrait and mobile portrait modes.
Title
Typography: Set typography using settings from the dropdown.
Title Color: Set a title color here.
Gap: Set a gap between elements for desktop, tablet portrait and mobile portrait modes.
Icon
Icon Color: Set an icon color here.
Size: Set an icon size.
Gap: Set a gap between elements for desktop, tablet portrait and mobile portrait modes.
Advanced
Set the Advanced options that are applicable to this widget