Progress Circle

+%
Attractive Figures
+%
Some Text Goes Here
+%
Some Text Goes Here
[progress_circle size="220" value="60" line="10" barcolor="#FF247B" trackcolor="#EBEDEF" textcolor="#FF247B" speed="5000" linecap="butt" percentage_size="30px" before_value="+" after_value="%" animation="" id="" class=""]Attractive Figures[/progress_circle]
[progress_circle size="220" before_value="+" value="75" after_value="%" line="10" barcolor="#22B1F5" trackcolor="#EBEDEF" textcolor="#22B1F5" speed="7500" linecap="round" percentage_size="30px" animation="" id="" class=""]Some Text Goes Here[/progress_circle]
[progress_circle size="220" before_value="+" value="85" after_value="%" line="16" barcolor="#0EBB3F" trackcolor="#EBEDEF" textcolor="#0EBB3F" speed="10000" linecap="square" percentage_size="30px" animation="" id="" class=""]Some Text Goes Here[/progress_circle]

These are Transparent also.

+%
Attractive Figures
+%
Some Text Goes Here
+%
Some Text Goes Here
[progress_circle size="220" value="60" line="5" barcolor="#fff" trackcolor="rgba(255,255,255,0.1)" textcolor="#ffffff" speed="5000" linecap="round" percentage_size="30px" before_value="+" after_value="%" animation="" id="" class=""]Attractive Figures[/progress_circle]
[progress_circle size="220" before_value="+" value="75" after_value="%" line="5" barcolor="#fff" trackcolor="rgba(255,255,255,0.1)" textcolor="#ffffff" speed="7500" linecap="round" percentage_size="30px" animation="" id="" class=""]Some Text Goes Here[/progress_circle]
[progress_circle size="220" before_value="+" value="85" after_value="%" line="5" barcolor="#fff" trackcolor="rgba(255,255,255,0.1)" textcolor="#ffffff" speed="10000" linecap="round" percentage_size="30px" animation="" id="" class=""]Some Text Goes Here[/progress_circle]

Progress Circle Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • animation: “fade_in”, “move_left”, “move_right”, “move_up”, “scale_up”, “little_bounce”, “fade_in_down”, “fade_in_left”, “fade_in_right”.
  • size: Enter the value (e.g 220), the value is same in height and width.
  • before_value: Enter the content which will be added before the percentage value. e.g. +75%
  • value: Enter the value of the progress in percentage.
  • after_value: Enter the content which will be added after the percentage value. e.g. +75%
  • line: Enter the line width.
  • barcolor: Enter the color of the filled portion.
  • trackcolor: Enter the color of the unfilled portion.
  • textcolor: Enter the text label color.
  • speed: Enter the speed of the animation (e.g 1000)
  • linecap: Select the linecap. “butt”, “round”, “square”.
  • percentage_size: Enter the font size of the percentage.