How to set the cursor to wait in JavaScript?

Javascript Web Development Front End Technology

In this article, we are going to look at some cursor settings and their behaviors. Currently, there are different kind of cursors as provided by any system that includes a pointer, hand, insert, wait, pointer-wait, and many others.

With the help of this article, we would be able to configure the wait pointer when required. This pointer will prevent the user from clicking a button unnecessarily and stops any further execution of similar events until the previous event is completed.

We can directly use the CSS property to display the cursor as waiting but since we need the dynamic impact on showing the cursor, we would be doing this with the help of plain JavaScript.

Some common examples where waiting is applied on the cursor −

While processing a payment, so the user does not initiate the cursor twice.
While downloading a file so that no multiple files are downloaded for the same process.

Example

In the below example, we create a simple HTML button. Whenever the user clicks the button it will tell the user to wait and will not let him execute any other action. We will use the addEventListener() function from JavaScript for achieving this functionality. With the help of this, we would be able to control the behavior of events like click, hover, etc.

#Filename: index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .box {
         display: flex;
         padding-top: 20px;
      }
      #btn {
         height: 50px;
         width: 100px;
         border-radius: 10px;
         background-color: gray;
         font-size: 1.1rem;
      }
   </style>
</head>
<body>
   <h1 style="color: green;">Welcome to Tutorials Point</h1>
   <p>The cursor will go into waiting on clicking this button.</p>
   <div class="box">
      <button id="btn">Click me</button>
   </div>
   <script>
      document.getElementById("btn")
         .addEventListener("click", function() {
            document.body.style.cursor = "progress";
            document.getElementById("btn")
               .style.backgroundColor = "gray";
            document.getElementById("btn")
               .style.cursor = "progress";
         });
   </script>
</body>
</html>

Output

Mayank Agarwal

Updated on 26-Apr-2022 12:53:57

Previous Page Print Page Next Page