X
en-UScy-GBbr-FR

ProgressBars Counters

Features > Short Codes > ProgressBars Counters
0%
Web Design
0%
DNN
0%
Html5 & CsS3
0%
Jquery

SOURCE CODE 
 
<div class="row ourteam_c">
    <div class="col-md-3 col-sm-6">
        <div class="color1">
            <div class="percentage2" data-percent="91">
                <div class="percentage_inner"><span>0</span>%
                    <h6>Web Design</h6>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="color2">
            <div class="percentage2" data-percent="86">
                <div class="percentage_inner"><span>0</span>%
                    <h6>DNN</h6>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="color3">
            <div class="percentage2" data-percent="76">
                <div class="percentage_inner"><span>0</span>%
                    <h6>Html5 &amp; CsS3</h6>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="color4">
            <div class="percentage2" data-percent="96">
                <div class="percentage_inner"><span>0</span>%
                    <h6>Jquery</h6>
                </div>
            </div>
        </div>
    </div>
</div>

Web Design

Html5 & CSS3

DNN

Photoshop

Jquery


SOURCE CODE 
 
<div class="loaded_list">
    <p> Web Design </p>
    <div class="progress progress-striped active">
        <div data-width="88%" class="bar animation animationwidth"><span></span></div>
    </div>
    <p> Html5 &amp; CSS3</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="95%" class="bar animation animationwidth"><span></span> </div>
    </div>
    <p>Photoshop</p>
    <div class="progress progress-striped active">
        <div data-width="60%" class="bar animation animationwidth"><span></span></div>
    </div>
    <p> Jquery </p>
    <div class="progress progress-striped active">
        <div data-width="90%" class="bar animation animationwidth"><span></span></div>
    </div>
</div>
0%
Web Design
0%
Html5 & CsS3
0%
DNN
0%
Jquery

SOURCE CODE 
 
<div class="row pt60">
    <div class="col-md-3 col-sm-6">
        <div class="con_d">
            <div class="percentage1" data-percent="91">
                <div class="percentage_inner"><span>0</span>%</div>
            </div>
            <h6>Web Design</h6>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="con_d">
            <div class="percentage1" data-percent="81">
                <div class="percentage_inner"><span>0</span>%</div>
            </div>
            <h6>Html5 &amp; CsS3</h6>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="con_d">
            <div class="percentage1" data-percent="96">
                <div class="percentage_inner"><span>0</span>%</div>
            </div>
            <h6>DNN</h6>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="con_d">
            <div class="percentage1" data-percent="71">
                <div class="percentage_inner"><span>0</span>%</div>
            </div>
            <h6>Jquery</h6>
        </div>
    </div>
</div>

Web Design

Html5 & CSS3

JavaScript

Photoshop

dnn

ASp.net


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

SOURCE CODE 
 
<div class="con_k pt60 pb60">
    <div class="dnn_layout">
        <div class="content_mid clearfix">
            <div class="pane_layout">
                <div class="row number_Animation">
                    <div class="col-md-3 col-sm-6">
                        <div class="number_box">
                            <span class="animation number" data-number="12578">0</span>
                            <span class="number_name">Customers</span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="number_box">
                            <span class="animation number" data-number="2660">0</span>
                            <span class="number_name">Downloads</span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="number_box">
                            <span class="animation number" data-number="520">0</span>
                            <span class="number_name">Themes</span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="number_box">
                            <span class="animation number" data-number="3900">0</span>
                            <span class="number_name">Supports</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>