26-Dec-2022
.
Admin
Hello Friends,
You can see a Laravel loading spinner in this tutorial. You'll find a simple example of a loading animation in this page. You'll discover an example of a laravel ajax loading spinner. The idea behind the Laravel jQuery loading spinner is simple. So, let's study an example in more detail..
WI'll explain two methods to adding a jQuery loading spinner to a Laravel page in this example. When a user clicks the submit button while using jQuery Ajax, a progress indicator must be displayed utilising a loading spinner. Here, I'll show you how to instal a font fantastic loading spinner using jquery ajax in a laravel application using the two different methods below.
(1). Laravel JQuery Ajax Loading Spinner using Font Awesome
(2). Laravel Global JQuery Ajax Loading Spinner
Now let's start.
Step 1: Install Laravel
This is optional; however, if you have not created the laravel app, then you may go ahead and execute the below command:
composer create-project laravel/laravel example-app
Step 2: Laravel JQuery Ajax Loading Spinner using Font Awesome
You can add the following blade file code for it to function with a specific ajax request.
resources/views/demo.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Ajax Loading Spinner Example - Nicesnippets.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 - Nicesnippets.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:
 (1).png)
Step 3: 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 - Nicesnippets.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 - Nicesnippets.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:
.png)
I hope it can help you...
#Laravel
