Progress Bar Element

The Progress Bar feature 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. Design and style the progress bar with the advanced options available. 


Content Tab 

Progress Bar 

  1. Title - Type here the title for the progress bar, depending on the feature you want to promote 
  2. Type - Choose the type of your progress bar, it can either be Info, Success, Warning, or Danger. The color of the progress bar will change depending on the type you choose, nevertheless, you can choose any color in the Style Tab. 
  3. Percentage - Decide on a percentage that you want your progress bar to be filled 
  4. Display Percentage - Choose to either show or hide the percentage number 
  5. Inner Text - Type here the text you want to be displayed within the progress bar 

Style Tab 

Progress Bar 

  1. Color - Set the color of the bar 
  2. Background Color - Here change the color for the background of the bar 
  3. Height - Set the height of the progress bar 
  4. Border Radius - Change the border-radius if you want rounder edges across the progress bar 
Inner Text
  1. Color - Set the color for the inner text 
  2. Typography - Tweak the typography options for the inner text 

Title Style 

  1. Text Color - Change the color of the text 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.