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]