(NOTE: You can access all the shortcodes via the shortcodes icon on your visual editor. See this document if you need more information.)

The Progress Bar shortcode will show attractive, animated bars that mark your progress on something. You can choose the colors for your bars, and you can also have striped bars.

Here's an example:

Our progress so far:  65%
This is the settings page.

progressbar-settings

Here is an example shortcode:


  • percentage = the percentage that you want the animation to zoom up to
  • unit = what type of unit you want to display, such at %
  • filledcolor = the color of the section that will be filled; hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • unfilledcolor = the color of the section that is not filled; hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • striped = yes, no; whether you want the color to be striped or not
  • animated_stripes = yes, no; whether you want the stripes to be animated or not
  • textcolor = color of text to display on the bar; hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • add your text between the open/close tags to display with the progress chart