This type of counter animation is most commonly used in business websites. For example, you can use this project in case you want to show the quantity of any product on your business website.
Below is a preview of this Number Countup Animation. Which will help you to know how it works. I used a nice background image on a web page as you saw above. On which four small boxes have been made. One icon, one number, and one test have been added to the box.
I have made the background of this simple count-up animation transparent. As a result, these small boxes can be seen almost transparently in the background.
I have already shared tutorials on creating many elements such as login forms, profile cards, etc. using transparent design.
How to Create a Responsive Count up Animation
Step 1: HTML Code of Count up Animation
I have added all the information using the following code. I made four boxes. In that box you can see the icon first, then the number count down, and then a text.
Step 2: Design the webpage with CSS
I have designed the webpage using the following CSS codes. Here an image is used in the background of the web page. You can use any background color instead of this image.
Step 3: Basic structure of Counter Up box
Now I have made the boxes of this counter. The backdrop-filter: blur (10px) has been used to make these boxes width: 28vmin, height: 28vmin, and some background obscure.
Step 4: Design the information of Counter Up Animation
Now I have designed icons, numbers, and text using the following codes. Icon’s color I blue, text and number color white has been used. You can change the color to your liking here.
Step 5: Make it responsive with CSS
If you just want to copy the code and use it in your work then the box below will help you. Below I have put together all the source code.
We hope that the above code and tutorial have helped you to create this Responsive Counter Up Animation. If there is any difficulty in assembling the codes, you can use the download button below.