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>
    <button class="btn-primary" onclick="callAjax();"> Call Ajax </button>
    <link rel="stylesheet" href="" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src=""></script>
    <script src="" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    function callAjax(e){
            type: "GET",
            url: '',
            data: {
                format: 'json'
            success: function(response){
            complete: function(){

    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