Skip to main content

Progress Bars Shortcodes

Check out all the progress bars options and can be set in different styles with Visual Composer Progress Bar, Pie Chart shortcodes.

[vc_separator color=”custom” gap=”tall”]

Default

[vc_progress_bar values=”60″ bgcolor=”custom” animation=”” tooltip=”” custombgcolor=”#0088cc”]
[vc_progress_bar values=”60″ bgcolor=”custom” animation=”” tooltip=”” custombgcolor=”#0088cc” units=”%”]
[vc_progress_bar values=”0″ bgcolor=”custom” animation=”” tooltip=”” custombgcolor=”#0088cc” units=”%” min_width=”2em”]
[vc_separator color=”custom” gap=”tall”]

Contextual classes

[vc_progress_bar values=”40″ contextual=”success” animation=”” tooltip=”” el_class=”m-b”][vc_progress_bar values=”20″ contextual=”info” animation=”” tooltip=”” el_class=”m-b”][vc_progress_bar values=”60″ contextual=”warning” animation=”” tooltip=”” el_class=”m-b”][vc_progress_bar values=”80″ contextual=”danger” animation=”” tooltip=”” el_class=”m-b”][vc_empty_space height=”20px”][vc_separator color=”custom” gap=”tall”]

Striped

[vc_progress_bar values=”40″ bgcolor=”custom” options=”striped” animation=”” tooltip=”” custombgcolor=”#0088cc”]

Animated

[vc_progress_bar values=”40″ bgcolor=”custom” options=”striped,animated” animation=”” tooltip=”” custombgcolor=”#0088cc”]
[vc_separator color=”custom” gap=”tall”]

Border Radius

[vc_progress_bar values=”60″ bgcolor=”custom” animation=”” tooltip=”” border_radius=”no-border-radius” custombgcolor=”#0088cc” border=”rect”]
[vc_progress_bar values=”60″ bgcolor=”custom” animation=”” tooltip=”” border_radius=”border-radius” border=”round” custombgcolor=”#0088cc”]
[vc_progress_bar values=”60″ bgcolor=”custom” animation=”” tooltip=”” border_radius=”circled-border-radius” border=”circle” custombgcolor=”#0088cc”]
[vc_separator color=”custom” gap=”tall”]

Sizes

[vc_progress_bar values=”60″ bgcolor=”custom” animation=”” tooltip=”” size=”sm” custombgcolor=”#0088cc” border=”rect”]
[vc_progress_bar values=”60″ bgcolor=”custom” animation=”” tooltip=”” border=”round” custombgcolor=”#0088cc”]
[vc_progress_bar values=”60″ bgcolor=”custom” animation=”” tooltip=”” size=”lg” border=”circle” custombgcolor=”#0088cc”]
[vc_separator color=”custom” gap=”tall”]

Animated & Tooltips

[vc_progress_bar values=”100|HTML/CSS,85|Design,75|WordPress,85|Photoshop” bgcolor=”custom” custombgcolor=”#0088cc” units=”%”]

Colors

[vc_progress_bar values=”50|Primary” bgcolor=”custom” custombgcolor=”#0088cc” units=”%” el_class=”m-b”][vc_progress_bar values=”70|Secondary” bgcolor=”custom” custombgcolor=”#e36159″ units=”%” el_class=”m-b”][vc_progress_bar values=”75|Tertiary” bgcolor=”custom” custombgcolor=”#2baab1″ units=”%” el_class=”m-b”][vc_progress_bar values=”40|Quaternary” bgcolor=”custom” custombgcolor=”#383f48″ units=”%”]
[vc_separator color=”custom” gap=”tall”]

Circular

HTML/CSS

HTML/CSS

HTML/CSS

[vc_separator color=”custom” gap=”tall”]

Sizes

HTML/CSS

HTML/CSS

[vc_separator color=”custom” gap=”tall”]

Options

HTML/CSS

HTML/CSS

HTML/CSS