Swift Charts & Progress Bars

Charts - Large

icon-bar-chart

With Font Awesome icon.

70%

With percentage.

6/10

With “out of 10” rating.

Text

With text.


[chart percentage='80' size='170' barcolour='#1bbeb4' trackcolour='#baebe8' content='icon-bar-chart' align='left']


[chart percentage='70' size='170' barcolour='#1bbeb4' trackcolour='#baebe8' content='70%' align='left']


[chart percentage='60' size='170' barcolour='#1bbeb4' trackcolour='#baebe8' content='6/10' align='left']


[chart percentage='100' size='170' barcolour='#1bbeb4' trackcolour='#baebe8' content='Text' align='left']

Charts - Standard

icon-bar-chart

70%

6/10

Text

Use any color you like!

icon-bar-chart

70%

6/10

Text


[chart percentage='80' size='70' barcolour='#1bbeb4' trackcolour='#baebe8' content='icon-bar-chart' align='left']

Progress Bars

Standard 75%

Striped 90%

Striped & animated 85%


[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=""]

Enter any value 7/10

Choose any color 80%

Striped & animated text goes here


[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"]