Numbers Counting Animation Using HTML ,CSS & JavaScript

Hey Guys, In Today’s Blog We are going to see How to create a Numbers Counting Animation using Html, Css, and a little bit of JavaScript.in this project we have numbers in div so when the page loads number counting starts and end at the number that we give in div.

50+ HTML, CSS & JavaScript Projects With Source Code

For that, the respective source codes were given below along with the respective preview of the output section. So you can make use of that.

Now The Project is going to create and for that we are first adding an HTML Code.

HTML Code For Numbers Counting Animation:

<h1>Animation Counter</h1>

<div class="con">
  <div class="number"><span class="count">150</span></div>
  <div class="number"><span class="count">200</span></div>
  <div class="number"><span class="count">500</span></div>
  <div class="number"><span class="count">320</span></div>
  <div class="number"><span class="count">250</span></div>
  <div class="number"><span class="count">10</span></div>

</div>

First We are adding an heading using H1 tag and then a div class with name “con” is created. Now inside of div class there are six more div class and span class is added whose names are same. After that a values were added from 10 to 150 for making counting.

How To Create OTP Input Field Using HTML , CSS & Javascript

So That’s of for HTML , Now we are going for CSS to make it look attractive.

CSS Code For Numbers Counting Animation:

h1 {
  color: red;
  text-align: center;
  font-size: 50px;
}

.con {
  margin-left: 300px;
}

.count {
  float: left;
  margin: 10px;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  text-align: center;
}

.number {
  line-height: 90px;
  color: blue;
  margin-left: 0;
  font-size: 25px;
}

First We calling out the h1 tag and making the text to center with font size and color. Now the header div class “con” is called and adding the margin left for 300px to move it 300px from left side of web page.

Second We calling out the span class and adding float , margin , padding, width , height , BG color, border radius , and text align to make alignments and styling according to properties given.

Portfolio Website using HTML and CSS (Source Code)

Third , Now we calling the div class that contains same class names and adding the properties like line height for spaces then color , margin-left and size for the counting numbers.

So that’s of for CSS ,  Now we go for Java script to make the numbers for counting it.

JavaScript Code For Numbers Counting Animation:

//each, prop, animate, math, text

//.animate( properties [, duration ] [, easing ] [, callback ] )
//"swing" - moves slower at the beginning/end, but faster in the middle
//"linear" - moves in a constant speed
//step : A function to be called after each step of the animation.  step takes: now and fx.
//$(selector).prop(name,value)

$('.count').each(function() {

  $(this).prop('counter', 0).animate({

    counter: $(this).text()

  }, {

    duration: 4000,

    easing: 'swing',

    step: function(now) {

      $(this).text(Math.ceil(now));
    }
  });
});

First Here We calling out the div class that contains name .count and creating an function and inserting for every function we are showing the texts which is numbers.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Then we fixing out the animation duration to 4000 and ease animation to swing which means it starts and ends slowly but might be faster in middle. After that the step is function which makes the function called after each step of animation.

Then Lastly this text is called and using Math.ceil property we are declaring the text to do the counter animation.

//Math.ceil Declares the smallest integer >= given number //

So that’s of JS , Now We have successfully completed our project by adding source codes and now we can go for project preview in the below section.

Final Output Counting Numbers Animation:

Now We have Successfully created our Counting Numbers Animation Using HTML , CSS and JAVA SCRIPT. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

REFER CODE- Abdo Hassan

WRITTEN BY- Ragunathan