"Website statistics animated"
Bootstrap 4.1.1 Snippet by MMLTech

Post to Facebook Tweet this

<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"> <div class="card statistics-card"> <i class="fas fa-font"></i> <div class="info d-flex flex-column"> <span class="mb-3">Served projects</span> <div class="incremental" data-increment="1000">0</div> </div> </div> </div> <div class="col-md-3 col-6"> <div class="card statistics-card"> <i class="fas fa-link"></i> <div class="info d-flex flex-column"> <span class="mb-3">Total hours</span> <div class="incremental" data-increment="1000">0</div> </div> </div> </div> <div class="col-md-3 col-6"> <div class="card statistics-card"> <i class="fas fa-coffee"></i> <div class="info d-flex flex-column"> <span class="mb-3">Coffee cups</span> <div class="incremental" data-increment="1000">0</div> </div> </div> </div> </div> </div> </section> </body> <div style="position: fixed;bottom: 5%;right: 5%;"> <h5 style="margin-bottom: 1rem;padding-bottom: 1rem;border-bottom: 1px solid #000;text-align: center;">Support my work @ MMLTech</h5> <div style="display: flex;align-items: center;"> <a style="margin-right:1rem;background: #d1e6fd;display: block;padding: 1rem;border-radius: 0.25rem;border: 1px solid #e9ecef;color: #000;font-weight: bold;" href="https://ko-fi.com/mmltech" target="_blank"><img src="https://storage.ko-fi.com/cdn/Kofi_Logo_Blue.svg" width="60px"/> Buy me a coffee</a> <a style="background: #d1e6fd;display: block;padding: 1rem;border-radius: 0.25rem;border: 1px solid #e9ecef;color: #000;font-weight: bold;" href="https://streamcd.net" target="_blank"><img src="https://streamcd.net/Assets/images/logo-white.png" width="60px" height="19px" /> My projects</a> </div> </div> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </html>
.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; } .card.statistics-card i.fa-font { color: #df151b; } .card.statistics-card i.fa-link { color: #409fdc; } .card.statistics-card i.fa-coffee { color: #301d15; } .card.statistics-card .info { margin-left: 20%; text-align: right; } .card.statistics-card .info span { color: #fff; font-weight: bold; font-size: 12px; text-transform: uppercase; } .card.statistics-card .info div { font-size: 3rem; font-weight: bold; color: #ffae00; } .section-title { padding-bottom: 40px; } .section-title h2 { font-size: 14px; font-weight: 500; padding: 0; line-height: 1px; margin: 0 0 5px 0; letter-spacing: 2px; text-transform: uppercase; color: #aaaaaa; font-family: "Poppins", sans-serif; } .section-title h2:after { content: ""; width: 120px; height: 1px; display: inline-block; background: #fff; margin: 4px 10px; } .section-title h1, .section-title p { margin: 0; font-weight: 700; text-transform: uppercase; font-family: "Poppins", sans-serif; color: #3c1874; font-size: 2rem; } .section-title h1 strong, .section-title p strong { color: #dc8615; }
$(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; }

Related: See More

Paper Dashboard
Animated Radio tab
Animated 3d social icon in css3
Bootstrap 4 Animated Dynamic Form

Questions / Comments: