Check out all the progress bars options and can be set in different styles with Visual Composer Progress Bar, Pie Chart shortcodes.
Progress Bars Shortcodes
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”]