Swift Charts & Progress Bars

Charts - Large

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='fa-bar-chart-o' 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

70%
6/10
Text

Use any color you like!

70%
6/10
Text
[chart percentage='80' size='70' barcolour='#1bbeb4' trackcolour='#baebe8' content='fa-bar-chart-o' 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"]

Style Switcher

Layout options
Background Examples (boxed-only)
Many more options included →