Shortcodes – Progress Bars

Progress bars for this theme look like the screenshots you see further below. Your shortcode elements are listed below but the only one you do not have to use is the colour attribute…the default colour is aqua green:

  • style – inside
  • label – your label (title)
  • size – this is the size of your progress bar that also relates to the style. You get the default or small
  • percent – This is the actual bar length, such as 90%, but only enter the number value.
  • colour – This is the colour of your bar graph. Leave out to use the default colour.

Default Style

This style is the default style where everything is inside the bar graph. Please note that if you have a small progress bar and a long label, this will conflict, so I would recommend switching to the second or third style.

[sp-progress-bars style="inside" label="Blog Themes" percent="90"]

sc progress1

Style – 2

This style puts both the label and the percentage outside of the bar.

[sp-progress-bars style="inside" label="Blog Themes" percent="90" size="small"]

sc progress2

Style – 3

This style gives you the label outside of the bar itself while keeping the number inside:

[sp-progress-bars style="" label="Blog Themes" colour="" percent="90"]

sc progress3

Adding Colour

You are not stuck with the default colour, so if you want a different colour for each progress bar, you can do that using HEX colour values, like this demo you see below. The first first one shows a bar as blue, so I added the colour attribute to my shortcode as colour=”#6e95e8″ to change the colour:

[sp-progress-bars style="inside" label="Blog Themes" colour="#6e95e8" percent="70"]

sc progress4