Article Categories

Selected Reading

How to set the cursor to wait in JavaScript?

Javascript Web Development Front End Technology

In this article, we are going to look at how to set the cursor to wait in JavaScript. The wait cursor provides visual feedback to users that a process is running and prevents them from accidentally triggering multiple actions.

Setting the cursor to wait is essential for improving user experience during operations like form submissions, file uploads, or API calls. JavaScript allows us to dynamically control cursor appearance using the CSS cursor property.

Common Use Cases

Here are typical scenarios where the wait cursor is beneficial:

Processing payments to prevent double submissions
File uploads or downloads in progress
AJAX requests or API calls
Form validation and submission

Basic Syntax

To set the cursor to wait, modify the CSS cursor property:

// Set wait cursor on entire document
document.body.style.cursor = "wait";

// Set wait cursor on specific element
element.style.cursor = "wait";

// Reset cursor to default
document.body.style.cursor = "default";

Cursor Types for Waiting

JavaScript supports several cursor types that indicate waiting or processing:

Cursor Type	Description	Visual Appearance
`wait`	System is busy, user must wait	Spinning wheel or hourglass
`progress`	Process running, but user can interact	Arrow with small spinning wheel

Example: Button Click with Wait Cursor

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .container {
         padding: 20px;
         text-align: center;
      }
      #btn {
         height: 50px;
         width: 150px;
         border-radius: 10px;
         background-color: #4CAF50;
         color: white;
         font-size: 1.1rem;
         border: none;
         cursor: pointer;
         margin: 10px;
      }
      #btn:disabled {
         background-color: #cccccc;
         cursor: not-allowed;
      }
      #status {
         margin-top: 20px;
         font-weight: bold;
      }
   </style>
</head>
<body>
   <div class="container">
      <h1 style="color: green;">Wait Cursor Demo</h1>
      <p>Click the button to see the wait cursor in action</p>
      <button id="btn">Start Process</button>
      <div id="status"></div>
   </div>

   <script>
      document.getElementById("btn").addEventListener("click", function() {
         const button = document.getElementById("btn");
         const status = document.getElementById("status");
         
         // Set wait cursor and disable button
         document.body.style.cursor = "wait";
         button.style.cursor = "wait";
         button.disabled = true;
         button.textContent = "Processing...";
         status.textContent = "Please wait, process is running...";
         
         // Simulate a process with setTimeout
         setTimeout(function() {
            // Reset cursor and re-enable button
            document.body.style.cursor = "default";
            button.style.cursor = "pointer";
            button.disabled = false;
            button.textContent = "Start Process";
            status.textContent = "Process completed successfully!";
            
            // Clear status after 3 seconds
            setTimeout(function() {
               status.textContent = "";
            }, 3000);
         }, 3000);
      });
   </script>
</body>
</html>

Advanced Example: Form Submission

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .form-container {
         max-width: 400px;
         margin: 20px auto;
         padding: 20px;
         border: 1px solid #ddd;
         border-radius: 8px;
      }
      .form-group {
         margin-bottom: 15px;
      }
      label {
         display: block;
         margin-bottom: 5px;
         font-weight: bold;
      }
      input[type="text"], input[type="email"] {
         width: 100%;
         padding: 10px;
         border: 1px solid #ddd;
         border-radius: 4px;
         box-sizing: border-box;
      }
      .submit-btn {
         background-color: #007bff;
         color: white;
         padding: 12px 24px;
         border: none;
         border-radius: 4px;
         cursor: pointer;
         font-size: 16px;
         width: 100%;
      }
      .submit-btn:disabled {
         background-color: #6c757d;
         cursor: wait;
      }
      .loading {
         cursor: wait !important;
      }
   </style>
</head>
<body>
   <div class="form-container">
      <h2>Contact Form</h2>
      <form id="contactForm">
         <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" id="name" required>
         </div>
         <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" id="email" required>
         </div>
         <button type="submit" class="submit-btn" id="submitBtn">
            Submit Form
         </button>
      </form>
   </div>

   <script>
      document.getElementById("contactForm").addEventListener("submit", function(e) {
         e.preventDefault();
         
         const submitBtn = document.getElementById("submitBtn");
         
         // Set loading state
         document.body.classList.add("loading");
         document.body.style.cursor = "wait";
         submitBtn.disabled = true;
         submitBtn.textContent = "Submitting...";
         
         // Simulate form submission
         setTimeout(function() {
            // Reset state
            document.body.classList.remove("loading");
            document.body.style.cursor = "default";
            submitBtn.disabled = false;
            submitBtn.textContent = "Submit Form";
            
            alert("Form submitted successfully!");
         }, 2500);
      });
   </script>
</body>
</html>

Best Practices

Always reset the cursor back to default when the process completes
Combine wait cursor with button disabling to prevent multiple submissions
Provide visual feedback like status messages during waiting periods
Use appropriate cursor types: wait for blocking operations, progress for background tasks

Conclusion

Setting the cursor to wait in JavaScript improves user experience by providing clear visual feedback during processing. Combine cursor changes with button states and status messages for optimal user interaction design.

Mayank Agarwal

Updated on: 2026-03-15T23:19:00+05:30

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next