Progress bars. Beautiful & customizable.

  • All progress bars are customizable. Change color, thickness and size of each bar .
  • 3 type of bars. With percentage, with custom text and with icon inside.
  • Animated contents are available.
#list-style-660693aa2121d ul li:before { font-family:Icomoon; content: "\\e26a"; color:#00c8d7 }
Chart with icon
73%
Chart with percentage
Custom Text
Chart with custom text

Any size. Any thickness. Any color.

Praesent mi risus, fringilla et congue a, adipiscing a justo. Etiam non nulla libero. Proin vitae feugiat ante. In semper dignissim rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut vitae nulla in dui ullamcorper molestie ac at eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Nulla non semper enim, et ultrices dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer et lacus sit amet ante ornare adipiscing sed in ligula. Donec scelerisque quis risus in suscipit. Nam quis mi in lorem egestas ultricies. Aenean aliquam quam ut ante feugiat pulvinar.

Diagram progress bar

Praesent mi risus, fringilla et congue a, adipiscing a justo. Etiam non nulla libero. Proin vitae feugiat ante. In semper dignissim rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut vitae nulla in dui ullamcorper molestie ac at eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Nulla non semper enim, et ultrices dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer et lacus sit amet ante ornare adipiscing sed in ligula. Donec scelerisque quis risus in suscipit. Nam quis mi in lorem egestas ultricies. Aenean aliquam quam ut ante feugiat pulvinar.

Ut vitae nulla in dui ullamcorper molestie ac at eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Nulla non semper enim, et ultrices dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer et lacus sit amet ante ornare adipiscing sed in ligula. Donec scelerisque quis risus in suscipit. Nam quis mi in lorem egestas ultricies. Aenean aliquam quam ut ante feugiat pulvinar.

 

Skill meters. As many as you want.

This useful shortcode allows you to create unlimited amount of skill meters with your desired color and alt texts. You can also use this shortcode to show some progresses.

Photoshop
90%
#mk-skill-meter-660693aa2262b .mk-progress-bar { height: 22px; }#mk-skill-meter-660693aa2262b .progress-percent { line-height: 22px; font-size: 13.2px; }
Illustrator
80%
#mk-skill-meter-660693aa22671 .mk-progress-bar { height: 22px; }#mk-skill-meter-660693aa22671 .progress-percent { line-height: 22px; font-size: 13.2px; }
Javascript
62%
#mk-skill-meter-660693aa226ad .mk-progress-bar { height: 22px; }#mk-skill-meter-660693aa226ad .progress-percent { line-height: 22px; font-size: 13.2px; }
HTML
85%
#mk-skill-meter-660693aa226e5 .mk-progress-bar { height: 22px; }#mk-skill-meter-660693aa226e5 .progress-percent { line-height: 22px; font-size: 13.2px; }
After effect
50%
#mk-skill-meter-660693aa2271c .mk-progress-bar { height: 22px; }#mk-skill-meter-660693aa2271c .progress-percent { line-height: 22px; font-size: 13.2px; }
Copywighting
25%
#mk-skill-meter-660693aa22752 .mk-progress-bar { height: 22px; }#mk-skill-meter-660693aa22752 .progress-percent { line-height: 22px; font-size: 13.2px; }

With different colors

Maecenas pretium
90%
#mk-skill-meter-660693aa227f7 .mk-progress-bar { height: 22px; }#mk-skill-meter-660693aa227f7 .progress-percent { line-height: 22px; font-size: 13.2px; }
Class aptent taciti
80%
#mk-skill-meter-660693aa22832 .mk-progress-bar { height: 22px; }#mk-skill-meter-660693aa22832 .progress-percent { line-height: 22px; font-size: 13.2px; }
Vivamus vehicula
62%
#mk-skill-meter-660693aa2286b .mk-progress-bar { height: 22px; }#mk-skill-meter-660693aa2286b .progress-percent { line-height: 22px; font-size: 13.2px; }
Curabitur
85%
#mk-skill-meter-660693aa228a2 .mk-progress-bar { height: 22px; }#mk-skill-meter-660693aa228a2 .progress-percent { line-height: 22px; font-size: 13.2px; }
Duis vestibulum
50%
#mk-skill-meter-660693aa228d8 .mk-progress-bar { height: 22px; }#mk-skill-meter-660693aa228d8 .progress-percent { line-height: 22px; font-size: 13.2px; }
Proin fermentum
25%
#mk-skill-meter-660693aa2290e .mk-progress-bar { height: 22px; }#mk-skill-meter-660693aa2290e .progress-percent { line-height: 22px; font-size: 13.2px; }

Multiple styles

You have 3 styles to display any progress stats on your website. Pie charts, Legend charts and skill meters.

#box-icon-660693aa22cb1 p{color:#404b57;}#box-icon-660693aa22cb1 h4 {color:#ffffff!important;}

Alternative texts

In addition to multiple bars to show any progress you have another option to describe it with words.

#box-icon-660693aa22ded p{color:#404b57;}#box-icon-660693aa22ded h4 {color:#ffffff!important;}

Customizability and colors

There is no limit! You can apply any style and coloring to charts to fit your design.

#box-icon-660693aa22f22 p{color:#404b57;}#box-icon-660693aa22f22 h4 {color:#ffffff!important;}
.full-width-660693aa22ad7 { min-height:100px; padding:50px 0 50px; margin-bottom:0px; background-color:#00c8d7; border:1px solid #00c8d7;border-left:none;border-right:none; } #background-layer--660693aa22ad7 { background-position:left top; background-repeat:repeat; ; } .full-width-660693aa22ad7 .mk-fancy-title.pattern-style span, .full-width-660693aa22ad7 .mk-blog-view-all { background-color: #00c8d7 !important; }