en-UScy-GBbr-FR

ProgressBars Counters

  Feature / Short Codes / ProgressBars Counters

Style One

PHOTOSHOP : 90%

HTML / CSS : 85%

ILLUSTRATE : 70%

COREDREL : 95%


SOURCE CODE 
<div class="loaded_list">
    <p>PHOTOSHOP : 90%</p>
    <div class="progress">
        <div class="bar animation animationwidth" data-width="90%"></div>
    </div>
    <p>HTML / CSS : 85%</p>
    <div class="progress">
        <div class="bar accentColor animation animationwidth" data-width="85%"></div>
    </div>
    <p>ILLUSTRATE : 70%</p>
    <div class="progress">
        <div class="bar animation animationwidth" data-width="70%"></div>
    </div>
    <p>COREDREL : 95%</p>
    <div class="progress">
        <div class="bar animation animationwidth" data-width="95%"></div>
    </div>
</div>

Style Two

PHOTOSHOP 90%

ILLUSTRATOR 95%

COREL DRAWL 85%

DNN 75%

SOURCE CODE 
<div class="loaded_list_1">
    <p>PHOTOSHOP 90%</p>
    <div class="progress">
        <div class="bar animation animationwidth" data-width="90%"></div>
    </div>
    <p>ILLUSTRATOR 95%</p>
    <div class="progress">
        <div class="bar animation animationwidth" data-width="95%"></div>
    </div>
    <p>COREL DRAWL 85%</p>
    <div class="progress">
        <div class="bar animation animationwidth" data-width="85%"></div>
    </div>
    <p>DNN 75%</p>
    <div class="progress">
        <div class="bar animation animationwidth" data-width="75%"></div>
    </div>
</div>

Style Three

Web Design74%

Html5 & Css358%

Photo Shop96%

JQuery80%

SOURCE CODE 
<div class="loaded_list_2">
    <p>Web Design<span>74%</span></p>
    <div class="progress">
        <div class="bar animation animationwidth" data-width="74%"></div>
    </div>
    <p>Html5 & Css3<span>58%</span></p>
    <div class="progress">
        <div class="bar animation animationwidth" data-width="58%"></div>
    </div>
    <p>Photo Shop<span>96%</span></p>
    <div class="progress">
        <div class="bar animation animationwidth" data-width="96%"></div>
    </div>
    <p>JQuery<span>80%</span></p>
    <div class="progress">
        <div class="bar animation animationwidth" data-width="80%"></div>
    </div>
</div>

Style Four

Research demand, New concept design 54%

Skin Development & Analysis 30%

Research demand, New concept design 42%

Research demand, New concept design 20%

Research demand, New concept design 75%

Research demand, New concept design 68%


SOURCE CODE 
<div class="row">
    <div class="col-sm-6">
        <div class="loaded_list_3 loaded_accent">
            <p>Research demand, New concept design<span>54%</span></p>
            <div class="progress">
                <div class="bar animation animationwidth" data-width="54%"></div>
            </div>
            <p>Skin Development & Analysis<span>30%</span></p>
            <div class="progress">
                <div class="bar animation animationwidth" data-width="30%"></div>
            </div>
            <p>Research demand, New concept design<span>42%</span></p>
            <div class="progress">
                <div class="bar animation animationwidth" data-width="42%"></div>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="loaded_list_3 loaded_color1">
            <p>Research demand, New concept design<span>20%</span></p>
            <div class="progress">
                <div class="bar animation animationwidth" data-width="20%"></div>
            </div>
            <p>Research demand, New concept design<span>75%</span></p>
            <div class="progress">
                <div class="bar animation animationwidth" data-width="75%"></div>
            </div>
            <p>Research demand, New concept design<span>68%</span></p>
            <div class="progress">
                <div class="bar animation animationwidth" data-width="68%"></div>
            </div>
        </div>
    </div>
</div>

Style Five


0%

HTML5

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna.

0%

PHOTOSHOP

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna.

0%

CORELDRAW

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna.

0%

CSS3

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna.

SOURCE CODE 
<div class="chart_list row">
    <div class="col-sm-3">
        <div data-percent="65" class="percentage1">
            <div class="percentage_inner"><span>0</span>% </div>
        </div>
        <h3> HTML5 </h3>
        <p>Content text 1 ... </p>
    </div>
    <div class="col-sm-3">
        <div data-percent="70" class="percentage1">
            <div class="percentage_inner"><span>0</span>% </div>
        </div>
        <h3> PHOTOSHOP </h3>
        <p>Content text 2 ... </p>
    </div>
    <div class="col-sm-3">
        <div data-percent="85" class="percentage1">
            <div class="percentage_inner"><span>0</span>% </div>
        </div>
        <h3> CORELDRAW </h3>
        <p>Content text 3 ... </p>
    </div>
    <div class="col-sm-3">
        <div data-percent="92" class="percentage1">
            <div class="percentage_inner"><span>0</span>% </div>
        </div>
        <h3> CSS3 </h3>
        <p>Content text 4 ... </p>
    </div>
</div>

