Add loading spinner when calling or stopping AJAX

In this snippet I will teach you how to create loading spinner when calling or stopping AJAX calls

In this snippet I will teach you how to create loading spinner and show it when calling or stopping AJAX calls 

1- choose any loading snipper you want (you can pick one from bootstrap) .

2- the basic way of doing this (let's assume we will using spinner in the button itself) is when you call AJAX the spinner will show and the button will be hidden and when the ajax ends the spinner with be hidden and the button will show again

3- We will use a button div and spinner div like this

<div class="form-group mt-1" id="nonloading">

     <input type="button" id="submit_add_form" value="{{ __('admin.submit') }}" class="btn btn-primary">

</div>

<div class="form-group mt-1" id="loading">

     <button class="btn btn-primary">

           <span class="spinner-border spinner-border-sm"></span>

                Loading..

      </button>

</div>

4- after that we will call spinner to show on AJAX calls like this

var $nonloading = $('#nonloading').show();

var $loading = $('#loading').hide();

     $(document)

     .ajaxStart(function () {

         $loading.show();

         $nonloading.hide();

     })

     .ajaxStop(function () {

         $loading.hide();

         $nonloading.show();

     });

Mahmoud Anwar

Back End Developer with a passion for developing innovative web applications that expedite the efficiency and effectiveness of organizational success. Well-versed in technology and writing code to create systems that are reliable and user-friendly. Also has the proven ability to motivate, educate, and collaborate effectively to build web applications and effectively track changes. Confident communicator, strategic thinker, and innovative creator to develop software that is customized to meet a company’s organizational needs, highlight their core competencies, and further their success.