
Page loader in laravel
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.
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.
Random Code Snippet Queries: Laravel
- SQLSTATE[42000]: Syntax error or access violation: 1091 Can't DROP 'posts_user_id_foreign'; check that column/key exists
- RuntimeException You must enable the openssl extension in your php.ini to load information from https://repo.packagist.org
- Laravel get all records with pagination
- Use of undefined constant laravel
- Skip first n record and display rest records in laravel view
- How to insert dynamic value to additional column in pivot table in laravel
- How to create new user without form submission in laravel
- How to upload files to amazon s3 bucket using Laravel
- The Pusher library requires the PHP cURL module. Please ensure it is installed
- Ajax POST request in laravel
- How to customize or Change validation error messages
- Wheredate in laravel not working
- Laravel route parameter
- Trying to get property 'title' of non-object
- Pass variable from blade to controller Laravel
- How to create project_user pivot table in laravel
- Create a record if not exist in laravel
- How to get query string value in laravel
- Class "App\Http\Controllers\Auth\Verified" not found
- Redirect to another view from controller in laravel
- Import/Use Storage facade in laravel
- How to validate URL with https using regex in laravel
- Route prefix with auth middleware in laravel
- How to check duplicate entry in laravel
- Create model with migration and seeder