Page loader in laravel

Updated at 19-Sep-2021, By samar

Page loader in laravel

Good day, guys. In this post, we’ll look at how to solve the "Page loader in laravel" programming puzzle.

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
  • 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