"Website statistics animated"
Bootstrap 4.1.1 Snippet by MMLTech

Post to Facebook Tweet this

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
<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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<section class="gradient-section">
<div class="container-fluid my-5" id="ScrollPast">
<div class="row">
<div class="col-md-12">
<div class="section-title my-md-3 my-0">
<h2>Live statistics</h2>
<p><strong>How are we doing</strong></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-6">
<div class="card statistics-card">
<i class="fas fa-users"></i>
<div class="info d-flex flex-column">
<span class="mb-3">Satisfied clients</span>
<div class="incremental" data-increment="1000">0</div>
</div>
</div>
</div>
<div class="col-md-3 col-6">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
.gradient-section {
background: linear-gradient(-45deg, #6026ba 0%, #351567 35%, #212529);
background-size: 400% 400%;
animation: gradient 15s linear infinite;
padding: 70px 0;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.card.statistics-card {
position: relative;
background: none;
border: none;
padding: 2rem;
}
.card.statistics-card i {
position: absolute;
font-size: 10rem;
top: -3%;
opacity: 0.2;
}
@media only screen and (max-width: 921px) {
.card.statistics-card i {
font-size: 5rem;
}
}
.card.statistics-card i.fa-users {
color: #dedede;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready(function () {
increment();
});
function increment(){
$.each($(document).find('.incremental'), function () {
let me = $(this);
me.html('');
$({value: parseInt(me.html())}).animate({value: parseInt(me.attr('data-increment'))}, {
duration: Math.floor(Math.random() * (5000 - 1500 + 1) + 1500),
easing:'swing',
step: function() {
me.text(commaSeparateNumber(Math.round(this.value)));
}
});
})
}
function commaSeparateNumber(val){
while (/(\d+)(\d{3})/.test(val.toString())){
val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
}
return val;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro Angular
Animated Radio tab
Animated 3d social icon in css3
Bootstrap 4 Animated Dynamic Form

Questions / Comments: