en-UScy-GBbr-FR
X

ProgressBars Counters

  Feature   >   Short Codes   >   ProgressBars Counters

0%

HTML5

0%

PHOTOSHOP

0%

CORELDRAW

0%

CSS3


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>%<p>HTML5</p></div>
        </div>
    </div>
    <div class="col-sm-3">
        <div data-percent="70" class="percentage1">
            <div class="percentage_inner"><span>0</span>%<p>PHOTOSHOP</p></div>
        </div>
    </div>
    <div class="col-sm-3">
        <div data-percent="85" class="percentage1">
            <div class="percentage_inner"><span>0</span>%<p>CORELDRAW</p></div>
        </div>
    </div>
    <div class="col-sm-3">
        <div data-percent="92" class="percentage1">
            <div class="percentage_inner"><span>0</span>%<p>CSS3</p></div>
        </div>
    </div>
</div>

PHOTOSHOP

ILLUSTRATOR

COREL DRAWL

DNN


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

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

0%

Web Design

Cras suscipit, quam vitae laoreet odio, a porttitor metus massa convallis.

0%

Web Design

Cras suscipit, quam vitae laoreet odio, a porttitor metus massa convallis.

0%

Web Design

Cras suscipit, quam vitae laoreet odio, a porttitor metus massa convallis.

0%

Web Design

Cras suscipit, quam vitae laoreet odio, a porttitor metus massa convallis.

SOURCE CODE 
<div class="chart_list1 row">
    <div class="col-md-3 col-sm-6">
        <div data-percent="95" class="percentage2">
            <div class="percentage_inner"><span>0</span></div>
        </div>
		<h3>Web Design</h3>
		<p>Cras suscipit, quam vitae  laoreet odio, a porttitor metus  massa convallis.</p>
    </div>
    <div class="col-md-3 col-sm-6">
        <div data-percent="75" class="percentage2">
            <div class="percentage_inner"><span>0</span></div>
        </div>
		<h3>Web Design</h3>
		<p>Cras suscipit, quam vitae  laoreet odio, a porttitor metus  massa convallis.</p>
    </div>
    <div class="col-md-3 col-sm-6">
        <div data-percent="82" class="percentage2">
            <div class="percentage_inner"><span>0</span></div>
        </div>
		<h3>Web Design</h3>
		<p>Cras suscipit, quam vitae  laoreet odio, a porttitor metus  massa convallis.</p>
    </div>
    <div class="col-md-3 col-sm-6">
        <div data-percent="64" class="percentage2">
            <div class="percentage_inner"><span>0</span></div>
        </div>
		<h3>Web Design</h3>
		<p>Cras suscipit, quam vitae  laoreet odio, a porttitor metus  massa convallis.</p>
    </div>
</div>