How To Add AJAX Loader In jQuery
In our fast-paced digital world, everyone wants quick and smooth loading websites. Luckily, jQuery can help with that. Today, we're going to explore how you can make your website more interactive by adding an AJAX loader. It might sound complicated, but don't worry; we'll make it easy to understand.
Learning how to add an AJAX loader with jQuery can make your website more user-friendly. Imagine your web pages becoming more dynamic and responsive. So, let's take the journey together and learn how to add an AJAX loader in jQuery. Ready to get started?
In this step, we will add HTML code. So, add the following code to HTML file.
<!DOCTYPE html>
<html>
<head>
<title>How To Add AJAX Loader In jQuery - Techsolutionstuff</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="text-center">
<h1>How To Add AJAX Loader In jQuery - Techsolutionstuff</h1>
<button id='getDataBtn'>Click Here</button>
</div>
<div id="data-table" style="width: 100%;" class="display-none">
<table border="2">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="loader" class="lds-dual-ring display-none overlay"></div>
<script type="text/javascript" src="custom.js"></script>
</body>
</html>
Now, we will create a CSS file and add the following code to that file.
body {
background: #ececec;
}
.display-none {
display: none !important;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0,0,0,.8);
z-index: 999;
opacity: 1;
transition: all 0.5s;
}
.lds-dual-ring {
display: inline-block;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 64px;
height: 64px;
margin: 5% auto;
border-radius: 50%;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#getDataBtn{
background: #e2e222;
border: 1px solid #e2e222;
padding: 10px 20px;
}
.text-center{
text-align: center;
}
#data-table table{
margin: 20px auto;
}
In this step, we will add the jquery and add loader in the ajax call.
$('#getDataBtn').click(function () {
$.ajax({
type: "GET",
url: "your_url",
dataType: 'json',
beforeSend: function () {
$('#loader').removeClass('display-none')
},
success: function (data) {
$('#data-table').removeClass('display-none')
},
complete: function () {
$('#loader').addClass('display-none')
},
});
});
In this example, we will use loader gif with ajaxStart() and ajaxStop() functions and display loader in jquery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To Add AJAX Loader In jQuery - Techsolutionstuff</title>
<style>
.overlay{
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 999;
background: rgba(255,255,255,0.8) url("/images/loader.gif") center no-repeat;
}
body{
text-align: center;
}
body.loading{
overflow: hidden;
}
body.loading .overlay{
display: block;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).on("click", "button", function(){
// this is for PHP file
$.get("/php/users.php?v="+ $.now(), function(data){
$("body").html(data);
});
});
$(document).on({
ajaxStart: function(){
$("body").addClass("loading");
},
ajaxStop: function(){
$("body").removeClass("loading");
}
});
</script>
</head>
<body>
<button type="button">Click Here...</button>
<div class="overlay"></div>
</body>
</html>
In laravel, you can set the loader spinner globally like below code example. It can call every ajax call throughout the application.
resources/views/layouts/app.blade.php
<!DOCTYPE html>
<html>
<head>
<title>jQuery AJAX Loading Spinner Example in Laravel - Techsolutionstuff</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
<style type="text/css">
.loading {
z-index: 20;
position: absolute;
top: 0;
left:-5px;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.loading-content {
position: absolute;
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
top: 40%;
left:50%;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<section id="loading">
<div id="loading-content"></div>
</section>
@yield('content')
</div>
</body>
<script type="text/javascript">
$(document).ajaxStart(function() {
$('#loading').addClass('loading');
$('#loading-content').addClass('loading-content');
});
$(document).ajaxStop(function() {
$('#loading').removeClass('loading');
$('#loading-content').removeClass('loading-content');
});
</script>
@yield('javascript')
</html>
resources/views/index.blade.php
@extends('layouts.app')
@section('content')
<div class="row mt-5 mb-5">
<div class="col-10 offset-1 mt-5">
<div class="card">
<div class="card-header">
<h3>jQuery AJAX Loading Spinner Example in Laravel - Techsolutionstuff</h3>
</div>
<div class="card-body">
<form method="POST" action="#" id="postForm">
{{ csrf_field() }}
<div class="row">
<div class="col-md-6">
<div class="form-group">
<strong>Title:</strong>
<input type="text" name="title" class="form-control" placeholder="Title" value="{{ old('title') }}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<strong>Body:</strong>
<textarea name="body" rows="3" class="form-control">{{ old('body') }}</textarea>
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-success btn-submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
@endsection
@section('javascript')
<script type="text/javascript">
$("#postForm").submit(function(e){
e.preventDefault();
$.ajax({
url: "your_ajax_url",
type: "POST",
dataType: 'json',
data: {
title: $("input[name='title']").val(),
body: $("textarea[name='body']").val()
},
success: function (result) {
console.log(result);
}
});
});
</script>
@endsection
Adding an AJAX loader in jQuery is very helpful for web developers. This not only boosts the user experience but also ensures your website functions smoothly, even when dealing with complex data requests.
By using the techniques we've covered, you can make your web applications more responsive and engaging. With the flexibility of jQuery and the power of AJAX, you can create dynamic web experiences that captivate your users.
So, as you continue your journey in web development, remember that AJAX loader is a valuable tool for creating impressive websites.
You might also like:
- Read Also: How To Validate Multiple Checkbox In jQuery
- Read Also: 500 Internal Server Error In Laravel 9 AJAX
- Read Also: Laravel 9 AJAX CRUD Operation Example
- Read Also: Load More Data in Laravel Using Ajax jQuery
