Laravel JQuery Ajax Loading Spinner Example
Hi Folks,
This tutorial shows you laravel loading spinner. This post will give you a simple example of laravel loading animation. you will learn laravel ajax loading spinner example. you can understand a concept of laravel jquery loading spinner. So, let us see in detail an example.
In this example, I will show you two ways to add a jquery loading spinner in laravel. if you are using jquery ajax and user will click on submit button then you have to show the progress sign using the loading spinner. Here, I will give you the following two ways to add font awesome loading spinner with jquery ajax in laravel.
1) Laravel JQuery Ajax Loading Spinner using Font Awesome
2) Laravel Global JQuery Ajax Loading Spinner
You can use this example with laravel 6, laravel 7, laravel 8, laravel 9, laravel 10 and laravel 11 application.
Let's see the both examples:
1) Laravel JQuery Ajax Loading Spinner using Font Awesome
You need to add following blade file code and this code will work on particular one ajax request.
resources/views/demo.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Ajax Loading Spinner Example - ItSolutionStuff.com</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" />
</head>
<body>
<div class="container">
<div class="row mt-5 mb-5">
<div class="col-10 offset-1 mt-5">
<div class="card">
<div class="card-header">
<h3>Laravel Ajax Loading Spinner Example - ItSolutionStuff.com</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>
</div>
</body>
<script type="text/javascript">
$("#postForm").submit(function(e){
e.preventDefault();
/*------------------------------------------
--------------------------------------------
Add Loading Spinner to Button
--------------------------------------------
--------------------------------------------*/
$(".btn-submit").prepend('<i class="fa fa-spinner fa-spin"></i>');
$(".btn-submit").attr("disabled", 'disabled');
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts",
type: "POST",
data: {
title: $("input[name='title']").val(),
body: $("textarea[name='body']").val()
},
dataType: 'json',
success: function (result) {
console.log(result);
/*------------------------------------------
--------------------------------------------
Remove Loading Spinner to Button
--------------------------------------------
--------------------------------------------*/
$(".btn-submit").find(".fa-spinner").remove();
$(".btn-submit").removeAttr("disabled");
}
});
});
</script>
</html>
Output:
2) Laravel Global JQuery Ajax Loading Spinner
Here, we will setup loading spinner in layout app file so every ajax request it will automatic call.
resources/views/layouts/app.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Loading Spinner Example - ItSolutionStuff.com</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">
/*------------------------------------------
--------------------------------------------
Add Loading When fire Ajax Request
--------------------------------------------
--------------------------------------------*/
$(document).ajaxStart(function() {
$('#loading').addClass('loading');
$('#loading-content').addClass('loading-content');
});
/*------------------------------------------
--------------------------------------------
Remove Loading When fire Ajax Request
--------------------------------------------
--------------------------------------------*/
$(document).ajaxStop(function() {
$('#loading').removeClass('loading');
$('#loading-content').removeClass('loading-content');
});
</script>
@yield('javascript')
</html>
resources/views/demo.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>Laravel Ajax Loading Spinner Example - ItSolutionStuff.com</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: "https://jsonplaceholder.typicode.com/posts",
type: "POST",
data: {
title: $("input[name='title']").val(),
body: $("textarea[name='body']").val()
},
dataType: 'json',
success: function (result) {
console.log(result);
}
});
});
</script>
@endsection
Output:
I hope it can help you...
