HTML Progress Counter

Bootstrap HTML Counter Code Sample Trigger on Visibility Change JQuery

This tutorial is about a template part of theme which is essential in modern theme page layout designs. This part may be named as “HTML counter”. This part triggers and start counting when specific element is got visibility on the screen. At the end of this tutorial, you will be able to create an HTML Counter code Sample template with the help of bootstrap which will trigger counting on visibility change by getting focus with the help of jQuery. You can also able to download the complete source code of example.

You can See demo example HTML Counter Code Sample

Let’s start making it.

I have used bootstrap as base platform for creating this sample HTML template. Bootstrap make code clean and also provide responsive mobile view of the example.

The steps involves are following

  1. Folder and file structure
  2. Required bootstrap and jQuery files.
  3. Coding and Finalizing

1. Folder and File Structure

I have tried to make this counter code example as simple as possible. So we need a main file “index.html” and an “assets” folder which have four sub subfolder as shown in figure.

HTML Counter assets directory structure

 

2. Required Bootstrap and JQuery Files

Now We required following files in concerned folders:-

bootstrap (Folder )

This folder contains necessary bootstrap Js and css files

css (Folder)

This folder contains styles.css file . Which is our custom css file.

fonts (Folder)

This folder contains our font awesome icons files and other fonts files. as shown in image below:

counter font-awesome files

JS (Folder)

jquery.counterup.min.js :- this is free counter js library file which is available on following here

jquery.waypoints.min.js :- This is free js plugin for triggering and start counting when specific element is got visibility on the screen. This file is freely available at here

jquery.min.js :- This is JQuery file

app.js :- This is our custom file where we write our js code to run all above js components.

 

3. Coding and Finalizing

There are three files for adding custom code. First of all our main index.html file code is given below:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Untitled</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:300,400,700&amp;display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700,900&amp;display=swap">
    <link rel="stylesheet" href="assets/css/styles.css">
    
</head>

<body>
    <section>
        <div class="container ulook-full-width-container" id="just_reach">
            <div class="row" style="margin-left: 0;margin-right: 0;">
                <div class="col-md-3 ulook-progress-bar">
                    <h3>Bank Tranfer</h3><i class="fa fa-institution"></i><span class="counter">50 </span></div>
                <div class="col-md-3 ulook-progress-bar">
                    <h3>Transport Facility</h3><i class="fa fa-bus"></i><span class="counter">750 </span></div>
                <div class="col-md-3 ulook-progress-bar">
                    <h3>Skilled Management</h3><i class="fa fa-mortar-board"></i><span class="counter">1050 </span></div>
                <div class="col-md-3 ulook-progress-bar">
                    <h3>User Satisfaction</h3><i class="fa fa-user-plus"></i><span class="counter">200 </span></div>
            </div>
        </div>
    </section>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.waypoints.min.js"></script>
    <script src="assets/js/jquery.counterup.min.js"></script>
    <script src="assets/js/app.js"></script>
</body>

</html>

Second file is styles.css file in folder css where we write our css custom code.

div.container.ulook-full-width-container {
width: 100%;
max-width: 100%;
height: auto;
margin: 0;
padding: 0;
margin-left: 0px;
background-color: #006699;
}

.ulook-progress-bar i {
font-size: 65px;
color: rgb(255, 225, 133);
width: 100%;
padding: 8px;
text-align: center;
}

.ulook-progress-bar h3 {
font-size: 1em;
font-family: "Roboto";
color: rgb(255, 255, 255);
font-weight: bold;
line-height: 4.5;
text-align: center;
width: 100%;
padding: 8px;
}

.ulook-progress-bar span {
font-size: 50px;
font-family: "Roboto";
color: rgb(255, 255, 255);
font-weight: bold;
line-height: 1.246;
text-align: center;
width: 100%;
display: block;
padding: 50px 8px 20px 8px;
}

Our Third custom file is app.js in js  folder where we add following code:

$(document).ready(function() {

// adding waypoint library and using elements's ID "just_reach" to detect when element is visible 
var waypoint2 = new Waypoint({
element: document.getElementById('just_reach'),
handler: function() {
//alert('Triggered once, now destroyed');
this.destroy()
},
offset: 'bottom-in-view'
})


// using coutner library to count
$('.counter').counterUp({
delay: 10,
time: 1000,
offset: 100,
beginAt: 0,
formatter: function (n) {
return n.replace(/,/g, '.');
}
});

});

You can download complete source files here

You can convert this example into dynamic PHP file. please read my following post of dynamic HTML to PHP Conversion of Counter exmaple.


 

One Comment

  1. Canaan - March 27, 2020 at 8:14 am

    Appreciate the recommendation. Will try it out.

Leave a Reply

Your email address will not be published. Required fields are marked *

Go to Top