HTML Number Counter

HTML Number Counter using jQuery

by Vikash Pareek

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="main-container">
  <li>
    <div>
      <span class="counter">200</span>
      <p>Project Completed</p>
    </div>
  </li>
  <li>
    <div>
      <span class="counter">5000</span>
      <p>Happy Customers</p>
    </div>
  </li>
  <li>
    <div>
      <span class="counter">4500</span>
      <p>Satisfied Clients</p>
    </div>
  </li>
  <li>
    <div>
      <span class="counter">9</span>
      <p>Year Of Businss</p>
    </div>
  </li>
</ul>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    font-family: sans-serif;
    background: #171a1c;
    padding-top: 5rem;
}
h1 {
    text-align: center;
    color: #fff;
}
.main-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 20px;
    padding: 0 20px;
}
.main-container li {
    border-radius: 15px;
    height: 200px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    box-shadow: 0px 4px 20px 1px #050b0c;
}
.main-container li span {
    color: #fff;
    font-size: 2rem;
    margin-bottom: 5px;
    display: block;
}
.main-container li div {
    text-align: center;
}
.main-container li p {
    font-size: 1rem;
    color: #9da3a6;
}
.main-container li span::after {
    content: "+";
    margin-left: 5px;
}
.main-container li:nth-child(2) {
    background: #22282a;
}
.main-container li:nth-child(3) {
    background: #303436;
}
.main-container li:last-child {
    background: #3d4143;
}

JavaScript

$('.counter').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});