Close
Close

Circular Progress Bar

Full circular progress bars, here you can customize the colors, font size, icons, circular radius, animation etc.

[ebs_progressbar type=”custom” circletype=”full” barcolor=”#dd3333″ bgcolor=”#ffffff” fillcolor=”#dd9933″ fontcolor=”#ffffff” fontsize=”15″ size=”250″ pbwidth=”50″ border=”inline” label=”PHP Skills” icon=”glyphicon glyphicon-ok” iconsize=”15″ iconcolor=”#1e73be” value=”77″ animation=”true”]

[ebs_progressbar type=”custom” circletype=”full” barcolor=”#dd3333″ bgcolor=”#fff” fillcolor=”#dd9933″ fontcolor=”#ffffff” fontsize=”17″ size=”256″ pbwidth=”33″ border=”outline” label=”PHP Skills” icon=”glyphicon glyphicon-ok” iconsize=”22″ iconcolor=”#1e73be” value=”87″ animation=”true”]

[ebs_progressbar type=”custom” circletype=”full” barcolor=”#dd3333″ bgcolor=”#ffa0a0″ fillcolor=”#dd9933″ fontcolor=”#ffffff” fontsize=”17″ size=”256″ pbwidth=”33″ border=”inline” label=”PHP Skills” icon=”glyphicon glyphicon-ok” iconsize=”22″ iconcolor=”#1e73be” value=”77″ animation=”true”]

Half Circular Progress Bars

Half circular progress bars, here you can customize the colors, font size, icons, circular radius, animation etc.

[ebs_progressbar type=”custom” circletype=”half” barcolor=”#dd3333″ bgcolor=”#ffa0a0″ fillcolor=”#dd9933″ fontcolor=”#FFFFFF” fontsize=”17″ size=”256″ pbwidth=”33″ border=”outline” label=”PHP Skills” icon=”glyphicon glyphicon-ok” iconsize=”22″ iconcolor=”#1e73be” value=”88″]

[ebs_progressbar type=”custom” circletype=”half” barcolor=”#dd3333″ bgcolor=”#ffa0a0″ fillcolor=”#dd9933″ fontcolor=”#FFFFFF” fontsize=”17″ size=”256″ pbwidth=”33″ border=”inline” label=”PHP Skills” icon=”glyphicon glyphicon-ok” iconsize=”22″ iconcolor=”#1e73be” value=”88″]

[ebs_progressbar type=”custom” circletype=”half” barcolor=”#50a332″ bgcolor=”#ffffff” fillcolor=”#1e73be” fontcolor=”#ffffff” fontsize=”17″ size=”256″ pbwidth=”33″ border=”inline” label=”PHP Skills” icon=”glyphicon glyphicon-ok” iconsize=”22″ iconcolor=”#ffffff” value=”88″ animation=”true”]

Linear Progress Bars

Layers Easy Bootstrap Shortcodes Widget to add bootstrap elements without coding.

[ebs_progressbar type=”custom_linear” bartype=”type_1″ max=”100″ increment=”1″ value=”90″ fillcolor1=”#dd3333″ fillcolor2=”#eeee22″ remaincolor=”#81d742″ fontcolor=”#1e73be” offsetcolor=”#000000″ percent=”true” offset=”true”]
[ebs_progressbar type=”custom_linear” bartype=”type_2″ max=”100″ increment=”1″ value=”90″ fillcolor1=”#dd3333″ fillcolor2=”#eeee22″ remaincolor=”#81d742″ fontcolor=”#1e73be” offsetcolor=”#000000″ percent=”true” offset=”true”]
[ebs_progressbar type=”custom_linear” bartype=”type_4″ max=”100″ increment=”1″ value=”90″ fillcolor1=”#dd3333″ remaincolor=”#81d742″ fontcolor=”#FFF” offsetcolor=”#000000″ percent=”true” offset=”true”]
[ebs_progressbar type=”custom_linear” bartype=”type_3″ max=”100″ increment=”1″ value=”90″ fillcolor1=”#dd3333″ remaincolor=”#81d742″ fontcolor=”#FFF” offsetcolor=”#000000″ percent=”true” offset=”true”]
[ebs_progressbar type=”custom_linear” bartype=”type_5″ max=”100″ increment=”1″ value=”90″ fillcolor1=”#dd3333″ remaincolor=”#81d742″ fontcolor=”#FFFFFF” offsetcolor=”#000000″ percent=”true” offset=”true”]

Progressbar

Layers Easy Bootstrap Shortcodes Widget to add bootstrap elements without coding.

Default Progressbars


[ebs_progressbar type=”default” value=”99″ label=”PHP Skils” label_style=”outside”]
[ebs_progressbar type=”default” value=”99″ bartype=”progress-bar-success” label=”HTML Skils” label_style=”outside”]

[ebs_progressbar type=”default” value=”95″ bartype=”progress-bar-info” label=”jQuery Skills” label_style=”outside”]

Inside Label Progress Bars



[ebs_progressbar type=”default” value=”99″ label=”PHP Skils” label_style=”inside”]
[ebs_progressbar type=”default” value=”99″ bartype=”progress-bar-success” label=”HTML Skils” label_style=”inside”]
[ebs_progressbar type=”default” value=”95″ bartype=”progress-bar-info” label=”jQuery Skills” label_style=”inside”]

Striped Progress Bars

Striped progress bars with inside and outside labels.

Striped Progress Bar With Out Side Label

[ebs_progressbar type=”default” value=”99″ barstyle=”progress-striped” label=”PHP Skills” label_style=”outside”]
[ebs_progressbar type=”default” value=”96″ bartype=”progress-bar-success ” barstyle=”progress-striped” label=”HTML Skills” label_style=”outside”]
[ebs_progressbar type=”default” value=”77″ barstyle=”progress-striped ” label=”jQuery Skills” label_style=”outside”]

Striped Progress Bar With In Side Label



[ebs_progressbar type=”default” value=”99″ barstyle=”progress-striped” label=”PHP Skills” label_style=”inside”]
[ebs_progressbar type=”default” value=”96″ bartype=”progress-bar-success ” barstyle=”progress-striped” label=”HTML Skills” label_style=”inside”]
[ebs_progressbar type=”default” value=”77″ barstyle=”progress-striped ” label=”jQuery Skills” label_style=”inside”]

Animated Striped Progress Bar With Out Side Label

[ebs_progressbar type=”default” value=”99″ barstyle=”progress-striped active” label=”PHP Skills” label_style=”outside”]
[ebs_progressbar type=”default” value=”96″ bartype=”progress-bar-success active” barstyle=”progress-striped” label=”HTML Skills” label_style=”outside”]
[ebs_progressbar type=”default” value=”77″ barstyle=”progress-striped active” label=”jQuery Skills” label_style=”outside”]

Animated Striped Progress Bar With In Side Label



[ebs_progressbar type=”default” value=”99″ barstyle=”progress-striped active” label=”PHP Skills” label_style=”inside”]
[ebs_progressbar type=”default” value=”96″ bartype=”progress-bar-success active” barstyle=”progress-striped” label=”HTML Skills” label_style=”inside”]
[ebs_progressbar type=”default” value=”77″ barstyle=”progress-striped active” label=”jQuery Skills” label_style=”inside”]