Progress Bars

Overview

The Progress Bar widget allows you to add fully styled progress bars to your page.

These are great for displaying varying types of data and content to your viewers. The Progress Bar Element includes several options for easy customization and is a great way to both visually attract the viewer and display content in an easily digestible form.

Options

Progress Bar

  • Type : Set the color of the progress bar.
  • Height : Set the height of the progress bar.
  • Border Type : Set the type of border to the progress bar.
  • Border Color : Set the color of border to the progress bar.
  • Border Width : Set the width of border to the progress bar.
  • Border Radius : Set the radius curve of border to the progress bar.
progressbar

Heading Style

  • Title : Enter the title text that is displayed above the progress bar.
  • Color : Choose the color of the title text.
  • Alignment : Set the alignment of the heading to left, right, center.
  • Typography : Choose the Font-name, size, boldness, text-decoration, letter-spacing.
progressbar_heading

Percentage

  • Content : Enter the text that is displayed in the progress bar.
  • Color : Set the color of the text.
  • Percentage : Set the completion percentage number.
  • Color: Change the color of the percentage text.
  • Hide Percentage: Show or hide the actual percentage number text at the end of the bar.
progressbar_percentage

Prefix and Suffix

  • Prefix and Suffix : Enable the toggle to show the prefix and suffix or vice versa.
  • Prefix Title : Enter the text that is displayed in prefix in the progress bar.
  • Suffix Title : Enter the text that is displayed in suff in the progress bar.
  • Color: Change the color of the prefix and suffix text.
  • Typography : Choose the Font-name, size, boldness, text-decoration, letter-spacing.
progressbar_prefix
Was this helpful to you?