Count Digits From Start to End Value

This JavaScript code snippet helps you to count digits from start to end value. It’s useful for displaying dynamic numerical changes on a webpage. The method `countTo` manages the animation, updating values smoothly over a specified duration. It’s handy for showcasing stats or metrics dynamically.

You can use this code in websites to display live statistics or changing numbers. It’s great for showcasing dynamic data like social media followers or real-time updates. One benefit is its ability to create engaging animations for numerical information, making your website more interactive.

How to Count Digits From Start To End Value

1. First of all, add the following HTML structure into your webpage.

<div class="container">
        <header>
            <div class="bio">
                <div class="desc">
                    <h3><a href="https://twitter.com/aymanfarhat">@aymanfarhat</a></h3>
                    <p>Computer programming is the greatest form of self expression, I enjoy building software, 
                        web apps and writing about code.</p>
                </div>
            </div>
        </header>
        <div class="content">
            <div class="data">
                <ul>
                    <li>
                        <span class="num tweets" style="color:#99CC00">0</span>
                        <span class="title title-tweets">Tweets</span>
                    </li>
                    <li>
                    <span class="num followers" style="color:#FFBB33">0</span>
                        <span class="title title-followers">Followers</span>
                    </li>
                    <li>
                        <span class="num following" style="color:#FF4444">0</span>
                        <span class="title title-following">Following</span>
                    </li>
                </ul>
            </div>
            <div class="actions">
                <a href="https://github.com/aymanfarhat/CountToJS">Fork on Github</a>
                <a href="#" class="restart-count" style="visibility:hidden;">Restart Counter</a>
            </div>
        </div>
    </div>    
  <a href="https://github.com/aymanfarhat/CountToJS"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>

2. Now, style the basic interface for the animated digits. Adjust colors and styles to match your website’s theme. Customize the appearance of titles, values, and the restart button:

body{
    font-size: 14px;
    font-family: "Ubuntu";
    background-color:#ecf0f1;
}

h3 a{
    text-decoration:none;
    color: #0099CC;
}

.container{
    width: 320px;
    margin: 3em auto 1em auto;
    padding:8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
    padding-bottom: 1.5em;
    background-color: #dde1e2;
    -webkit-box-shadow: #bdc3c7 0 5px 5px;
    -moz-box-shadow: #bdc3c7 0 5px 5px;
    box-shadow: #bdc3c7 0 5px 5px;
    text-align:center;
}

.data{color:#81878b;margin-top:1em;}
.data ul{-webkit-padding-start: 0;}
.data li{
    width: 32%;
    text-align: center;
    display: inline-block;
    font-size: 2em;
    border-right: solid 1px #bdc3c7;
}

.data li:last-child{border:none;}

.data li span.title{
    display: block;
    text-transform: uppercase;
    font-size: .5em;
    margin-top: .6em;
    font-weight: 700;
}

.actions{
    text-align: center;
    margin-top:2em;
}

.actions a{
    margin: 10px 15px;
    background-color: #0099CC;
    width: 150px;
    color: white;
    padding: .5em;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    text-decoration:none;
}

3. Make sure to include the required dependencies in your HTML file. Add the jQuery library by using the following CDN link:

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

4. Finally, copy the following JavaScript code for CountToJS and add it to your project. This code enables animated counting functionality.

(function($) {
$.fn.countTo = function(options){
    options = $.extend({}, $.fn.countTo.defaults, options || {});

    var loops = Math.ceil(options.speed / options.refreshInterval),
        increment = (options.to - options.from) / loops;

    return $(this).each(function(){
        var _this = this,
            loopCount = 0,
            value = options.from,
            interval = setInterval(updateTimer, options.refreshInterval);

        function updateTimer(){
            value += increment;
            loopCount++;
            $(_this).html(value.toFixed(options.decimals));

            if (typeof(options.onUpdate) == 'function'){
                options.onUpdate.call(_this, value);
            }

            if (loopCount >= loops){
                clearInterval(interval);
                value = options.to;

                if (typeof(options.onComplete) == 'function'){
                    options.onComplete.call(_this, value);
                }
            }
        }
    });
};

$.fn.countTo.defaults = {
    from: 0,
    to: 100,
    speed: 1000,
    refreshInterval: 100,
    decimals: 0,
    onUpdate: null,
    onComplete: null,
};
})(jQuery);

/** Target values **/
var tweets = 11154,
    followers = 953,
    following = 627;

/** Elements holding the values **/
var val_tweets = $('.tweets'),
    val_followers = $('.followers'),
    val_following = $('.following');

/** Text description elements **/
var title_tweets = $('.title-tweets'),
    title_followers = $('.title-followers'),
    title_following = $('.title-following');

setTimeout(function(){
    animateCount();
},1500);

function animateCount(){
    $('.restart-count').css('visibility','hidden');

    /** Reset colors **/
    title_tweets.css('color','#81878b');
    title_followers.css('color','#81878b');
    title_following.css('color','#81878b');
    
    /** Reset the values **/
    val_tweets.html("0");
    val_followers.html("0");
    val_following.html("0");

    val_tweets.countTo({
        from: 0,
        to: tweets,
        speed: 5000,
        refreshInterval:20,
        onComplete:function(){
            title_tweets.css('color','#669900');
            val_followers.countTo({
                from: 0,
                to: followers,
                speed: 5000,
                refreshInterval:20,
                onComplete:function(){
                    title_followers.css('color','#FF8800');
                    val_following.countTo({
                        from: 0,
                        to: following,
                        speed: 5000,
                        refreshInterval:20,
                        onComplete:function(){
                            title_following.css('color','#CC0000');
                            $('.restart-count').css('visibility','visible');
                        }
                    });
                }
            });
        }
    });
}

$('.restart-count').click(function(){
    animateCount();
});

That’s all! hopefully, you have successfully created animated numbers to count digits on your webpage. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.