Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to set the cursor to wait in JavaScript ?

  • Last Updated : 18 Aug, 2021

In JavaScript, we could easily set the cursor to wait. In this article, we will see how we are going to do this. Actually, it’s quite an easy task, there is a CSS cursor property and it has some values and one of the values is wait. We will use the [cursor: wait] property of CSS and control its behavior using JavaScript. 

Setting the cursor to the wait could be useful in many cases, for example, if we click on the complete payment button in some payment transaction page then we should make the cursor to the wait just after the button get clicked, to prevent the unwanted click on anywhere on the page until the transaction is completed.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Example 1: In this example, we will create a button, when the button gets clicked then the cursor will be waiting. For this, we will use the addEventListener() function of JavaScript. With the help of this, we could control the behavior of events like click, hover, etc.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <Style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
          
        .box {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: rgb(36, 36, 36);
        }
          
        #btn {
            height: 50px;
            width: 100px;
            border-radius: 10px;
            border: none;
            outline: none;
            background-color: rgb(2, 151, 2);
            font-family: Impact, Haettenschweiler, 
                'Arial Narrow Bold', sans-serif;
            font-size: 1.1rem;
        }
    </Style>
</head>
  
<body>
    <div class="box">
        <button id="btn">Click me</button>
    </div>
  
    <script>
        document.getElementById("btn")
            .addEventListener("click", function() {
                document.body.style.cursor = "wait";
  
                document.getElementById("btn")
                    .style.backgroundColor = "gray";
  
                document.getElementById("btn")
                    .style.cursor = "wait";
            });
    </script>
</body>
  
</html>

Output:



Example 2: For this example, we will use the same JavaScript’s addEventListener() method, use the hover event, and specify where the cursor should go to wait. In this case, we have created two containers, The cursor will work fine in the first container but on the second one, the cursor will go to the wait.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <Style>
        body {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
          
        .box {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: rgb(36, 36, 36);
        }
          
        #box1 {
            height: 100px;
            width: 100px;
            border-radius: 50%;
            background-color: Green;
        }
          
        #box2 {
            height: 100px;
            width: 100px;
            border-radius: 50%;
            background-color: rgb(102, 11, 3);
            margin: 5px;
            cursor: wait;
        }
    </Style>
</head>
  
<body>
    <div class="box">
        <div id="box1"></div>
        <div id="box2"></div>
    </div>
  
    <script>
        document.getElementById("box2")
            .addEventListener("hover", function() {
                document.getElementById("box2")
                    .style.cursor = "wait";
            });
    </script>
</body>
  
</html>

Output: 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!