[im_messagebox title=”Progress Bars & Skills” container=”You can easily add scores, bars, skills and shill charts with Visual Composer and shortcode generator. Shortcode generator will prepare custom shortcode for you so you can paste it everywhere.” frame_color=”rgba(128,128,128,.2)” frame_width=”4″]

[im_caption size=”26″ tag=”h2″ align=”left” text_transform=”uppercase” weight=”500″ color=”#3f3f3f” animation=”fade-in”]Basic Bars[/im_caption][im_skill_meter title=”Params” percent=”82″ style=”view_sm” color=”#dddddd”][im_skill_meter title=”Params” percent=”35″ color=”#1e73be” style=”view_sm”][im_skill_meter title=”Params” percent=”73″ color=”#8aa332″ style=”view_sm”][im_skill_meter title=”Params” percent=”15″ color=”#dd9933″]

[im_caption size=”26″ tag=”h2″ align=”left” text_transform=”uppercase” weight=”500″ color=”#3f3f3f” animation=”fade-in”]Ultra Thin[/im_caption][im_skill_meter title=”HTML5″ percent=”80″ color=”#dd9933″ style=”view_xs”][im_skill_meter title=”jQuery” percent=”94″ color=”#60ce29″ style=”view_xs” label_width=”30″ bar_height=”30″ label_color=”#ffffff” label_bg=”#026abf” icon=”im-icon-IE”][im_skill_meter title=”CSS3″ percent=”46″ color=”#3254db” style=”view_xs” label_width=”30″ bar_height=”30″ label_color=”#ffffff” label_bg=”#026abf” icon=”im-icon-IE”]

[im_caption size=”26″ tag=”h2″ align=”left” text_transform=”uppercase” weight=”500″ color=”#3f3f3f” animation=”fade-in”]Large & Customisable[/im_caption][im_skill_meter title=”UX” percent=”56″ color=”#f2f2f2″ style=”view_md” label_width=”30″ bar_height=”30″ label_color=”#ffffff” label_bg=”#50af3d” icon=”fa-icon-anchor” placeholder=”#ffffff”][im_skill_meter title=”Talk” percent=”83″ color=”#f2f2f2″ style=”view_md” label_width=”30″ bar_height=”30″ label_color=”#ffffff” label_bg=”#50af3d” icon=”fa-icon-comments-alt” placeholder=”#ffffff”]

[im_chart percent=”68″ bar_color=”#9bb233″ track_color=”#eaeaea” line_width=”5″ bar_size=”200″ content_type=”icon” custom_text=”Custom Text” desc=”Description” animation=”scale-up” icon=”im-icon-screen”]

[im_chart percent=”98″ bar_color=”#dd3333″ track_color=”#eaeaea” line_width=”5″ bar_size=”200″ content_type=”icon” custom_text=”Custom Text” desc=”Description” animation=”scale-up” icon=”im-icon-database”]

[im_chart percent=”40″ bar_color=”#dd9933″ track_color=”#eaeaea” line_width=”5″ bar_size=”200″ content_type=”icon” custom_text=”Custom Text” desc=”Description” animation=”scale-up” icon=”im-icon-pyramid-2″]

[im_separator class=”margin40″][im_skill_meter_chart title=”Skills” percent_1=”39″ color_1=”rgba(250,100,50,1)” name_1=”nodejs” percent_2=”61″ color_2=”#8c6645″ name_2=”Django” percent_3=”34″ color_3=”#2f5e72″ name_3=”PHP” percent_4=”77″ color_4=”#008b83″ name_4=”HTML5″ percent_5=”96″ color_5=”#d96b52″ name_5=”Design” percent_6=”60″ color_6=”#82bf56″ name_6=”Javascript” percent_7=”77″ color_7=”#4ecdc4″ name_7=”Ruby” default_text=”Skill” center_color=”#1e3641″ default_text_color=”#fff” animation=”left-to-right”]

[im_separator class=”margin40″]

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

[im_chart percent=”40″ bar_color=”#dd9933″ track_color=”#eaeaea” line_width=”5″ bar_size=”200″ content_type=”custom_text” custom_text=”United Kingdom” desc=”At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.” animation=”left-to-right” icon=”im-icon-pyramid-2″]

[im_chart percent=”98″ bar_color=”#dd3333″ track_color=”#eaeaea” line_width=”5″ bar_size=”200″ content_type=”custom_text” custom_text=”USA” desc=”Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.” animation=”scale-up” icon=”im-icon-database”]

[im_chart percent=”68″ bar_color=”#9bb233″ track_color=”#eaeaea” line_width=”5″ bar_size=”200″ content_type=”custom_text” custom_text=”Germany” desc=”Sint occaecati cupiditate non provident similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi.” animation=”scale-up” icon=”im-icon-screen”]

[im_chart percent=”40″ bar_color=”#dd9933″ track_color=”#eaeaea” line_width=”15″ bar_size=”200″ content_type=”percent” custom_text=”United Kingdom” desc=”At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.” animation=”left-to-right” icon=”im-icon-pyramid-2″]

[im_chart percent=”98″ bar_color=”#dd3333″ track_color=”#eaeaea” line_width=”15″ bar_size=”200″ content_type=”percent” custom_text=”USA” desc=”Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.” animation=”scale-up” icon=”im-icon-database”]

[im_chart percent=”68″ bar_color=”#9bb233″ track_color=”#eaeaea” line_width=”15″ bar_size=”200″ content_type=”percent” custom_text=”Germany” desc=”Sint occaecati cupiditate non provident similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi.” animation=”scale-up” icon=”im-icon-screen”]

[im_steps step=”3″ hover_color=”#202020″ icon_1=”im-icon-forrst-2″ icon_2=”im-icon-airplane” icon_3=”im-icon-bug” icon_4=”im-icon-IE” icon_5=”im-icon-IE” title_1=”Title” desc_1=”Lorem Ipsum” title_2=”Title” desc_2=”Lorem ipsum.” title_3=”24/7″ desc_3=”Lorem ipsum.”]

[banner bgcolor_first=”e5e5e5″ animation=”bottom-to-top” frame_color=”rgba(128,128,128,.2)” frame_width=”4″ bgcolor_second=”efefef” custom=”true” title=”Progress Bars & Skills”]You can easily add scores, bars, skills and shill charts with Visual Composer and shortcode generator. Shortcode generator will prepare custom shortcode for you so you can paste it everywhere.[/banner]

[im_separator class=”margin40″]

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

[im_skill_meter title=”Params” percent=”82″][im_skill_meter title=”Params” percent=”35″ color=”#1e73be”][im_skill_meter title=”Params” percent=”73″ color=”#8aa332″][im_skill_meter title=”Params” percent=”15″ color=”#dd9933″]

Shortcode Generator Progress Bars

With progress bars shortcode you can indicate some things such as skills, experience or state.

[divider]

Basic With Animated Load

Think Progress Bar

[progress animation=”true” corners=”r1″]
[score score=”90″]Example Skill #1[/score]
[score score=”57″]Example Skill #2[/score]
[score score=”39″]Example Skill #3[/score]
[score score=”77″]Example Skill #4[/score]
[/progress]

Grouped Heavy Progress Bar

[progress type=”heavy” animation=”true” corners=”r1″]
[score score=”32″]2012[/score]
[score score=”72″]2013[/score]
[score score=”80″]2014[/score]
[/progress]

[divider4]

Custom Bars: Colors, Animated & Corners

[row_fluid]
[span3]
[progress custom=”true” gradient_1=”rgb(171, 79, 51)” gradient_2=”rgb(229, 115, 79)” bg2Color=”” textColor=”rgb(171, 79, 51)”]
[score score=”90″]Skill #1[/score]
[score score=”57″]Skill #2[/score]
[score score=”39″]Skill #3[/score]
[score score=”77″]Skill #4[/score]
[/progress]
[/span3]

[span3]
[progress corners=”r1″ custom=”true” gradient_1=”#852056″ gradient_2=”#e685c1″ bg2Color=”” textColor=”#852056″]
[score score=”90″]Skill #1[/score]
[score score=”57″]Skill #2[/score]
[score score=”39″]Skill #3[/score]
[score score=”77″]Skill #4[/score]
[/progress]
[/span3]

[span3]
[progress corners=”r2″ custom=”true” gradient_1=”#208556″ gradient_2=”#85e6c1″ bg2Color=”” textColor=”#208556″]
[score score=”90″]Skill #1[/score]
[score score=”57″]Skill #2[/score]
[score score=”39″]Skill #3[/score]
[score score=”77″]Skill #4[/score]
[/progress]
[/span3]

[span3]
[progress corners=”r3″ custom=”true” gradient_1=”#205685″ gradient_2=”#85c1e6″ bg2Color=”” textColor=”#205685″]
[score score=”90″]Skill #1[/score]
[score score=”57″]Skill #2[/score]
[score score=”39″]Skill #3[/score]
[score score=”77″]Skill #4[/score]
[/progress]
[/span3]
[/row_fluid]

[divider4]

[row_fluid]
[span3]
[progress animate=”true” custom=”true” gradient_1=”rgb(171, 79, 51)” gradient_2=”rgb(229, 115, 79)” bg2Color=”” textColor=”rgb(171, 79, 51)”]
[score score=”90″]Skill #1[/score]
[score score=”57″]Skill #2[/score]
[score score=”39″]Skill #3[/score]
[score score=”77″]Skill #4[/score]
[/progress]
[/span3]

[span3]
[progress animate=”true” corners=”r1″ custom=”true” gradient_1=”#852056″ gradient_2=”#e685c1″ bg2Color=”” textColor=”#852056″]
[score score=”90″]Skill #1[/score]
[score score=”57″]Skill #2[/score]
[score score=”39″]Skill #3[/score]
[score score=”77″]Skill #4[/score]
[/progress]
[/span3]

[span3]
[progress corners=”r2″ animate=”true” custom=”true” gradient_1=”#208556″ gradient_2=”#85e6c1″ bg2Color=”” textColor=”#208556″]
[score score=”90″]Skill #1[/score]
[score score=”57″]Skill #2[/score]
[score score=”39″]Skill #3[/score]
[score score=”77″]Skill #4[/score]
[/progress]
[/span3]

[span3]
[progress corners=”r3″ animate=”true” custom=”true” gradient_1=”#205685″ gradient_2=”#85c1e6″ bg2Color=”” textColor=”#205685″]
[score score=”90″]Skill #1[/score]
[score score=”57″]Skill #2[/score]
[score score=”39″]Skill #3[/score]
[score score=”77″]Skill #4[/score]
[/progress]
[/span3]
[/row_fluid]

[divider4]

[row_fluid]
[span3]
[progress type=”heavy” custom=”true” gradient_1=”rgb(171, 79, 51)” gradient_2=”rgb(229, 115, 79)” bg2Color=”” textColor=”#ffffff”]
[score score=”90″]2011[/score]
[score score=”57″]2012[/score]
[score score=”39″]2013[/score]
[score score=”77″]2014[/score]
[/progress]
[/span3]

[span3]
[progress type=”heavy” corners=”r1″ custom=”true” gradient_1=”#852056″ gradient_2=”#e685c1″ bg2Color=”” textColor=”#ffffff”]
[score score=”90″]2011[/score]
[score score=”57″]2012[/score]
[score score=”39″]2013[/score]
[score score=”77″]2014[/score]
[/progress]
[/span3]

[span3]
[progress type=”heavy” corners=”r2″ custom=”true” gradient_1=”#208556″ gradient_2=”#85e6c1″ bg2Color=”” textColor=”#ffffff”]
[score score=”90″]2011[/score]
[score score=”57″]2012[/score]
[score score=”39″]2013[/score]
[score score=”77″]2014[/score]
[/progress]
[/span3]

[span3]
[progress type=”heavy” corners=”r3″ custom=”true” gradient_1=”#205685″ gradient_2=”#85c1e6″ bg2Color=”” textColor=”#ffffff”]
[score score=”90″]2011[/score]
[score score=”57″]2012[/score]
[score score=”39″]2013[/score]
[score score=”77″]2014[/score]
[/progress]
[/span3]
[/row_fluid]

[divider4]

[row_fluid]
[span3]
[progress type=”heavy” custom=”true” animate=”true” gradient_1=”rgb(171, 79, 51)” gradient_2=”rgb(229, 115, 79)” bg2Color=”” textColor=”#ffffff”]
[score score=”90″]2011[/score]
[score score=”57″]2012[/score]
[score score=”39″]2013[/score]
[score score=”77″]2014[/score]
[/progress]
[/span3]

[span3]
[progress type=”heavy” corners=”r1″ animate=”true” custom=”true” gradient_1=”#852056″ gradient_2=”#e685c1″ bg2Color=”” textColor=”#ffffff”]
[score score=”90″]2011[/score]
[score score=”57″]2012[/score]
[score score=”39″]2013[/score]
[score score=”77″]2014[/score]
[/progress]
[/span3]

[span3]
[progress type=”heavy” corners=”r2″ animate=”true” custom=”true” gradient_1=”#208556″ gradient_2=”#85e6c1″ bg2Color=”” textColor=”#ffffff”]
[score score=”90″]2011[/score]
[score score=”57″]2012[/score]
[score score=”39″]2013[/score]
[score score=”77″]2014[/score]
[/progress]
[/span3]

[span3]
[progress type=”heavy” corners=”r3″ animate=”true” custom=”true” gradient_1=”#205685″ gradient_2=”#85c1e6″ bg2Color=”” textColor=”#ffffff”]
[score score=”90″]2011[/score]
[score score=”57″]2012[/score]
[score score=”39″]2013[/score]
[score score=”77″]2014[/score]
[/progress]
[/span3]
[/row_fluid]
[clearboth]