Progress Bars

Inserting Progress Bars

Create elegant progress bars to show key information or data. Style them easily with a range of different options from size to colors and more.

Step 1: Switch To Backend Editor

To insert progress bars, start by clicking the button "Backend Editor" button then click the "+"(Add Element) button, for example:

VC Editor Backend
Step 2: Select Progress Bar

Click "Progress Bar" in the Visual Composer Modal to insert progress bars, for example:

Progress Bars Settings
Step 3: Edit Progress Bar Settings

Once the progress bar element has been inserted click the Edit Link(pen icon) of the progress bar, for example:

Progress Bars Settings

Here is an overview of available progress bar options:

  • Label

    Progress bar title.

  • Hide Percentage

    Whether the bar percentage should be hidden or shown.

  • Percentage

    Width of the progress bar in percentage. Possible values range from 0-100.

  • Animate

    Whether the bar animate upon entering the viewport.

  • Extra Class Name

    If you wish to style this component differently, then use the extra class name field to add one or several class names and then refer to it in your css file.

  • Progress Bar Size

    Determines whether progress bar should be small, medium, large or extra large in size.

  • Progress Bar Style

    Whether progress bar should have sharp corners, rounded corners, or be pill shaped.

  • Color Options

    Track background color
    Track border color
    Bar background color
    Bar border color
    Text Color

Can't find what you're looking for? Submit a request in our forum.