Style Six


PS

HTML5 — 65%

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna.

CSS

PHOTOSHOP — 70%

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna.

AI

CORELDRAW — 85%

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna.

CDR

CSS3 — 92%

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna.

SOURCE CODE 
<div class="chart_list_2 row">
    <div class="col-sm-3">
        <div data-percent="65" class="percentage1">
            <div class="percentage_inner">PS</div>
        </div>
        <h3> HTML5 &mdash; 65% </h3>
        <p>Content text 1 ... Nulla eu mi magna. </p>
    </div>
    <div class="col-sm-3">
        <div data-percent="70" class="percentage1">
            <div class="percentage_inner">CSS</div>
        </div>
        <h3> PHOTOSHOP &mdash; 70% </h3>
        <p>Content text 2 ... Nulla eu mi magna. </p>
    </div>
    <div class="col-sm-3">
        <div data-percent="85" class="percentage1">
            <div class="percentage_inner">AI</div>
        </div>
        <h3> CORELDRAW  &mdash; 85%</h3>
        <p>Content text 3 ... Nulla eu mi magna. </p>
    </div>
    <div class="col-sm-3">
        <div data-percent="92" class="percentage1">
            <div class="percentage_inner">CDR</div>
        </div>
        <h3> CSS3 &mdash; 92% </h3>
        <p>Content text 4 ... Nulla eu mi magna. </p>
    </div>
</div>

Style Seven


0%

WEB DESIGN

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convalli sus eumi magna.

0%

PHOTOSHOP

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convalli sus eumi magna.

0%

CORELDRAW

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convalli sus eumi magna.

0%

CSS3

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convalli sus eumi magna.

SOURCE CODE 
<div class="chart_list_3 row">
    <div class="col-sm-6 col-md-3 chart_color1">
        <div data-percent="75" class="percentage2">
            <div class="percentage_inner"><span>0</span>% </div>
        </div>
        <h3> WEB DESIGN </h3>
        <p>Content text 1 ... </p>
    </div>
    <div class="col-sm-6 col-md-3 chart_color2">
        <div data-percent="50" class="percentage3">
            <div class="percentage_inner"><span>0</span>% </div>
        </div>
        <h3> PHOTOSHOP </h3>
        <p>Content text 2 ... </p>
    </div>
    <div class="col-sm-6 col-md-3 chart_color3">
        <div data-percent="90" class="percentage4">
            <div class="percentage_inner"><span>0</span>% </div>
        </div>
        <h3> CORELDRAW </h3>
        <p>Content text 3 ... </p>
    </div>
    <div class="col-sm-6 col-md-3 chart_color4">
        <div data-percent="68" class="percentage5">
            <div class="percentage_inner"><span>0</span>% </div>
        </div>
        <h3> CSS3 </h3>
        <p>Content text 4 ... </p>
    </div>
</div>

Style Eight


0%

Web Design

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, pretium. Integer tincidunt.

0%

Html5 & Css3

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, pretium. Integer tincidunt.

0%

JQuery

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, pretium. Integer tincidunt.

0%

Programme

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, pretium. Integer tincidunt.

SOURCE CODE 
<div class="chart_list_4 row">
    <div class="col-sm-6 col-md-3 chart_color1">
        <div data-percent="75" class="percentage6">
            <div class="percentage_inner"><span>0</span>% </div>
        </div>
        <h3>Web Design</h3>
        <p>Content text 1 ... </p>
    </div>
    <div class="col-sm-6 col-md-3 chart_color2">
        <div data-percent="90" class="percentage7">
            <div class="percentage_inner"><span>0</span>% </div>
        </div>
        <h3>Html5 & Css3</h3>
        <p>Content text 2 ... </p>
    </div>
    <div class="col-sm-6 col-md-3 chart_color3">
        <div data-percent="62" class="percentage8">
            <div class="percentage_inner"><span>0</span>% </div>
        </div>
        <h3>JQuery</h3>
        <p>Content text 3 ... </p>
    </div>
    <div class="col-sm-6 col-md-3 chart_color4">
        <div data-percent="84" class="percentage9">
            <div class="percentage_inner"><span>0</span>% </div>
        </div>
        <h3>Programme</h3>
        <p>Content text 4 ... </p>
    </div>
</div>

Style Nine


0
0
0
0
SOURCE CODE 
<div class="number_Animation row">
    <div class="col-sm-3">
        <div class="number_box"> 
            <span class="glyphicons glyph-user"> </span> <span class="animation  number" data-number="5300">0</span> 
        </div>
    </div>
    <div class="col-sm-3">
        <div class="number_box"> 
            <span class="glyphicons glyph-heart"> </span> <span class="animation  number" data-number="10321">0</span> 
        </div>
    </div>
    <div class="col-sm-3">
        <div class="number_box">
            <span class="glyphicons glyph-star"> </span> <span class="animation  number" data-number="4632">0</span> 
        </div>
    </div>
    <div class="col-sm-3">
        <div class="number_box"> 
            <span class="glyphicons glyph-bookmark"> </span> <span class="animation  number" data-number="6548">0</span> 
        </div>
    </div>
