Progressbar

Heading - Here you can add the text for the heading. This shortcode allows adding a section with progress bar to the page.

Layouts:

Here you can choose template style for your Progressbar shortcode (Outsourceo Simple, Moovit Inline or Soapy Simple)

Outsourceo Simple Layout:

Content Settings:

Counter value - Please, enter the counter value. Notice: For percentage, specify a value from 0 to 100.

Description - Here you can add the text for the description.

Symbol before percent - Here you can add the symbol before percent.

Symbol after percent - Here you can add the symbol after percent.

Use dot at the end of the number? - This option allows adding the dot at the end of the number.

Use custom font for numbers? - Turn on the switcher if you want to customize the text typography for numbers.

Use custom font for text? - Turn on the switcher if you want to customize the text typography.

Use custom font for description? - Turn on the switcher if you want to customize the description typography.

Align - Please, select the alignment for the counter value and description here.

How to customize typography you can check in Typography Settings Category:

Moovit Inline Layout:

Content Settings:

Counter value - Please, enter the counter value. Notice: For percentage, specify a value from 0 to 100.

Heading - Here you can add the text for the heading.

Use custom font for heading? - Turn on the switcher if you want to customize the text typography for the heading.

Line color - Select the color of the line here from the color palette.

Active line color - Select the color of the active line here from the color palette.

How to customize typography you can check in Typography Settings Category:

Soapy Simple Layout:

Content Settings:

Heading - Here you can add the text for the heading.

Number - Here you can add the text for the number.

Use custom font for numbers? - Turn on the switcher if you want to customize the font for the numbers.

Use custom font for heading? - Turn on the switcher if you want to customize the font for the heading.

How to customize typography you can check in Typography Settings Category: