Counters are commonly featured on websites to display the progress of a business. They showcase various metrics like the number of interests, visits, likes, and more to visitors. These counters increment as user engagement and visits increase.
Typically, the counter component is placed towards the bottom of the webpage, often within the footer section. It showcases the progress information of the website to indicate the level of growth your business is experiencing. The counter value increments in tandem with the growth of the business. An example of an HTML counter frequently observed at the bottom of websites is illustrated below.
HTML enables the creation of the user interface for the counter, while JavaScript is utilized to fetch and count visitors in real-time dynamically. The website data will be anticipated by us on the user and visitor's behalf.
This chapter will be segmented into two parts focusing on the creation of a counter. The initial part will involve the development of a basic counter design, while the subsequent section will delve into the CSS styling of the counter. Various illustrations showcasing these processes will be presented throughout this chapter.
Steps to create HTML counter
Below are the steps to build a fixed counter using HTML and CSS:
Step 1: Generate a basic layout by utilizing HTML <div> elements.
Step 2 involves enhancing the visual appeal of the counter by incorporating CSS styling.
Step 3: In order to incorporate small icons such as a suitcase, coffee cup, smiley face, user icon, book, and others along with a counter, you can utilize the Bootstrap CDN link along with the corresponding code.
Step 4: To obtain the Font Awesome code from the bootstrap CDN, simply click on the provided link https://www.bootstrapcdn.com/fontawesome/.
Step 5: Copy the provided Font Awesome CSS link and insert it within the designated <link> tab under the href parameter. Incorporate this code snippet within the specified <head> section of the HTML markup.
For example -
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Step 5: Additionally, it is necessary to insert another code within the designated <body> tag in order to incorporate the icon associated with the specific counter.
Step 6: Next, in order to access a variety of icons, navigate to the font awesome icon library. Within this library, there are numerous icons available for selection. Choose the specific icon you wish to include and obtain the corresponding code.
As an illustration, let's incorporate a suitcase button. Look for the suitcase symbol within the search bar icons and obtain its corresponding code.
Step 7: Paste the provided code snippet into the desired location to incorporate the icon. Feel free to eliminate any surplus code that is not essential for this task.
You can also write this code only as given below.
Copy suitcase icon code:
<i class="fa fa-suitcase"></i>
Take a look at the following HTML and CSS code provided below to insert and style the counter segment.
Create the structure of counter
In this tutorial, we'll utilize HTML markup to craft a basic counter layout that is segmented into four parts for showcasing four distinct website metrics. In this instance, we'll employ fontawesome symbols to depict various functionalities.
Integrate the provided link into your code to apply styles to the icons and utilize the awesome font.
CDN link for awesome font and icons:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Example
Below is a basic illustration of a static counter created through straightforward HTML design. In this instance, the counter's value is predetermined by the developer and remains constant. The counter's value can solely be adjusted within the HTML code.
HTML code example
<html>
<head>
<!-- add the following awesome font to the webpage -->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<center>
<h1 style="color:green"> C# Tutorial </h1>
<h3> Counter Section using HTML and CSS </h3>
<p> Hello, Welcome to our Website! </p>
<p> Look at the counter section above, which basically shows the growth of the business. </p>
<div class="row">
<div class="column">
<div class="block">
<!-- Add user icon to the counter -->
<p><i class="fa fa-user"></i></p>
<h3> 65+ </h3>
<p> Projects </p>
</div>
</div>
<div class="column">
<div class="block">
<!-- Add book icon to the counter -->
<p><i class="fa fa-book"></i></p>
<h3> 75k+ </h3>
<p> Articles </p>
</div>
</div>
<div class="column">
<div class="block">
<!-- Add smilie icon to the counter -->
<p><i class="fa fa-smile-o"></i></p>
<h3> 150+ </h3>
<p> Happy Clients </p>
</div>
</div>
<div class="column">
<div class="block">
<!-- Add coffee cup icon to the counter -->
<p><i class="fa fa-coffee"></i></p>
<h3> 100+ </h3>
<p> Meetings </p>
</div>
</div>
</div>
</center>
</body>
</html>
Output
Run the code to display a counter at the bottom of the webpage. The counter will be accompanied by an icon, as illustrated in the following output:
CSS code example
Next, we are going to generate the CSS code that will be applied to the previous code to style the counter section. This CSS will enhance the visual appeal of the counter structure by adding styling elements.
<style>
* {
box-sizing: border-box;
}
.column {
/* box toward left of the window screen */
float: left;
/*set size for each counter box */
width: 25%;
/*spacing between each box */
padding: 4px;
}
.row {
/* Specify the margin for the row class */
margin: 3px;
}
/* Style the class named block */
.block {
padding: 10px;
text-align: center;
background-color: green;
color: white;
}
/* Provide styling for when mouse will move over the counter*/
.block:hover {
transform: scale(1.1);
background-color: brown;
transition-duration: 2s;
color: white;
}
.fa {
font-size: 50px;
}
</style>
Complete Code for Counter section with CSS
Integrate the HTML and CSS code to form a comprehensive code for the counter section. Observe the outcome of incorporating CSS styling into the HTML code.
Copy Code
<html>
<head>
<!-- add the following awesome font to the webpage -->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
box-sizing: border-box;
}
.column {
/* box toward left of the window screen */
float: left;
/*divide each counter box in equal size*/
/* 4 counters of 25% of screen size*/
width: 25%;
/*spacing between each box */
padding: 4px;
}
.row {
/* Specify the margin for the row class */
margin: 3px;
}
/* Style the class named block*/
.block {
padding: 10px;
text-align: center;
background-color: green;
color: white;
}
/* Provide styling for when mouse will move over the counter*/
.block:hover {
transform: scale(1.1);
background-color: brown;
transition-duration: 2s;
color: white;
}
.fa {
font-size: 50px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green"> C# Tutorial </h1>
<h3> Counter Section using HTML and CSS </h3>
<p> Hello, Welcome to our Website! </p>
<p> Look at the counter section above, which basically shows the growth of the business. </p>
<div class="row">
<div class="column">
<div class="block">
<!-- Add user icon to the counter -->
<p><i class="fa fa-user"></i></p>
<h3> 65+ </h3>
<p> Projects </p>
</div>
</div>
<div class="column">
<div class="block">
<!-- Add book icon to the counter -->
<p><i class="fa fa-book"></i></p>
<h3> 75k+ </h3>
<p> Articles </p>
</div>
</div>
<div class="column">
<div class="block">
<!-- Add smilie icon to the counter -->
<p><i class="fa fa-smile-o"></i></p>
<h3> 150+ </h3>
<p> Happy Clients </p>
</div>
</div>
<div class="column">
<div class="block">
<!-- Add coffee cup icon to the counter -->
<p><i class="fa fa-coffee"></i></p>
<h3> 100+ </h3>
<p> Meetings </p>
</div>
</div>
</div>
</center>
</body>
</html>
Output
Upon saving and running this code in a web browser, a counter will be displayed on the webpage. To view the output of the code in Google Chrome, refer to the screenshot provided above.
The hover effect has been implemented on the counter boxes. As you hover over any of the counter boxes with the mouse, the color of the specific box will transition to a different shade. Feel free to experience these effects firsthand.
Note: Change the size of the screen and see the output for different screen sizes.
Example 2: HTML counter-up
Here is a different illustration of an HTML counter. Let's generate an HTML counter that increments up to a specified number determined by the developer. Nonetheless, this counter is not dynamic.
In this instance, we will demonstrate how to set a background color and generate four separate counter variables vertically by utilizing HTML and CSS.
Complete code
Examine the full HTML code snippet for implementing a counterUP functionality:
Copy Code
<html>
<head>
<title> Counter using HTML </title>
<!-- Add bootstrap cdn code link to the code -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Add awesome font CSS link to the code -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Add colors in the background */
body {
background-image: linear-gradient(rgba(49,0,255,0.8), rgba(132,5,29,0.8)),url(banner.jpg);
background-size: cover;
}
.counter-section {
margin: 10% auto;
color: white;
}
.row {
margin: 5px;
}
.col-md-3 {
width: 25%;
padding: 4px;
}
/* provide styling to icons */
.fa {
float: left;
font-size: 50px;
padding: 8px;
border: 1px solid #fff;
}
</style>
<body>
<div class="container counter-section">
<div class="row">
<div class="col-md-3">
<i class="fa fa-briefcase"> </i>
<h4 class="counter"> 175 </h4>
<p> Projects Completed </p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<i class="fa fa-users"> </i>
<h4 class="counter"> 520 </h4>
<p> Users Connected </p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<i class="fa fa-coffee"> </i>
<h4 class="counter"> 150 </h4>
<p> Meetings </p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<i class="fa fa-trophy"> </i>
<h4 class="counter"> 319 </h4>
<p> Global Achievement </p>
</div>
</div>
</div>
<script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script>
<script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script>
<script>
jQuery(document).ready(function( $ )
{
$('.counter').counterUp({
delay: 10,
time: 1000
});
});
</script>
</body>
</html>
Output
Run the provided code and examine the output displayed in the screenshot below:
Every time the page is refreshed or loaded, the counter will increment up to the specified number set by the developer in the code.
Explained steps for the above code
Below are the steps to develop an HTML counter-up feature using HTML, CSS, and incorporating specific jQuery script references. Please adhere to the instructions provided:
Step 1: Establish a basic layout by employing HTML <div> elements along with class attributes for design customization.
Step 2 involves enhancing the visual appeal of the counter by incorporating CSS styling.
Step 3: Utilize the Bootstrap CDN link and code to incorporate various small icons such as a suitcase, coffee cup, smiley face, user icon, and book, along with a counter.
Step 4: To obtain the Font Awesome code for the Bootstrap CDN, simply click on the provided link https://www.bootstrapcdn.com/fontawesome/.
Step 5: Duplicate the Font Awesome CSS link provided here and insert it into the designated area within the href parameter in the <link> tab. Incorporate this element within the <head> section of the HTML markup.
For example -
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Step 5: Additionally, it is necessary to insert an extra code within the designated <body> tag in order to incorporate the icon alongside the specific counter.
Step 6: To access a variety of icons, navigate to the Font Awesome icon library. Within this library, you will find an extensive collection of icons. Choose the icon you wish to incorporate into your project and retrieve the corresponding code.
As an illustration, let's incorporate a briefcase button. Look for the briefcase symbol within the icons available in the search bar and retrieve its corresponding code.
Step 7: Proceed by copying the code snippet provided below and inserting it into the desired location within your project. Feel free to eliminate any extraneous code for clarity.
You can also write this code only as given below.
Copy suitcase icon code:
<i class="fa fa-suitcase"></i>
Next, let's incorporate some script links into the HTML code to enable the counter functionality.
Add jquery link to HTML code
Step 8: To obtain the code, please click on this link (https://code.jquery.com/). Once there, select the "minified" option under JQuery 1.x, as illustrated in the screenshot below:
Retrieve the code provided here and ensure to copy the code snippet below. Paste this code snippet into the designated location within the HTML code enclosed by the <head> tag.
<script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script>
Step 9: Proceed by clicking on this link (https://github.com/bfintal/Counter-Up) to access the counter-up.js file on GitHub. Then, download the compressed zip folder from the same source.
Step 10: Unzip the compressed file and transfer the query.counterup.min.js JavaScript file from the unzipped directory to the location where your HTML document is saved.
Navigate to the GitHub page and proceed by scrolling down to locate two lines of script code within the Usage/Include section.
Paste the following code snippet into the designated <body> tag within your HTML document.
Copy code
<script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script>
<script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script>
Step 12: Finally, duplicate the jQuery script provided below and insert it directly beneath the code from the preceding step.
Copy code
jQuery(document).ready(function( $ )
{
$('.counter').counterUp({
delay: 10,
time: 1000
});
});