EB Progress Bar

EB Progress Bar allows you to showcase key information about your company or personal profile. With the help of this element, you can easily visualize progression in specific fields in an eye-catchy manner.

How to Activate EB Progress Bar #

To activate this Essential Blocks element, click on the ‘+’ icon to add a new Block. Afterward, find  ‘Progress Bar’ from the search option. Simply just click on the Block and it will be activated.

EB Progress Bar

After you are done with this step  this is the default layout you are going to see.

EB Progress Bar

How to Configure the Layout Settings #

From this section, you are able to change the percentage of the EB Progress Bar with its height. Simply just the slider to increase or decrease the value. You are able to add your own title for the EB Progress Bar.

EB Progress Bar


Besides, you can use the toggle to display or hide the Progress Bar Title and Percentage. By default, the percentage is shown in a tooltip. If you wish, you can display it inline by turning on the toggle ‘Inline Percentage’. You can even apply Gradient Color for the EB Progress Bar

How to Style EB Progress Bar #

You have the freedom to change the Title Text and the font size of your Title for the Progress Bar. You can also change the color of Title, Tooltip, Percentage and the Background color for the EB Progress Bar

EB Progress Bar


On the other hand, for Gradient Color, you can either choose it to be Linear or Radial. You can add your preferred first and second color.

Moreover, you have the flexibility to change the position of both the colors as well. If you wish, you can even change the angle for how you want your gradient colors to display.

Final Outcome #

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

EB Progress Bar

With the help of EB Progress Bar from Essential Blocks, this is how you can showcase your skills or a key information about your business and grab everyone’s attention.

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

Powered by BetterDocs

Leave a Reply

Your email address will not be published. Required fields are marked *