Reading Time: 7 minutes

976 Views

Inside this article we will see the concept i.e How To Add JQuery Ajax Loading Spinner in Laravel Example. Article contains the classified information about How to Show Loading Spinner in jQuery Laravel.

Whenever you work with any type of forms, list where jquery ajax requests are working then while loading data, saving data we use jQuery loading spinners. Really it gives a good feel about processing of data.

So, If you don’t have this idea then this tutorial will be helpful for you for this. Tutorial is super easy to understand and implement it in your code as well.

This article is not for any laravel version specific. You can use this concept with Laravel v6, Laravel v7, Laravel v8 also.

Let’s get started.

Laravel Installation

Open terminal and run this command to create a laravel project.

composer create-project laravel/laravel myblog

It will create a project folder with name myblog inside your local system.

To start the development server of laravel –

php artisan serve

URL: http://127.0.0.1:8000

Assuming laravel already installed inside your system.

Method #1: Add Ajax Loading Spinner Using Font Awesome

Let’s consider a Controller, a View File and a route.

Controller

It calls a view file.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
    public function index()
    {
        return view("save-data");
    }
}

View File (Blade Template)

It contains a User Interface to send form data to an ajax request.

Also contains adding a loading spinner to Submit button while processing of data.

<!DOCTYPE html>
<html>
<head>
    <title>How To Add JQuery Ajax Loading Spinner in Laravel Example</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>How To Add JQuery Ajax Loading Spinner in Laravel Example</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>

Route

It contains a route to call form.


use App\Http\Controllers\HomeController;

Route::get("form", [HomeController::class, "index"]);

Output

URL: http://127.0.0.1:8000/form

Method #2: Add Ajax Loading Spinner Using CSS

Inside this method we used Raw CSS to add a loading spinner. Additionally you will see a concept i.e Load Spinner to any of Ajax request. We have handled this time in very different way. We loaded globally the loading Spinner class to ajax call.

Open the same view file of last method save-data.blade.php file and write this code into it.

View File (Blade Template)

It contains a User Interface to send form data to an ajax request. Also contains adding a loading spinner to Submit button while processing of data.

<!DOCTYPE html>
<html>

<head>
    <title>How To Add JQuery Ajax Loading Spinner in Laravel Example</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>

        <div class="row mt-5 mb-5">
            <div class="col-10 offset-1 mt-5">
                <div class="card">
                    <div class="card-header">
                        <h3>How To Add JQuery Ajax Loading Spinner in Laravel Example</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">
    /*------------------------------------------
    --------------------------------------------
    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');
    });

    /*------------------------------------------
    --------------------------------------------
    Send Form data to Ajax
    --------------------------------------------
    --------------------------------------------*/
    $("#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>

</html>

Output

URL: http://127.0.0.1:8000/form

We hope this article helped you to learn How To Add JQuery Ajax Loading Spinner in Laravel Example in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.