How To Add Loader In HTML Page In jQuery
In this article, we will see how to add a loader in html page in jquery. Here, we will learn about adding a loading spinner before submitting the Ajax call in jquery. In Ajax calls 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. Also, you can jQuery ajaxStart() Method and jQuery ajaxStop() Method for the display loader.
In Ajax, provides beforeSend() function is used to modify the jqXHR object before a request is sent. and A complete function to be called when the request finishes.
So, let's see how to add an Ajax loader in jquery, how to add a loader in jquery Ajax, jquery loader spinner, how to add a loader in jquery ajax, show the loader on form submit jquery, and how to add a loader in ajax call.
Example:
In this step, we will add HTML code. So, add the following code to the HTML file.
<!DOCTYPE html>
<html>
<head>
<title>How To Add Loader In HTML Page 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 Loader In HTML Page 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 Loader In HTML Page 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 10 - 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 10 - 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
Example:
In this example, we will see preloading for a web page using jquery without an Ajax call.
HTML:
<h2>Example of preloading for web page using jQuery - Techsolutionstuff</h2>
<div id="overlayer"></div>
<span class="loader">
<span class="loader-inner"></span>
</span>CSS:
body, html {
height: 100%;
width:100%;
text-align: center;
background:#dcdcdc;
margin:0;
padding:0;
position:relative;
}
h1 {
color:#4a4a4a;
text-align:center;
}
img {
margin: 0 auto;
display:block;
}
/*PRELOADING------------ */
#overlayer {
width:100%;
height:100%;
position:absolute;
z-index:1;
background:#4a4a4a;
}
.loader {
display: inline-block;
width: 30px;
height: 30px;
position: absolute;
z-index:3;
border: 4px solid #Fff;
top: 50%;
animation: loader 2s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 2s infinite ease-in;
}
@keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}jQuery:
$(window).load(function() {
$(".loader").delay(2000).fadeOut("slow");
$("#overlayer").delay(2000).fadeOut("slow");
})
You might also like:
- Read Also: Bootstrap 5 Datepicker Using jQuery UI
- Read Also: How To Validate Radio Button In jQuery
- Read Also: How To Get Selected Option Value In jQuery
- Read Also: How To Get Multiple Checkbox Value In jQuery
