Swift Charts & Progress Bars
[spb_text_block title=”Charts – Large” pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/1″ el_position=”first last”]
[one_fourth]
[chart percentage=’80’ size=’170′ barcolour=’#1bbeb4′ trackcolour=’#baebe8′ content=’fa-bar-chart-o’ align=’left’]
With Font Awesome icon.
[/one_fourth]
[one_fourth]
[chart percentage=’70’ size=’170′ barcolour=’#1bbeb4′ trackcolour=’#baebe8′ content=’70%’ align=’left’]
With percentage.
[/one_fourth]
[one_fourth]
[chart percentage=’60’ size=’170′ barcolour=’#1bbeb4′ trackcolour=’#baebe8′ content=’6/10′ align=’left’]
With “out of 10” rating.
[/one_fourth]
[one_fourth_last]
[chart percentage=’100′ size=’170′ barcolour=’#1bbeb4′ trackcolour=’#baebe8′ content=’Text’ align=’left’]
With text.
[/one_fourth_last]
[/spb_text_block] [codesnippet pb_margin_bottom=”yes” width=”1/4″ el_position=”first”]
[[chart percentage=’80’ size=’170′ barcolour=’#1bbeb4′ trackcolour=’#baebe8′ content=’fa-bar-chart-o’ align=’left’]]
[/codesnippet] [codesnippet pb_margin_bottom=”yes” width=”1/4″]
[[chart percentage=’70’ size=’170′ barcolour=’#1bbeb4′ trackcolour=’#baebe8′ content=’70%’ align=’left’]]
[/codesnippet] [codesnippet pb_margin_bottom=”yes” width=”1/4″]
[[chart percentage=’60’ size=’170′ barcolour=’#1bbeb4′ trackcolour=’#baebe8′ content=’6/10′ align=’left’]]
[/codesnippet] [codesnippet pb_margin_bottom=”yes” width=”1/4″ el_position=”last”]
[[chart percentage=’100′ size=’170′ barcolour=’#1bbeb4′ trackcolour=’#baebe8′ content=’Text’ align=’left’]]
[/codesnippet] [blank_spacer height=”30px” width=”1/1″ el_position=”first last”] [spb_text_block title=”Charts – Standard” pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/2″ el_position=”first”]
[one_fourth]
[chart percentage=’80’ size=’70’ barcolour=’#1bbeb4′ trackcolour=’#baebe8′ content=’fa-bar-chart-o’ align=’left’]
[/one_fourth]
[one_fourth]
[chart percentage=’70’ size=’70’ barcolour=’#1bbeb4′ trackcolour=’#baebe8′ content=’70%’ align=’left’]
[/one_fourth]
[one_fourth]
[chart percentage=’60’ size=’70’ barcolour=’#1bbeb4′ trackcolour=’#baebe8′ content=’6/10′ align=’left’]
[/one_fourth]
[one_fourth_last]
[chart percentage=’100′ size=’70’ barcolour=’#1bbeb4′ trackcolour=’#baebe8′ content=’Text’ align=’left’]
[/one_fourth_last]
[/spb_text_block] [spb_text_block title=”Use any color you like!” pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/2″ el_position=”last”]
[one_fourth]
[chart percentage=’80’ size=’70’ barcolour=’#222222′ trackcolour=’#b8b0a7′ content=’fa-bar-chart-o’ align=’left’]
[/one_fourth]
[one_fourth]
[chart percentage=’70’ size=’70’ barcolour=’#1dd22f’ trackcolour=’#a3d39c’ content=’70%’ align=’left’]
[/one_fourth]
[one_fourth]
[chart percentage=’60’ size=’70’ barcolour=’#07c1b6′ trackcolour=’#c2e0de’ content=’6/10′ align=’left’]
[/one_fourth]
[one_fourth_last]
[chart percentage=’100′ size=’70’ barcolour=’#10c4f7′ trackcolour=’#b1e6f6′ content=’Text’ align=’left’]
[/one_fourth_last]
[/spb_text_block] [codesnippet pb_margin_bottom=”yes” width=”1/1″ el_position=”first last”]
[[chart percentage=’80’ size=’70’ barcolour=’#1bbeb4′ trackcolour=’#baebe8′ content=’fa-bar-chart-o’ align=’left’]]
[/codesnippet] [blank_spacer height=”30px” width=”1/1″ el_position=”first last”] [spb_text_block title=”Progress Bars” pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/1″ el_position=”first last”]
[progress_bar percentage=”75″ name=”Standard” value=”75%” type=”” colour=””]
[progress_bar percentage=”90″ name=”Striped” value=”90%” type=”progress-striped” colour=””]
[progress_bar percentage=”85″ name=”Striped & animated” value=”85%” type=”progress-striped active” colour=””]
[/spb_text_block] [codesnippet pb_margin_bottom=”yes” width=”1/1″ el_position=”first last”]
[[progress_bar percentage=”75″ name=”Standard” value=”75%” type=”” colour=””]]
[[progress_bar percentage=”90″ name=”Striped” value=”90%” type=”progress-striped” colour=””]]
[[progress_bar percentage=”85″ name=”Striped & animated” value=”85%” type=”progress-striped active” colour=””]]
[/codesnippet] [spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/1″ el_position=”first last”]
[progress_bar percentage=”70″ name=”Enter any value” value=”7/10″ type=”” colour=”#222222″]
[progress_bar percentage=”80″ name=”Choose any color” value=”80%” type=”progress-striped” colour=”#07c1b6″]
[progress_bar percentage=”60″ name=”Striped & animated” value=”text goes here” type=”progress-striped active” colour=”#10c4f7″]
[/spb_text_block] [codesnippet pb_margin_bottom=”yes” width=”1/1″ el_position=”first last”]
[[progress_bar percentage=”70″ name=”Enter any value” value=”7/10″ type=”” colour=”#222222″]]
[[progress_bar percentage=”80″ name=”Choose any color” value=”80%” type=”progress-striped” colour=”#07c1b6″]]
[[progress_bar percentage=”60″ name=”Striped & animated” value=”text goes here” type=”progress-striped active” colour=”#10c4f7″]]
[/codesnippet]