How to set the cursor to wait in JavaScript ?

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.
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: 
CSS-Properties
JavaScript-Events
JavaScript-Questions
Picked
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a web page using HTML and CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
HTTP headers | Content-Type