Progress Bar

General Settings

Element Name/Title

Here you will see the default name/title of the Edit option you are working on. You can decide to leave at that or rename it.

Background Color

If you want to change the background color of your button, you can do that by clicking on the content you want to adjust its background.

Typography Type

Here you can edit the font of your text/content.

Text Options

Percent

This is where you can add/edit the text in your button.

Spacing Option:

for adjusting your Top and Bottom margin. Depending on the Edit option you are working on, the settings will only be applicable to that option.

Theme

You can select a theme from the theme options available here.

Advanced Settings

Border Option:

Border

Decide what type of borderline you want. If you click on any border type aside from "No Border", it drops down more border options;

Style

Select the type of borderline style you want.

Width

Click here to select how thick you want the borderline to be.

Color

Choose a color for your borderline.

Radius

If you don't want your borderline to have a sharp corner edge, you can decide how curvy you want the edge to be by selecting from the radius options.

Radius Edges

Here you can choose which side of the edge you want to adjust; All edges, Top only, or bottom only.

Text Shadow

If you want your text/content to have a shadow, simply select how strong or light you want the shadow to be.

Text Style

Here you can choose what style of text you want, it's either Bold, Italic, or Bold and Italic.

Text Align

You can move your text in different positions as you deem fit, you can position it to the Left, Center, Right, or as Justified.

Box Shadow

Here you can add shadow to your box to make the border visible.

Percent Width

You can increase the width of your progress bar up to 100% (Full width).

Sizes

You can increase the height of the progress bar.

Offset Color

Here you can color the other side of the progress bar.

Visibility

You can decide if you want this particular Edit option to be visible on only mobile devices, desktops, or both by clicking on it to highlight the icon.

Custom Class

Input your custom class here.

CSS Selector

If you need to copy the Custom CSS, just click on the "Copy" icon on the right side of the reference code.