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>0Bootstrap 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.
Random Code Snippet Queries: Laravel
- Route group with URI prefix using middleware and route name prefixes
- Ignore Records where a field has NULL value in Laravel
- How to get images from AWS s3 and display in Laravel blade
- SQLSTATE[42S22]: Column not found: 1054 Unknown column 'users.post_id' in 'where clause
- Laravel order by date not working
- How to get id of next record in laravel
- Get ids in array from users table
- Send id with route Laravel
- Class 'Facade\Ignition\IgnitionServiceProvider' not found
- Get all users except the followings users in overtrue laravel-follow
- Use withCount() to Calculate Child Relationship Records
- Undefined property: stdClass::$title
- How to get last record from object collection in laravel
- How to pass link from controller to view in laravel on ajax call
- How to pass query string with pagination in laravel
- How to add a key value pair to existing array in laravel
- Target class [admin] does not exist.
- Get domain name in laravel
- How to create belongstomany relation using custom name on custom pivot table
- How to get the id of last record from collection object in laravel view
- Permission denied error while creating storage link in Laravel
- First and last item of the array using foreach iteration in laravel blade
- Link storage folder in laravel 8
- How to get selected categories on edit record with Select2
- How to set column as primary key in Laravel model