Let's count to 9 using javascript and CSS

I was scrolling through Instagram and found a cool number counter, I thought they made it in javascript but after looking at hashtags #3dmax #animation I came to know it was made in 3D software. I was like, why not remake it in javascript (just for fun). After I created the animated counter, I shared it on my Instagram and got very positive reviews and many for the followers were asking for code and tutorials.

Creating the structure

The HTML structure is composed of 15 circles divs wrapped in a div, each row contains 3 circle divs so that we can show the numbers accurately

    
    <div class="container">
      
      <div class="circle"></div>
      <div class="circle"></div>
      ...

    </div>
    

Adding styles

I've kept this code simple so that readers can understand it easily, in CSS all I did is made 2 states of the circle, one is smaller grey in color which donates the inactive state and the second one is the .active class which makes the div bigger in size and colored to indicate the active state of the circle

    
        .circle{
          width: 60px;
          height: 60px;
          background-color: #536dfe;
          border-radius: 50%;
          display: inline-block;
          transform: scale(.2);
          background-color: #c4c4c4;
          transition: transform 1s ease-in-out;
        }

        .circle.active{
          transform: scale(1);
          background-color: #536dfe;
        }
    

Events handling

First of all, we need to define the pattern of each number so that it can change the DOM accordingly. What I did is, made an array and defined each number's pattern as shown below.

    
        var num_pattern = [
                  [ 
                    1, 1, 1,
                    1, 0, 1,
                    1, 0, 1,        //For 1
                    1, 0, 1,
                    1, 1, 1
                  ],
                  [
                    1, 1, 1,
                    0, 0, 1,
                    1, 1, 1,        //For 2
                    1, 0, 0,
                    1, 1, 1
                  ]
                  ...
            ];
    

0 indicates the inactive state and 1 indicates the active state

the main concept here is, each 0 and 1 in the pattern donates each element in the DOM. So if there is 1 in the 3rd index of an array, the 4th circle will be active ( Don't get confused here, Array starts from 0 😜)

now we have to change the number on every second so setTimeInteval will do the job. On every second we increment the number and check the number pattern in the array and update the DOM.

    
        var circles = document.querySelectorAll('.circle');
        var i = 0;

        setInterval(function(){
          incNum();
          // Increment the number at every 1 second
          i++;
        }, 1000);

        function incNum(){
          // Reset the counter when it reaches > 9
          if(i == 10) i = 0;

          for(z = 0; z < num_pattern[i].length; z++){
            if(num_pattern[i][z]){
              //If it has '1' then make the circle active
              //Check if the circle is already active
              if(!circles[z].classList.contains('active')){
                circles[z].classList.add("active");
              }
            } else {
              if(circles[z].classList.contains('active')){
                circles[z].classList.remove("active");
              }
            }
          }
        }
    

Note: Here we're only updating the DOM if required, this also gives the sweet effect to the animation

See the demo here

Note: This article was originally posted on my startup blog