Progress & Pie Progress - Security Design
1896
page-template-default,page,page-id-1896,page-child,parent-pageid-121,theme-bridge,woocommerce-no-js,ajax_fade,page_not_loaded,,columns-4,qode-theme-ver-16.7,qode-theme-bridge,wpb-js-composer js-comp-ver-4.12,vc_responsive
 

Progress & Pie Progress

Progress

[tabs]
[tab title=”Parameters” icon=”check” icon_color=”#3cabce”]

Parameters

[divider_line]
[list icon=”check” color=”blue”]

  • type: default,radius,round
  • size: small,default,large (optional)
  • percent
  • text: true,false (optional)
  • textColor (optional)
  • barColor (optional)
  • trackColor (optional)

[/list]
[/tab]
[tab title=”Shortcode Option Panel” icon=”check” icon_color=”#3cabce”]

Shortcode Option Panel

[divider_line]
[image source_type=”attachment_id” source_value=”3234″ caption=”The Progress Shortcode Option Panel” alt=”The Progress Shortcode Option Panel” align=”center” icon=”zoom” width=”594″ autoHeight=”true” quality=”100″ lightbox=”true” title=”The Progress Shortcode Option Panel”]
[/tab]
[/tabs]

Samples

[divider_line]

Progresses With Different Size

[divider_line]
[progress size=”small” percent=”70″]
[progress percent=”50″]
[progress size=”large” percent=”80″]

[toggle title=”Get the code”][code]
[progress size=”small” percent=”70″]
[progress percent=”50″]
[progress size=”large” percent=”80″]
[/code][/toggle]

[divider_padding]

Progresses With Different Type

[divider_line]
[progress percent=”60″]
[progress type=”radius” percent=”70″]
[progress type=”round” percent=”50″]

[toggle title=”Get the code”][code]
[progress percent=”60″]
[progress type=”radius” percent=”70″]
[progress type=”round” percent=”50″]
[/code][/toggle]

[divider_padding]

Progresses Without Text

[divider_line]
[progress percent=”30″ text=”false”]
[progress percent=”70″ text=”false”]
[progress percent=”100″ text=”false”]

[toggle title=”Get the code”][code]
[progress percent=”30″ text=”false”]
[progress percent=”70″ text=”false”]
[progress percent=”100″ text=”false”]
[/code][/toggle]

Progresses With Custom Color

[divider_line]
[progress percent=”50″ barcolor=”#27ccc0″]
[progress percent=”50″ textcolor=”#ffffff” barcolor=”#27ccc0″ trackcolor=”#f7be90″]

[toggle title=”Get the code”][code]
[progress percent=”50″ barcolor=”#27ccc0″]
[progress percent=”50″ textcolor=”#ffffff” barcolor=”#27ccc0″ trackcolor=”#f7be90″]
[/code][/toggle]

[divider_top]

Pie Progress

[tabs]
[tab title=”Parameters” icon=”check” icon_color=”#3cabce”]

Parameters

[divider_line]
[list icon=”check” color=”blue”]

  • percent
  • size: small,default,large (optional)
  • type:percent,text,icon
  • text:(optional)
  • icon:(optional)
  • textColor (optional)
  • barColor (optional)
  • trackColor (optional)

[/list]
[/tab]
[tab title=”Shortcode Option Panel” icon=”check” icon_color=”#3cabce”]

Shortcode Option Panel

[divider_line]
[image source_type=”attachment_id” source_value=”3254″ caption=”The Pie Progress Shortcode Option Panel” alt=”The Pie Progress Shortcode Option Panel” align=”center” icon=”zoom” width=”600″ autoHeight=”true” quality=”100″ lightbox=”true” title=”The Pie Progress Shortcode Option Panel”]
[/tab]
[/tabs]

Samples

[divider_line]

Pie Progresses With Different Type

[divider_line]
[one_third][pie_progress percent=”38″ label=”icon” icon=”anchor”][/one_third]
[one_third][pie_progress percent=”64″ icon=”adjust”] [/one_third]
[one_third_last][pie_progress percent=”83″ label=”text” text=”Custom Text” icon=”adjust”] [/one_third_last]

[toggle title=”Get the code”]
[code][one_third][pie_progress percent=”38″ label=”icon” icon=”anchor”][/one_third]
[one_third][pie_progress percent=”64″ icon=”adjust”] [/one_third]
[one_third_last][pie_progress percent=”83″ label=”text” text=”Custom Text” icon=”adjust”] [/one_third_last][/code]
[/toggle]

[divider_padding]

Pie Progresses With Different Size

[divider_line]
[one_third][pie_progress percent=”38″ label=”text” text=”Small” size=”small”][/one_third]
[one_third][pie_progress percent=”64″ label=”text” text=”Default”][/one_third]
[one_third_last][pie_progress percent=”83″ label=”text” text=”Large” size=”large”][/one_third_last]

[toggle title=”Get the code”]
[code][one_third][pie_progress percent=”38″ label=”text” text=”Small” size=”small”][/one_third]
[one_third][pie_progress percent=”64″ label=”text” text=”Default”][/one_third]
[one_third_last][pie_progress percent=”83″ label=”text” text=”Large” size=”large”][/one_third_last][/code]
[/toggle]

[divider_padding]

Pie Progresses With Custom Color

[divider_line]
[one_third][pie_progress percent=”60″ label=”icon” icon=”github-alt” labelColor=”#f6653c” barcolor=”#f6653c”] [/one_third]
[one_third][pie_progress percent=”69″ label=”icon” icon=”heart” labelColor=”#27ccc0″ trackcolor=”#f7be90″ barcolor=”#27ccc0″][/one_third]
[one_third_last][pie_progress percent=”80″ label=”icon” icon=”music” labelColor=”#2ac4ea” barcolor=”#2ac4ea”] [/one_third_last]

[toggle title=”Get the code”]
[code][one_third][pie_progress percent=”60″ label=”icon” icon=”github-alt” labelColor=”#f6653c” barcolor=”#f6653c”] [/one_third]
[one_third][pie_progress percent=”69″ label=”icon” icon=”heart” labelColor=”#27ccc0″ trackcolor=”#f7be90″ barcolor=”#27ccc0″][/one_third]
[one_third_last][pie_progress percent=”80″ label=”icon” icon=”music” labelColor=”#2ac4ea” barcolor=”#2ac4ea”] [/one_third_last][/code]
[/toggle]

[divider_top]