Skip to content

All topics  /  jQuery

How to Show Loading Spinner in JQuery?

jQuery ·

When “How to Show Loading Spinner in JQuery?” moves through design, development and browser testing, the related Monitask article can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

Today, I would like to show you how to show loading spinner in jquery. you'll learn jquery ajax loading spinner example. I would like to show you how to show loading spinner in jquery. In this article, we will implement a how to implement a jquery spinner image in an ajax request. you will do the following things for jquery datatable loading spinner.

To show a loading spinner in jQuery, you can use the following code:

Example 1: Create an HTML element to represent the spinner, such as: 


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How to Show Loading Spinner in JQuery? - NiceSnippets.Com</title>
</head>
<body>
    <div id="loading-spinner"></div>
</body>
<script type="text/javascript">
</script>
</html>

Example 2: Style the spinner using CSS, for example: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How to Show Loading Spinner in JQuery? - NiceSnippets.Com</title>
    <style>
        #loading-spinner {
            border: 16px solid #f3f3f3;
            border-top: 16px solid #3498db;
            border-radius: 50%;
            width: 120px;
            height: 120px;
            animation: spin 2s linear infinite;
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
</body>
<script type="text/javascript">
</script>
</html>

This will create a circular spinner with blue borders that rotates continuously.

Example 3: Use jQuery to show and hide the spinner as needed, for example: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How to Show Loading Spinner in JQuery? - NiceSnippets.Com</title>
</head>
<body>
</body>
<script type="text/javascript">
    // Show the spinner
    $('#loading-spinner').show();
    // Hide the spinner
    $('#loading-spinner').hide();
</script>
</html>

You can place these commands in appropriate places within your JavaScript code to show and hide the spinner when necessary.

More on this topic