Widgets

Progress Bar

Estimated reading: 2 minutes 635 views

It offers different ways to show progress in different areas on your website. Whether you want to display your skills or share stats about your company, it helps you create visually appealing graphics that catch your visitors’ attention. With its attractive design and user-friendly features, the progress bar highlights your accomplishments and growth.

Content

General

  • Skin: Select the layout style of the bar.
  • Skill: Enter the Title to be shown at the top of the progress bar.
  • Percentage: Set the completion percentage number.
  • Show Title: Show or hide the title of the bar.
  • Show Percentage: Show or hide the actual percentage number text at the end of the bar.
Progress Bar: General Settings
Progress Bar: General Settings

Style

General

  • Progress Color: Choose the color of the bar.
  • Background Color: Choose the color of the background of the bar.
Progress Bar: General Style Settings
Progress Bar: General Style Settings

Title

  • Color: Choose the title text color displayed above the progress bar.
  • Typography: Set the typography options of the title text.
Progress Bar: Title Style Settings
Progress Bar: Title Style Settings

Percentage

  • Color: Choose the color of the percentage text displayed above the progress bar.
  • Typography: Set the typography options of the percentage text.
Progress Bar: Percentage Style Settings
Progress Bar: Percentage Style Settings

Check out the Demo page of Progress Bar.

Share this Doc

Progress Bar

Or copy link

CONTENTS