Progress Bar Element

The Progress Bar Element not only will upgrade your site’s appearance but also is one of the approaches to add valuable information like the skills you possess for example. 

Content Tab 

Progress Bar

  1. Title - Type here the title for the progress bar
  2. Type - Choose a type for the progress bar either Info, Success, Warning, or Danger. Each style will be distinct in the color of the progress bar. Although you will be able to configure that in the Styles tab 
  3. Percentage - Set the percentage that the progress bar will load 
  4. Display Percentage - Choose to either show or hide the percentage in the progress bar
  5. Inner Text - Enter the text that will be displayed within the progress bar

Style Tab

Progress Bar 

  1. Color - Set the color for the loading progress bar 
  2. Background Color - Set the background color for the progress bar
  3. Height - Set the height for the progress bar 
  4. Border Radius - Enter the border-radius value to make the edges of the progress bar rounder 
Inner Text
  1. Color - Set the color for the inner text 
  2. Typography - Tweak the typography options for the inner text 

Title Style

  1. Color - Set the color for the title of the progress bar
  2. Typography - Tweak the typography options for the title of the progress bar


Set the settings for the Advanced Tab that is appropriate for the element. 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.