21-Jun-2023
.
Admin
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.
#JavaScript
