Page loader in laravel

You can implement the page loader in laravel view. You can simply add loader icon with display:none property to hide on page load and display it on ajax request and again hide it after complete the ajax request

Answers 1
  • 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>
    
    0

    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