counter style : demo 160

1

Web Designing

1

Web Development

1

Brand Building

1

Responsive Design

HTML

(Icons : Fontawesome & CSS Framwork: Bootstrap)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="counter">
                <span class="counter-value">0</span>
                <h3>Web Designing</h3>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="counter purple">
                <span class="counter-value">0</span>
                <h3>Web Development</h3>
            </div>
        </div>
    </div>
</div>

CSS

(Fonts required: Poppins.)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
.counter{
    color: #444;
    font-family: 'Poppins', sans-serif;
    text-align: center;
}
.counter .counter-value{
    color: #fff;
    font-size: 33px;
    font-weight: 600;
    line-height: 128px;
    height: 140px;
    width: 140px;
    margin: 0 auto 10px;
    border-radius: 50% 0 50% 50%;
    border: 7px solid #FF2B08;
    border-right-color: transparent;
    display: block;
    position: relative;
    z-index: 1;
}
.counter .counter-value:before{
    content: '';
    background: linear-gradient(to right bottom,#FF2B08,#FE9C04);
    border-radius: 50%;
    box-shadow: 0 0 10px -3px rgba(0,0,0,0.5);
    position: absolute;
    left: 6px;
    top: 6px;
    bottom: 6px;
    right: 6px;
    z-index: -1;
}
.counter h3{
    color: #555;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    margin: 0;
}
.counter.purple .counter-value{
    border-color: #6101E5;
    border-right-color: transparent;
}
.counter.purple .counter-value:before{
    background: linear-gradient(to right bottom,#6101E5,#9F27E8);
}
.counter.blue .counter-value{
    border-color: #0284F3;
    border-right-color: transparent;
}
.counter.blue .counter-value:before{
    background: linear-gradient(to right bottom,#0284F3,#1DC0E1);
}
.counter.pink .counter-value{
    border-color: #435CF8;
    border-right-color: transparent;
}
.counter.pink .counter-value:before{
    background: linear-gradient(to right bottom,#435CF8,#FF4674);
}
@media screen and (max-width:990px){
    .counter{ margin-bottom: 40px; }
}

JavaScript

(Counter depend on jQuery.)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
 
$(document).ready(function(){
    $('.counter-value').each(function(){
        $(this).prop('Counter',0).animate({
            Counter: $(this).text()
        },{
            duration: 3500,
            easing: 'swing',
            step: function (now){
                $(this).text(Math.ceil(now));
            }
        });
    });
});
License Terms