1. Home
  2. Docs
  3. Content Elements
  4. Progress Bar

Progress Bar

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.

Table of Contents:

  1. How to Activate Progress Bar
  2. How to Configure the Content Settings
    2.1. Layout
  3. How to Style Progress Bar
  4. Final Outcome

1. 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 hereor the ‘+’ section.

Progress Bar

After you are done with Step 1, this is the default layout you are going to see.

Progress Bar

2. 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.

2.1. 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.

Progress Bar

Click to See Live Demo

3.  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’.

Progress Bar

4. Final Outcome

By following the basic steps and a bit more modifying, you can style your Progress Bar in however you want.

Progress Bar

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.

Get Started Now

Tags , , ,

How can we help?