Number Counting Animation | Counter Up Animation | HTML CSS & JavaScript [Responsive]

In this post we are showing how to design Number counting animation Counter up Animation using HTML, CSS and Java script.

Open widget and paste below code in it.

    <section>

      

      <div class="countcontainer">

        <header class="counter-heading">

            <h1>Number Counting Animation</h1>

        </header>

        <div class="counters">

            

            

        

            <div class="counter-wrapper">

                <span class="counter-icon">👨‍👩‍👧‍👧</span>

                <div class="counter-info">

                    <h1 class="counter" data-count="4">0</h1>

                    <p>Divisions</p>

                </div>

            </div>

           

         

            

            

            

         

            

            <div class="counter-wrapper">

                <span class="counter-icon">💼</span>

                <div class="counter-info">

                    <h1 class="counter" data-count="42536">0</h1>

                    <p>students</p>

                </div>

            </div>

          

           

            

            

            

            <div class="counter-wrapper">

                <span class="counter-icon">👨‍👧‍👧</span>

                <div class="counter-info">

                    <h1 class="counter" data-count="2190">0</h1>

                    <p>Teachers</p>

                </div>

            </div>

          

            

            

            

            

            <div class="counter-wrapper">

                <span class="counter-icon">👨‍👧‍</span>

                <div class="counter-info">

                    <h1 class="counter" data-count="128">0</h1>

                    <p> Schools</p>

                </div>

            </div>

            

            

            

            

        </div>

    </div>

    <script>

        const counters = document.querySelectorAll(".counter");

        counters.forEach(counter => {

            let initial_count = 0;

            const final_count = counter.dataset.count;

            // console.log(final_count);

            let  counting = setInterval(updateCounting, 1);

           function updateCounting() {

                if (initial_count < 1000) {

                    initial_count += 1;

                    counter.innerText = initial_count;

                }

                if (initial_count >= 1000) {

                    initial_count += 100;

                    counter.innerText = (initial_count / 1000).toFixed(1) + 'K+';

                }

                if (initial_count >= 10000) {

                    initial_count += 5000;

                }

                if (initial_count >= 1000000) {

                    initial_count += 500000;

                    counter.innerText = (initial_count / 1000000).toFixed(1) + 'M+';

                }

                if (initial_count >= final_count) {

                    clearInterval(counting);

                }

            }

        })

    </script>

then go to edit HTML and paste below code above <skin> tag,

/*

Number Counting Animation | Counter Up Animation | HTML CSS & JavaScript

Code written by:

👨🏻‍⚕️ Coding Design (Jeet Saru)

Modified for full responsiveness

*/

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

section {

    min-height: 100vh;

    background: linear-gradient(45deg, purple, blue);

}

.countcontainer {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 20px;

}

header.counter-heading {

    width: 100%;

    max-width: 900px;

    min-height: 150px;

    background: linear-gradient(45deg, gold, orangered);

    border-radius: 1rem;

    text-align: center;

    margin-bottom: 1.4rem;

    padding: 1rem;

    display: grid;

    place-items: center;

    box-shadow: 0 .2rem .2rem #0006;

    transition: .3s ease-in-out;

}

header.counter-heading h1 {

    font: 700 2.2rem sans-serif;

    color: #000;

}

header.counter-heading:hover,

.counter-wrapper:hover {

    transform: scale(1.05);

    cursor: pointer;

    filter: saturate(300%);

    box-shadow: 0 .2rem .2rem #0006;

}

.counters {

    width: 100%;

    max-width: 900px;

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    justify-content: center;

}

.counter-wrapper {

    flex: 1 1 calc(25% - 1rem);

    min-width: 200px;

    height: 9rem;

    border-radius: 1rem;

    padding: 1rem 2rem;

    display: flex;

    align-items: center;

    justify-content: space-around;

    transition: .3s ease-in-out;

    box-shadow: 0 .2rem .2rem #0006;

    color: #fff;

}

.counter-wrapper:nth-child(1) {

    background: linear-gradient(45deg, pink, crimson);

}

.counter-wrapper:nth-child(2) {

    background: linear-gradient(45deg, cyan, blue);

}

.counter-wrapper:nth-child(3) {

    background: linear-gradient(45deg, mediumspringgreen, green);

}

.counter-wrapper:nth-child(4) {

    background: linear-gradient(45deg, black, green);

}

.counter-icon {

    font-size: 2.5rem;

}

.counter-info {

    text-shadow: 1px 1px 1px #0007;

}

.counter-info h1.counter {

    font: normal 2.2rem sans-serif;

}

.counter-info p {

    font: normal 1rem sans-serif;

    margin-top: .4rem;

}

/* Tablet: 2 per row */

@media (max-width: 900px) {

    .counter-wrapper {

        flex: 1 1 calc(50% - 1rem);

    }

}

/* Mobile: 1 per row */

@media (max-width: 600px) {

    .counter-wrapper {

        flex: 1 1 100%;

        max-width: 400px;

        height: auto;

        padding: 1rem;

    }

    .counter-info h1.counter {

        font-size: 1.8rem;

    }

    .counter-info p {

        font-size: 0.9rem;

    }

}

Video link