</div>

Style Ten


0WPRKS
0MEMBERS
0COMMENTS
0AWARDS
SOURCE CODE 
<div class="number_Animation_2 row">
    <div class="col-sm-3">
        <div class="number_box"> <span class="animation  number" data-number="9365">0</span>WPRKS </div>
    </div>
    <div class="col-sm-3">
        <div class="number_box"> <span class="animation  number" data-number="2134">0</span>MEMBERS </div>
    </div>
    <div class="col-sm-3">
        <div class="number_box"> <span class="animation  number" data-number="341">0</span>COMMENTS </div>
    </div>
    <div class="col-sm-3">
        <div class="number_box"> <span class="animation  number" data-number="3654">0</span>AWARDS </div>
    </div>
</div>

Style Eleven

5300
10321
4632
6548

SOURCE CODE 
<div class="number_Animation_3 row">
    <div class="col-md-3 col-sm-6">
        <div class="number_box"> 
            <span class="glyphicons glyph-user"> </span> <span class="animation  number" data-number="5300">0</span> 
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="number_box"> 
            <span class="glyphicons glyph-heart"> </span> <span class="animation  number" data-number="10321">0</span> 
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="number_box">
            <span class="glyphicons glyph-star"> </span> <span class="animation  number" data-number="4632">0</span> 
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="number_box"> 
            <span class="glyphicons glyph-bookmark"> </span> <span class="animation  number" data-number="6548">0</span> 
        </div>
    </div>
</div>

Style Twelve

0

Nulla consequat massa

$0

Nulla consequat massa

0 %

Nulla consequat massa

0 K

Nulla consequat massa


SOURCE CODE 
<div class="number_Animation_4 row">
    <div class="col-sm-3">
        <div class="number_box"> 
            <span class="glyphicons glyph-briefcase"> </span> <span class="animation  number" data-number="7">0</span> 
            <p>Nulla consequat massa </p>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="number_box"> 
            <span class="glyphicons glyph-globe"> </span><span class="unit">$</span> <span class="animation  number" data-number="32">0</span> 
            <p>Nulla consequat massa </p>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="number_box">
            <span class="glyphicons glyph-cloud-upload"> </span> <span class="animation  number" data-number="67">0</span> <span class="unit">%</span>
            <p>Nulla consequat massa </p>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="number_box"> 
            <span class="glyphicons glyph-send"> </span> <span class="animation  number" data-number="53">0</span> <span class="unit">K</span>
            <p>Nulla consequat massa </p>
        </div>
    </div>
</div>

Style Thirteen

$0

Option One

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna.

Read More

$0

Option Two

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna.

Read More

$0

Option Three

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna.

Read More

$0

Option Four

Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna.

Read More


SOURCE CODE 
<div class="number_Animation_5 row">
    <div class="col-sm-6 col-md-3">
        <div class="number_box"> $<span class="animation  number" data-number="100">0</span> </div>
        <h3>Option One</h3>
        <p>Content text 1 ... </p>
        <p><a href="#">Read More</a></p>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="number_box"> $<span class="animation  number" data-number="200">0</span> </div>
        <h3>Option Two</h3>
        <p>Content text 1 ... </p>
        <p><a href="#">Read More</a></p>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="number_box"> $<span class="animation  number" data-number="300">0</span> </div>
        <h3>Option Three</h3>
        <p>Content text 1 ... </p>
        <p><a href="#">Read More</a></p>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="number_box"> $<span class="animation  number" data-number="400">0</span> </div>
        <h3>Option Four</h3>
        <p>Content text 1 ... </p>
        <p><a href="#">Read More</a></p>
    </div>
</div>

Style Fourteen

0
Customers
0
Products
0
Followers
0
Reviews
0
Comments
0
Members
SOURCE CODE 
<div class="number_Animation_6 row">
    <div class="col-xs-6 col-sm-4 col-lg-2 number_bgcolor1">
        <div class="number_box"> <span class="animation  number" data-number="1800">0</span>
Customers </div>
    </div>
    <div class="col-xs-6 col-sm-4 col-lg-2 number_bgcolor2">
        <div class="number_box"> <span class="animation  number" data-number="720">0</span>
Products </div>
    </div>
    <div class="col-xs-6 col-sm-4 col-lg-2 number_bgcolor3">
        <div class="number_box"> <span class="animation  number" data-number="3600">0</span>
Followers </div>
    </div>
    <div class="col-xs-6 col-sm-4 col-lg-2 number_bgcolor4">
        <div class="number_box"> <span class="animation  number" data-number="950">0</span>
Reviews </div>
    </div>
    <div class="col-xs-6 col-sm-4 col-lg-2 number_bgcolor5">
        <div class="number_box"> <span class="animation  number" data-number="1430">0</span>
Comments </div>
    </div>
    <div class="col-xs-6 col-sm-4 col-lg-2 number_bgcolor6">
        <div class="number_box"> <span class="animation  number" data-number="260">0</span>
Members </div>
    </div>
</div>