Page loader in laravel

• Show bootstrap spinner on ajax call and hide after ajax complete

  <div id="loaderIcon" class="spinner-border text-primary" style="display:none" role="status">
      <span class="sr-only">Loading...</span>
  </div>
  <button class="btn-primary" onclick="callAjax();"> Call Ajax </button>
  
  
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script>
  function callAjax(e){
      $('#loaderIcon').show();
      $.ajax({
          type: "GET",
          url: 'https://api.joind.in/v2.1/talks/10889',
          data: {
              format: 'json'
          },
          success: function(response){
             console.log(response);
          },
          complete: function(){
              $('#loaderIcon').hide();
          }
      });
  }
  </script>
  

  Bootstrap spinner is a html element and you can display it as a loader icon in your html page. First you have to hide it using display:none property and display after ajax request and hide it again after ajax completes.

  You can simply copy/paste code in your html page to see the demo and you can make changes as per your requirements.

Back to code snippet queries related laravel