How to add Responsive Number Counting Using HTML, CSS, JS [Animation]

 In this post we are showing how to add responsive number counting using HTML,CSS,JS.

Go to Blogger dash board and Open a widget box and paste below code in it.

<!-- Custom CSS -->

    <div class="countcontainer">

      <!-- Header section -->

      <div class="header">

        <h4 class="title">Growing</h4>

        <h1 class="sub-title">Exponentially</h1>

      </div>

      <!-- Counters section -->

      <div class="counters">

        <!-- Counter 1 -->

        <div class="counter customer">

          <h2 class="number" ><span class="value" data-value="128">1</span></h2>

          <p class="detail">Schools</p>

        </div>

        <!-- Counter 2 -->

        <div class="counter project">

          <h2 class="number"><span class="value" data-value="4">1</span></h2>

          <p class="detail">Divisions</p>

        </div>

        <!-- Counter 3 -->

        <div class="counter employee">

          <h2 class="number"><span class="value" data-value="42536" >1</span></h2>

          <p class="detail">Students</p>

        </div>

        <!-- Counter 4 -->

        <div class="counter award">

          <h2 class="number"><span class="value" data-value="2190">1</span></h2>

          <p class="detail">Teachers</p>

        </div>

      </div>

    </div>

<script>

// Get allValues using querySelectorAll

let allValues = document.querySelectorAll(".value");

// Start the forEach loop for displaying the values

allValues.forEach((singleValue) => {

  let startValue = 0;

  let endValue = parseInt(singleValue.getAttribute("data-value"));

  let duration = Math.floor(10000 / endValue);

  // Counter for increaing the values & display

  let counter = setInterval(function () {

    startValue += 1;

    singleValue.textContent = startValue;

    // Clearing the interval

    if (startValue == endValue) {

      clearInterval(counter);

    }

  }, duration);

});

</script>

Add below css code above SKIN tag

/* General CSS */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: "Cairo", sans-serif;

}

/* Custom CSS */

.countcontainer {

  width: 100%;

  min-height: auto;

  background: linear-gradient(rgba(0, 0, 0, 0.8), #0b0b0b), url(assets/bg.jpg);

  background-size: cover;

  background-position: center;

  color: #fff;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  padding: 0 8%;

}

.countcontainer .header {

  padding: 0 0 60px 0;

}

.header .title {

  font-family: "Clicker Script", cursive;

  font-size: 42px;

  color: #ef7e39;

}

.header .sub-title {

  font-size: 48px;

  line-height: 1;

}

.countcontainer .counters {

  width: 100%;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-around;

}

.counters .counter {

  width: 220px;

  background-color: #fff;

  color: #000;

  padding: 30px 15px;

  margin: 10px;

  border-radius: 20px;

  cursor: pointer;

  background-position: left bottom;

  background-repeat: no-repeat;

  transition: all 0.5s;

}

.counters .counter:hover {

  box-shadow: rgba(229, 126, 57, 0.8) 0px 2px 8px 0px;

  transform: translateY(-5px);

}

.counters .customer {

  background-image: url(assets/counter_icon01.png);

}

.counters .project {

  background-image: url(assets/counter_icon02.png);

}

.counters .employee {

  background-image: url(assets/counter_icon03.png);

}

.counters .award {

  background-image: url(assets/counter_icon04.png);

}

.counters .counter .number {

  font-size: 40px;

  font-weight: 700;

}

.counters .customer .number {

  color: #fd297b;

}

.counters .project .number {

  color: #2760dc;

}

.counters .employee .number {

  color: #58c0cf;

}

.counters .award .number {

  color: #a667f8;

}

.counters .counter .detail {

  font-size: 18px;

  font-weight: 500;

}

/* Responsive Design */

@media (max-width: 620px) {

  .countcontainer {

    padding: 60px 6%;

  }

  .countcontainer .header {

    padding: 0 0 40px 0;

  }

  .counters .counter {

    width: 45%;

  }

}

@media (max-width: 540px) {

  .header .title {

    font-size: 32px;

  }

  .header .sub-title {

    font-size: 36px;

  }

  .counters .counter {

    width: 80%;

  }

}

video link