loading indicator – Coding Birds Online

If you are looking to learn how to create a loading spinner or put a loading icon when there is ajax request or form submission then you are in right place.

Hi there I am Ankit, I will tell you how to code to make a loading indicator that shows that the server is busy with some ajax requests. You can check our demo.

Creating a busy indicator, or spinner loader is required when you fetch records from the server, then obviously it may take time depending upon the number of records in database or internet speed or both.

In most of the web applications or websites ajax request is created.

Why need loading spinner ?

Example: If you are on Railway websites booking a ticket then you search for a train, what you see? You see a loading icon that says please wait…

But actually, in the background, there may be n number of ajax requests. Developers place a loading icon to show that there is something processing.

Here I am showing you an example that fetches records from the database. The loading spinner, indicator, leading icon whatever you say will be displayed until all the records not fetched.

One thing I will do, the user can’t do anything until data is not loaded. I mean mouse will be disabled for that particular browser tab. Now that’s enough to understand. Let’s make our hands dirty with code.

CSS

Here, This CSS is not mandatory but if you keep it will make user un clickable to page.

th{ color: white; }
.modal-busy {
    position: fixed;
    z-index: 999;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: Black;
    filter: alpha(opacity=60);
    opacity: 0.6;
    -moz-opacity: 0.8;
}
.center-busy {
    z-index: 1000;
    margin: 300px auto;
    padding: 0px;
    width: 130px;
    filter: alpha(opacity=100);
    opacity: 1;
    -moz-opacity: 1;
}
.center-busy img {
    height: 128px;
    width: 128px;
}

<div> making unclickable

<div class="modal-busy" id="loader" style="display: none">
    <div class="center-busy" id="test-git">
        <img alt="" src="ajax-loading.gif" />
    </div>
</div>

ajax.js

This code fetches the records from the server using AJAX request, and responsible to show loader icon until data is not fully loaded.

$(document).ready(function () {
    $("#loader").show();
    $.post("script.php",{api:"getData"},function (response) {
        var data = response.split('^');
        $("#tbody").html(data[1]);
        $("#loader").hide();
    });
});

script.php

This code the actual logic that fetches the records from the database by SQL query.

<?php
include "config.php";
include_once "Common.php";
if (isset($_POST['api']) == "getData") {
    $sr = 1;
    $tableData = '';
    $common = new Common();
    $data = $common->getData($connection);
    if ($data->num_rows > 0 ){
        while ($row = $data->fetch_object()) {
            $tableData .= '<tr>
                    <td>'.$sr.'</td>
                    <td>'.$row->name.'</td>
                    <td>'.$row->class.'</td>
                    <td>'.$row->marks.'</td>
                    <td>'.$row->gender.'</td>
        </tr>';
            $sr++;
        }
        echo 'test^'.$tableData;
    }
}

This file includes config.php & Common.php. The code is given below.

Config.php

<?php
    $connection = new mysqli("localhost","root","","codingbirds");
    if (!$connection) {
        die("Error in database connection". $connection->connect_error);
    }
?>

Common.php

<?php
class Common
{
    public function getData($connection) {
        $query = "SELECT * FROM bird_records";
        $result = $connection->query($query);
        return $result;
    }
}

I have given the code in parts so that I can make you understand. Now here is the complete code

Complete Code

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <link rel="icon" href="https://codingbirdsonline.com/wp-content/
uploads/2019/12/cropped-coding-birds-favicon-2-1-192x192.png" 
type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/
3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/
3.4.1/jquery.min.js"</script>
    <script src="ajax.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/
    bootstrap.min.js"></script>
    <style>
        th{ color: white; }
        .modal-busy {
            position: fixed;
            z-index: 999;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            background-color: Black;
            filter: alpha(opacity=60);
            opacity: 0.6;
            -moz-opacity: 0.8;
        }
        .center-busy {
            z-index: 1000;
            margin: 300px auto;
            padding: 0px;
            width: 130px;
            filter: alpha(opacity=100);
            opacity: 1;
            -moz-opacity: 1;
        }
        .center-busy img {
            height: 128px;
            width: 128px;
        }
    </style>
</head>
<body>

<div class="container" style="margin-top: 50px;">
    <center>
        <img width="50"  src="https://codingbirdsonline.com/wp-content/
   uploads/2019/12/cropped-coding-birds-favicon-2-1-192x192.png"/>
    </center>
    <h2>Create loading spinner indicator in jquery ajax,
 while data loads</h2>
    <p>How to create loading spinner indicator in jquery ajax</p>
    <table class="table">
        <thead>
        <tr style="background-color: #1573ff">
            <th>Sr.No</th>
            <th>Name</th>
            <th>Class</th>
            <th>Marks</th>
            <th>Gender</th>
        </tr>
        </thead>
        <tbody id="tbody"></tbody>
    </table>
</div>
</body>
<div class="modal-busy" id="loader" style="display: none">
    <div class="center-busy" id="test-git">
        <img alt="" src="ajax-loading.gif" />
    </div>
</div>
</html>

I hope you got how to do this. If you face any error or missing any steps then you can download the source code from here.

Thanks for visiting Happy Coding 🙂

Keep Reading