Laravel JQuery Ajax Loading Spinner Example Tutorial

Dec 26, 2022 . Admin

Hello Friends,

In this tutorial, a Laravel loading spinner is displayed. This page contains a simple demonstration of a loading animation. You'll find a laravel ajax loading spinner example. The Laravel jQuery loading spinner's concept is straightforward. Let's examine an example in further depth now.

In this example, I'll go through two ways to add a jQuery loading spinner to a Laravel website. When utilising jQuery Ajax, a progress indication employing a loading spinner must be shown when a user presses the submit button. In this article, I'll demonstrate how to instal a font amazing loading spinner using jquery ajax in a Laravel application utilising the two distinct approaches listed 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 - Mywebtuts.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 - Mywebtuts.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:

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 - Mywebtuts.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 - Mywebtuts.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: