Laravel JQuery Ajax Loading Spinner Example

By Hardik Savani April 16, 2024 Category : Laravel

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

Read Also: Laravel Model Disable Primary Key & Auto Increment Example
@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...

Tags :
Previous

Python List Get All Items Less Than Some Value Example
Next

How to Get Only Positive Values in Python List?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares