{"id":11458,"date":"2022-05-27T08:56:04","date_gmt":"2022-05-27T08:56:04","guid":{"rendered":"https:\/\/www.mainbrainer.com\/hc\/knowledge-base\/survey-progress-bar-widget\/"},"modified":"2022-11-24T06:02:56","modified_gmt":"2022-11-24T06:02:56","slug":"survey-progress-bar-widget","status":"publish","type":"ht_kb","link":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/survey\/creator\/progress-bar\/","title":{"rendered":"Survey Progress Bar Widget"},"content":{"rendered":"
\n

The P<\/strong>rogress Bar<\/strong> widget helps you add an animated progress bar to your survey.<\/p>\n

The Progress Bar<\/strong> displays the amount of work a customer has already put in and how much remains to be done to achieve the intended outcome!<\/p>\n

For example<\/strong>, a progress bar can be used to visually indicate the number of assessments the customer needs to take before completing a course and earning a certificate? Or, how many steps remain in a checkout\/signup process?<\/p><\/blockquote>\n

With a Progress Bar<\/strong>, you can remind your customers how much they have completed the survey and nudge them to complete it.<\/p>\n

How to use a Progress Bar in a survey?<\/h2>\n

Step 1 \u2013 Navigate to the Survey Creator<\/h3>\n

Open the Survey Creator to start creating your survey<\/a>.
\n\"Survey<\/p>\n

<\/div>\n

Step 2 \u2013 Add a Progress Bar to the survey<\/h3>\n

To add a progress bar to your survey, drag and drop the Progress Bar widget to the work area.<\/p>\n

<\/div>\n

\"Survey<\/p>\n

<\/div>\n

Step 3 \u2013 Customize the Progress Bar as per your requirements<\/h3>\n

Once you drop the widget in the work area, you\u2019ll see the widget settings on the right side.<\/p>\n

<\/div>\n

\"Survey<\/p>\n

<\/div>\n

Use these settings to customize the Progress Bar as per your requirements. You can:<\/p>\n

    \n
  • Use the Progress Bar Text field to customize the text you want to display along with the progress bar.<\/li>\n
  • Use the \u201c+\u201d and \u201c\u2013\u201d buttons under the Complete Bar<\/strong> field to specify the percentage you want to be shown as complete. Note that the percentage can only be adjusted in increments\/decrements of 5%.<\/li>\n
  • Toggle the Animate Bar button to make the progress bar animated\/static.<\/li>\n
  • Toggle the Progress Bar Text button to display\/hide the progress bar text.<\/li>\n<\/ul>\n

    Step 4 \u2013 Styling the Progress Bar<\/h3>\n

    You can edit the appearance of the progress bar by clicking the Style tab.<\/p>\n

    <\/div>\n

    \"Survey<\/p>\n

    <\/div>\n

    The different design options available are as follows:<\/p>\n

    4.1 Progress Bar Font and Color Settings<\/h4>\n

    \"Survey<\/p>\n

    <\/div>\n
      \n
    • Completed Background Color<\/strong> to change the color of the completed section of the progress bar.<\/li>\n
    • Bar Background Color<\/strong> to change the color of the completed section of the progress bar.<\/li>\n
    • Rounded Corners <\/strong>sizing bar to add rounded corners to the progress bar.<\/li>\n<\/ul>\n

      4.2 Label Text Style<\/strong><\/h4>\n

      \"Survey
      \nUse the options available under this section to edit the font style, color, font family, and font-weight of the Progress Bar text.<\/p>\n

      4.3 Progress Bar Setting <\/strong><\/h4>\n

      \"Survey<\/p>\n

        \n
      • Progress Bar Height <\/strong>sizing bar to adjust the height of the progress bar.<\/li>\n
      • Widget Width<\/strong> sizing bar to adjust the width of the progress bar widget.<\/li>\n
      • Widget Position<\/strong> to change the alignment of the progress bar widget.<\/li>\n
      • Top Bottom Gap<\/strong> for a better visual appeal.<\/li>\n<\/ul>\n

        Click Save <\/strong>and that’s it!<\/p>\n

        You have successfully added a progress bar<\/strong> to your Survey<\/strong>!<\/p>\n