How to Configure and Style EA Progress Bar #
EA Progress Bar lets you easily visualize progression in specific fields with lots of layouts & styling options. With this element, you can showcase your skills or statistical information of your company in an eye-catchy manner.
How to Activate Progress Bar #
To activate this Essential Addons element, find ‘EA Progress Bar‘ from the Search option under the ‘ELEMENTS‘ tab. Simply just Drag & Drop the ‘EA Progress Bar‘ into the ‘Drag widget here‘ or the ‘+’ section.
After you are done with Step 1, this is the default layout you are going to see.
How to Configure the Content Settings #
Under the ‘Content’ tab, you will find the ‘Layout’’ section and choose your preferred layout to get started with EA Progress Bar.
Layout #
You can use the drop-down menu to choose any of your preferred layouts. With Free Version, you will get to select from these 3 layouts: Line, Circle & Half-Circle. Premium version provides 4 more layouts such as Line Rainbow, Circle Fill, Half-Circle Fill & Box.
Besides, you can change the ‘Title’ & the HTML Tag for the Title itself as well. By default, it is set to ‘div’ HTML tag.
You can use the toggle to enable or disable ‘Display Counter’ option. Simply increment or decrement the ‘Counter Value’ to set a number for your progress bar. You can also play around with the ‘Animation Speed’ as well.
Click to See Live Demo #
How to Style Progress Bar #
Switch to the ‘Style’ tab to style all the elements of Progress Bar. ‘Style’ tab is divided into sections such as General, Background, Fill & Typography.
From the ‘General’ section, you can change the alignment of your content. You can play around with the height & width and change the color from the ‘Background’ section.
Moreover, you can change the height of the ‘Fill’ section as well. From the ‘Typography’ section, you are capable of modifying the text & color of the ‘Title’ & ‘Counter’.
Final Outcome #
By following the basic steps and a bit more modifying, you can style your Progress Bar in however you want.
This is how you can easily showcase key data of your personal or company profile using EA Progress Bar.
Getting stuck? Feel to Contact Our Support for further assistance.
