Widgets

Progress Bar

Estimated reading: 2 minutes 586 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

Progress Bar: General Settings
Progress Bar: General Settings
  • 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.

Style

General

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

Title

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

Percentage

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

Check out the Demo page of Progress Bar.

Share this Doc

Progress Bar

Or copy link

CONTENTS