How To Add AJAX Loader In jQuery
In this article, we will see how to add an ajax loader in jquery. Here, we will learn to add a loading spinner before submitting the ajax call in jquery. In ajax call when you can submit the data or form at that time we need to display the progress of submitting data so the user can easily understand.
In the loading spinner, you can use font awesome, spinning GIF, image, or custom spinner design as per your theme.
So, let's see jquery add a loading spinner in ajax call, jquery ajax loading spinner example, show loader on form submit jquery, how to add loader in ajax call.
Example:
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')
},
});
});
Example:
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>
Example:
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
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
