X
GO
en-UScy-GB

ProgressBars Counters

  Features   >   Short Codes   >   ProgressBars Counters

Style 1


0%
Web Design
0%
HTML5 & CSS3
0%
Graphic Design
0%
DNN

SOURCE CODE 
<div class="chart_list row">
    <div class="col-sm-3">
        <div data-percent="65" class="percentage">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        Web Design
    </div>
    <div class="col-sm-3">
        <div data-percent="70" class="percentage">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        HTML5 &amp; CSS3
    </div>
    <div class="col-sm-3">
        <div data-percent="85" class="percentage">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        Graphic Design
    </div>
    <div class="col-sm-3">
        <div data-percent="45" class="percentage">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        DNN
    </div>
</div>

 

Style 2

0%
Web Design
0%
HTML5 & CSS3
0%
Graphic Design
0%
DNN

SOURCE CODE 
<div class="chart_list2 row">
    <div class="col-sm-3">
        <div data-percent="65" class="percentage2">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        Web Design
    </div>
    <div class="col-sm-3">
        <div data-percent="70" class="percentage2">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        HTML5 &amp; CSS3
    </div>
    <div class="col-sm-3">
        <div data-percent="85" class="percentage2">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        Graphic Design
    </div>
    <div class="col-sm-3">
        <div data-percent="45" class="percentage2">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        DNN
    </div>
</div>

 


Web Design

HTML/CSS

Graphic Design

DNN


SOURCE CODE 
<div class="row loaded_list">
    <p> Web Design </p>
    <div class="progress progress-striped active">
        <div class="progress-bar animation animationwidth" data-width="90%"><span></span></div>
    </div>
    <p> HTML/CSS</p>
    <div class="progress progress-striped active">
        <div class="progress-bar animation animationwidth" data-width="95%"><span></span></div>
    </div>
    <p>Graphic Design
    </p>
    <div class="progress progress-striped active">
        <div class="progress-bar animation animationwidth" data-width="85%"><span></span> </div>
    </div>
    <p>DNN</p>
    <div class="progress progress-striped active">
        <div class="progress-bar animation animationwidth" data-width="75%"><span></span></div>
    </div>
</div>


 

Style 4

0
0
0
0

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

 

Style 5

Web Design

HTML/CSS

Graphic Design

DNN

SOURCE CODE 
<div class="loaded_list_2">
    <p> Web Design </p>
    <div class="progress progress-striped active">
        <div data-width="90%" class="progress-bar animation animationwidth"><span></span></div>
    </div>
    <p> HTML/CSS</p>
    <div class="progress progress-striped active">
        <div data-width="95%" class="progress-bar animation animationwidth"><span></span></div>
    </div>
    <p>Graphic Design </p>
    <div class="progress progress-striped active">
        <div data-width="85%" class="progress-bar animation animationwidth"><span></span> </div>
    </div>
    <p>DNN</p>
    <div class="progress progress-striped active">
        <div data-width="75%" class="progress-bar animation animationwidth"><span></span></div>
    </div>
</div>

 

Style 6

Web Design

Html5 & CSS3

JavaScript

Photoshop

dnn

ASp.net

SOURCE CODE 
<div class="row">
            <div class="col-sm-6">
                <div class="loaded_list3">
                    <p> Web Design </p>
                    <div class="progress progress-striped active">
                        <div data-width="95%" class="bar animation animationwidth"><span></span></div>
                    </div>
                    <p> Html5 & CSS3</p>
                    <div class="progress progress-striped active">
                        <div data-width="75%" class="bar animation animationwidth"><span></span></div>
                    </div>
                    <p>JavaScript</p>
                    <div class="progress progress-striped active">
                        <div data-width="80%" class="bar animation animationwidth"><span></span> </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="loaded_list3">
                    <p>Photoshop</p>
                    <div class="progress progress-striped active">
                        <div data-width="70%" class="bar animation animationwidth"><span></span></div>
                    </div>
                    <p>dnn</p>
                    <div class="progress progress-striped active">
                        <div data-width="85%" class="bar animation animationwidth"><span></span></div>
                    </div>
                    <p>ASp.net</p>
                    <div class="progress progress-striped active">
                        <div data-width="75%" class="bar animation animationwidth"><span></span></div>
                    </div>
                </div>
            </div>
        </div>

 

Style 7

0%
Web Design
0%
HTML5 & CSS3
0%
Graphic Design
0%
DNN
SOURCE CODE 
<div class=" H3_OurSkills_bg  pt-50 pb-30">
    <div class="chart_list4 row chart_list4_font ">
        <div class="col-sm-3">
            <div class="percentage2" data-percent="65">
                <div class="percentage_inner"><span>0</span>%</div>
            </div>
            Web Design </div>
        <div class="col-sm-3">
            <div class="percentage2" data-percent="70">
                <div class="percentage_inner"><span>0</span>%</div>
            </div>
            HTML5 & CSS3 </div>
        <div class="col-sm-3">
            <div class="percentage2" data-percent="85">
                <div class="percentage_inner"><span>0</span>%</div>
            </div>
            Graphic Design </div>
        <div class="col-sm-3">
            <div class="percentage2" data-percent="45">
                <div class="percentage_inner"><span>0</span>%</div>
            </div>
            DNN </div>
    </div>
</div>