How to Configure and Style Progress Bar #

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 Spexo Addons element, find  ‘Progress Bar‘ from the Search option under the ‘ELEMENTS‘ tab. Simply just Drag & Drop the ‘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 ‘General’ section and choose your preferred layout to get started with Progress Bar.

General #

You can use the drop-down menu to choose any of your preferred layouts. you will get to select from these 2 layouts: Horizontal Line & Circle.

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 change counter position, counter suffix and prefix as well.

Settings #

From the ‘Settings’ section, you can change line size, Animation duration, delay and animation timing for your Progress Bar.

Click to See Live Demo #

How to Style Progress Bar #

Switch to the ‘Style’ tab to style all the elements of Progress Bar.

General #

From the ‘General’ section, you can change the Background color, shadow, Title color, Counter color, Distance, vertical position and Typography of your content.

Moreover, you can set ‘Border’ type, border radius and Rounded line with toggle button as well.

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 Progress Bar.

Getting stuck? Feel to Contact Our Support for further assistance.