<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="counter">
<div class="counter-icon">
<i class="fa fa-globe"></i>
</div>
<div class="counter-content">
<h3>Web Designing</h3>
<span class="counter-value">303</span>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="counter magenta">
<div class="counter-icon">
<i class="fa fa-rocket"></i>
</div>
<div class="counter-content">
<h3>Web Development</h3>
<span class="counter-value">286</span>
</div>
</div>
</div>
</div>
</div>
.counter{
font-family: 'Heebo', sans-serif;
text-align: center;
width: 201px;
padding: 20px 0 55px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.counter:before{
content: '';
background: #9B16FF;
height: 200px;
width: 200px;
border-radius: 50% 50% 20px;
transform: rotate(45deg);
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.counter .counter-content{
color: #fff;
height: 160px;
width: 160px;
padding: 50px 10px 20px;
margin: 0 auto;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5),0 0 0 10px #fff;
}
.counter h3{
font-size: 17px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0 0 10px;
}
.counter .counter-value{
font-size: 35px;
font-weight: 600;
line-height: 30px;
display: block;
}
.counter:hover .counter-value{ text-shadow: 0 0 4px rgba(0, 0, 0, 0.5) }
.counter .counter-icon{
color: #fff;
font-size: 25px;
transform: translateX(-50%);
position: absolute;
left: 50%;
bottom: 4px;
transition: all 0.3s;
}
.counter:hover .counter-icon i{
transform: rotateY(0);
transition: all 0.3s;
}
.counter:hover .counter-icon i{
transform: rotateY(360deg);
text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}
.counter.magenta:before,
.counter.magenta .counter-content:before{
background-color: #d11094;
}
.counter.red:before,
.counter.red .counter-content:before{
background-color: #d82222;
}
.counter.blue:before,
.counter.blue .counter-content:before{
background-color: #344aba;
}
@media screen and (max-width:990px){
.counter{ margin-bottom: 30px; }
}
$(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));
}
});
});
});
