X
GO
en-UScy-GB

ProgressBars Counters

Features   >   Short Codes   >   ProgressBars Counters

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>


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>


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

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



Web Design

11

HTML/CSS

Graphic Design

DNN


SOURCE CODE 
<div class="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>



Web Design

HTML/CSS

Graphic Design

DNN


SOURCE CODE 
<div class="loaded_list2">
    <p> Web Design </p>
    <div class="progress progress-striped active">
        <div data-width="90%" class="progress-bar animation animationwidth color_1_bg"><span></span></div>
    </div>
    <p> HTML/CSS</p>
    <div class="progress progress-striped active">
        <div data-width="95%" class="progress-bar animation animationwidth color_2_bg"><span></span></div>
    </div>
    <p>Graphic Design </p>
    <p> </p>
    <div class="progress progress-striped active">
        <div data-width="85%" class="progress-bar animation animationwidth color_3_bg"><span></span> </div>
    </div>
    <p>DNN</p>
    <div class="progress progress-striped active">
        <div data-width="75%" class="progress-bar animation animationwidth color_4_bg"><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

Phasellus dignissim, purus at ornare fermentum, massa nulla enim nec tortor.

0%

HTML5 & CSS3

Phasellus dignissim, purus at ornare fermentum, massa nulla enim nec tortor.

0%

Javascript

Phasellus dignissim, purus at ornare fermentum, massa nulla enim nec tortor.

0%

Programme

Phasellus dignissim, purus at ornare fermentum, massa nulla enim nec tortor.


SOURCE CODE 
<div class="chart_list3 row">
    <div class="col-sm-3">
        <div data-percent="65" class="percentage3">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <h2> Web Design</h2>
        <p>Phasellus dignissim, purus at ornare fermentum, massa nulla enim nec tortor.</p>
    </div>
    <div class="col-sm-3">
        <div data-percent="70" class="percentage3">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <h2> HTML5 & CSS3</h2>
        <p>Phasellus dignissim, purus at ornare fermentum, massa nulla enim nec tortor.</p>
    </div>
    <div class="col-sm-3">
        <div data-percent="85" class="percentage3">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <h2>Javascript</h2>
        <p>Phasellus dignissim, purus at ornare fermentum, massa nulla enim nec tortor.</p>
    </div>
    <div class="col-sm-3">
        <div data-percent="45" class="percentage3">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <h2> Programme</h2>
        <p>Phasellus dignissim, purus at ornare fermentum, massa nulla enim nec tortor.</p>
    </div>
</div>
0 Customers
0 Downloads
0 Themes
0 Supports
SOURCE CODE 
<div class="h2_bg pt-60 pb-60">
    <div class="dnn_layoutB">
        <div class="content_mid clearfix">
            <div class="pane_layout">
                <div class="row number_Animation2">
                    <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>

Web Design

HTML/CSS

Graphic Design

DNN

Web Design

HTML/CSS

Graphic Design

DNN

SOURCE CODE 
			
<div class=" row">
    <div class="col-sm-6">
        <div class="loaded_list4">
            <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>
    </div>
    <div class="col-sm-6">
        <div class="loaded_list4">
            <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>
    </div>
</div>


 


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


 



0%

Web Design

Duis autem vel eum iriure dolor in dolore eu feugiat nulla facilisis at vero eros et accumsan.

0%

HTML5 & CSS3

Duis autem vel eum iriure dolor in dolore eu feugiat nulla facilisis at vero eros et accumsan.

0%

Javascript

Duis autem vel eum iriure dolor in dolore eu feugiat nulla facilisis at vero eros et accumsan.

0%

Programme

Duis autem vel eum iriure dolor in dolore eu feugiat nulla facilisis at vero eros et accumsan.

SOURCE CODE 
			
			
<div class="chart_list4 row">
    <div class="col-sm-3">
        <div data-percent="65" class="percentage4">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <h2> Web Design</h2>
        <p>Duis autem vel eum iriure dolor in dolore eu feugiat nulla facilisis at vero eros et accumsan.</p>
    </div>
    <div class="col-sm-3">
        <div data-percent="70" class="percentage4">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <h2> HTML5 & CSS3</h2>
        <p>Duis autem vel eum iriure dolor in dolore eu feugiat nulla facilisis at vero eros et accumsan.</p>
    </div>
    <div class="col-sm-3">
        <div data-percent="85" class="percentage4">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <h2>Javascript</h2>
        <p>Duis autem vel eum iriure dolor in dolore eu feugiat nulla facilisis at vero eros et accumsan.</p>
    </div>
    <div class="col-sm-3">
        <div data-percent="45" class="percentage4">
            <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <h2> Programme</h2>
        <p>Duis autem vel eum iriure dolor in dolore eu feugiat nulla facilisis at vero eros et accumsan.</p>
    </div>
</div>