Progress Bar

Progressbar shortcode:

Content Settings:

Templates - Here you can choose template style for the Progressbar (Inline or Counter Simple)

Inline Style

  • Counter value - Please, enter the percentage value from 0 to 100.
  • Heading - Here you can enter the heading text.
  • Use custom font for heading? - Turn on the switch if you want to customize the heading typography
  • Use custom font for text? - Turn on the switch if you want to customize the text typography
  • Line color - Please, select the line color from the palette box.
  • Active line color  - Please, select the active line color from the palette box.
  • Use custom font for numbers? - Turn on the switch if you want to customize the numbers typography
  • Use custom font for description? - Turn on the switch if you want to customize the description typography

Counter Simple

  • Counter value - Please, enter the percentage value from 0 to 100.
  • Heading - Here you can enter the heading text.
  • Use custom font for heading? - Turn on the switch if you want to customize the heading typography
  • Use custom font for numbers? - Turn on the switch if you want to customize the numbers typography
  • Use custom font for description? - Turn on the switch if you want to customize the description typography

    Heading Typography:

    These options is only available if you select the "Use custom font for heading" checkbox in the content settings.

    Text Color - Here you can select heading color from the palette
    Alignment -  - Here you can select the heading alignment.
    Typography item:
    • Family - Here you can select the typography for the heading
    • Size - Here you can set up the heading size 
    • Weight - Please, select the weight for the heading
    • Transform - This option allows to change the case of the text. 
    • Style - Please, select text style for the heading
    • Decoration - Please, select style for the heading decoration
    • Line-Height - Here you can enter a line height for the heading

Text Typography:

These options is only available if you select the "Use custom font for text" checkbox in the content settings.

  • Text Color - Here you can select text color from the palette.
  • Alignment - Here you can select the type of text alignment.
Typography item:
  • Family - Here you can select the typography for the text.
  • Size - Here you can set up the text size.
  • Weight - Please, select the weight for the text.
  • Transform - This option allows to change the case of the text. 
  • Style - Please, select a text style for the text.
  • Decoration - Please, select a style for the text decoration.
  • Line-Height - Here you can enter a line height for the text
  • Letter Spacing - Here you can enter a letter spacing for the text.

Numbers Typography:

Text Color - Here you can select title color from the palette.

Alignment - Here you can select the title alignment.
Typography item:
  • Family - Here you can select the typography for the title.
  • Size - Here you can set up the title size.
  • Weight - Please, select the weight for the title.
  • Transform - This option allows to change the case of the text. 
  • Style - Please, select text style for the title.
  • Decoration - Please, select a style for the title decoration.
  • Line-Height - Here you can enter a line height for the title.

Description Typography:

These options is only available if you select the "Use custom font for description" checkbox in the content settings.

  • Text Color - Here you can select title color from the palette.
  • Alignment - Here you can select the title alignment.
Typography item:
  • Family - Here you can select the typography for the description text.
  • Size - Here you can set up the description text size.
  • Weight - Please, select the weight for the description text.
  • Transform - This option allows to change the case of the description text. 
  • Style - Please, select text style for the description text.
  • Decoration - Please, select a style for the description text decoration.
  • Line-Height - Here you can enter a line height for the description text.