Search by Queries/Bugs/Errors

Page loader in laravel

Created at 20-Sep-2021 , By samar

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

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Don't forget to share this article! Help us spread the word by clicking the share button below.

We appreciate your support and are committed to providing you valuable and informative content.

We are thankful for your never ending support.

Bootstrap C C++ Cmd CodeIgniter Css Drupal Git Html Java Javascript Jquery Laravel Mongodb Nodejs Php Python React Sql Typescript Vuejs Wordpress

Page loader in laravel

Show bootstrap spinner on ajax call and hide after ajax complete

Random Code Snippet Queries: Laravel

Latest Code Snippets