How to Create a Loading Page for All AJAX Calls in jQuery 3.3.1?

Estimated read time 2 min read

To create a loading page for all AJAX calls in jQuery 3.3.1, you can follow these steps:

  1. Create a loading spinner or indicator using HTML and CSS. Here’s an example:
<div id="loading-indicator">
  <div class="spinner"></div>
</div>

<style>
  #loading-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
    display: none;
  }

  .spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 2s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>

This will create a full-screen loading indicator with a spinning circle in the center.

  1. Add some JavaScript code that will show and hide the loading indicator as needed. Here’s an example:
$(document).ajaxStart(function() {
  $('#loading-indicator').show();
});

$(document).ajaxStop(function() {
  $('#loading-indicator').hide();
});

This code will listen for any AJAX calls that start or stop, and show or hide the loading indicator accordingly.

  1. Make sure to include jQuery 3.3.1 in your HTML code before the script that you just created. Here’s an example:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
  // Add the JavaScript code here
</script>

That’s it! Now, whenever an AJAX call is made, the loading indicator will appear until the call is complete.

You May Also Like

More From Author

+ There are no comments

Add yours

Leave a Reply