Progress Circle Shortcodes

2 Alternative Styles

  • 66
  • 66
Get The Code

[progress_circle value="66" icon="eye-open" style="solid"]Solid Style[/progress_circle]
[progress_circle value="66" icon="eye-open" style="simple"]Simple Style[/progress_circle]

Custom Colors

  • 38
  • 54
  • 83
Get The Code

[progress_circle value="38" icon="pencil" text_color="#ffffff" bg_color="#9b59b6" style="solid"]
[progress_circle value="54" icon="hand-right" text_color="#ffffff" bg_color="#00c6ff" style="solid"]
[progress_circle value="83" icon="fighter-jet" text_color="#ffffff" bg_color="#00b976" style="solid"]

All Available Icons

Shortcode documentation

  • id
    The id attribute specifies an id for an HTML element.
    It must be unique within the HTML document.
    (Mainly for additional styling/scripting purposes)
  • class
    The class attribute specifies a class name for an HTML element.
    (Mainly for additional styling/scripting purposes)
  • value
    0-100 range
  • icon
    Available Options:
    All icons available on Font Awesome site
  • style
    Available Options:
    • simple
    • solid
  • text_color
  • bg_color