How to change cursor to waiting state in JavaScript/jQuery?

Javascript Web Development Front End Technology

We can use onmouseover, onmouseout events to set or change the cursor into the state of waiting. In JavaScript, we have different types of mouse events which performs the different functionalities on mouse. Let us see some of the mouse events.

onmousedown − These event is occurred when a mouse button is pressed over an HTML element
onmouseenter − It occurs when a pointer is moved out of an element
onmousemove − These event is occurred when the pointer is moving over an HTML element
onmouseout − It occurs when the pointer leaves the element
onmouseover − When the mouse is over an HTML element, then this event is occurs.
onmouseup − The pointer button is release over an HTML element

When the pointer leaves an HTML element, then the onmouseover and onmouseout events are used. The onmouseover is quite similar to the onmouseenter event and the differences is that the onmouseenter does not bubble. The onmouseover event does not work with HTML tags- html, head, title, style, meta, base, bdo, br, iframe, param, and script.

The style.cursor property is used to set or returns which type of cursor display for the pointer, and when the pointer is over an element, then it returns the string value that represents the mouse cursor which is visible. The auto is the default value. It is belonged to the Cursor property of the JavaScript.

Syntax

The following is the syntax to change the cursor to waiting state in JavaScript −

document.getElementById('id').style.cursor = 'value';

Parameters

The different types of values are defined for the style property like alias, all-scroll, auto, cell, context-menu, crosshair, default, e-resize, ew-resize, move, n-resize, ne-resize, nesw-resize, none, pointer, progress, and inherit.

Return Values

The pointer is over an element, then it returns the string value that represents the mouse cursor which is displayed.

Example

In this example, we are going to change the cursor to a waiting state with the help of JavaScript.

<html>
<head>
   <style>
      #textbox {
         padding: 16px ;
         text-align: center;
         font-size: 18px;
         height: 90px;
         background-color: grey;
         width: 500px;
         color: white;
      }
   </style>
</head>
<body>
   <h2>Changing Cursor to Waiting State</h2>
   <p id="textbox" onmouseover="sampleFunction()">
      This is a sample program to see how to change the cursor appearance when the pointer is over an element
   </p>
   <script>
      function sampleFunction() {
         document.getElementById("textbox").style.cursor = "wait";
      }
   </script>
</body>
</html>

Here we used the onmouseover mouse event for the paragraph tag with the function name of myFunction( ). For that myFunction( ) method we are going implement the style.cursor property with object as “document.getElementById( )”, and id will be taken “box” for which we defined the css elements. And the property value of the cursor is “wait”, it means the cursor will be shown as it is in state of waiting whenever cursor appearance, when the pointer is over an HTML element.

Example

Let us take another example, to check how we can change the cursor to waiting state in JavaScript using the different mouse events.

<html>
<head>
   <style>
      #mybutton {
         cursor: default;
      }
   </style>
</head>
<body>
   <button id="mybutton">Hover over me</button>
   <script>
      document.getElementById("mybutton").onmouseover = function() {
         document.getElementById("mybutton").style.cursor = "wait";
      }
      document.getElementById("mybutton").onmouseout = function() {
         document.getElementById("mybutton").style.cursor = "default";
      }
   </script>
</body>
</html>

The cursor appearance changes to the wait when mouse is over an element as show in the following figure −

Example

In these example we are going to see how can we change the cursor to waiting state with the help of jQuery.

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
   </script>
   <style>
      #event {
         height: 50px;
         padding: 30px;
         height: 60px;
         margin: 2 auto;
         color: white;
         width: 650px;
         background: grey;
      }
      #center {
         text-align:center;
      }
   </style>
</head>
<body id="center">
   <h2>Changing the Cursor Appearance</h2>
   <div id = "event">
      Mouse Hover
   </div>
   <script>
      $("#event").hover(function() {
         $(this).css("cursor", "progress");
      }, function() {
         $(this).css("cursor", "default");
      });
   </script>
</body>
</html>

The cursor appearance changes to the waiting when mouse is over an element as show in the following figure −

The cursor appearance returns to the default when mouse is out of an element as shown in the figure−

As we see in the example, here we used the “$(this).css("cursor", "progress")” to change the cursor state to the progress for the div element which we specified in our program. To change the cursor back to its default state, you can set the cursor property to default “$(this).css("cursor", "default")”.

In this article, we have explained about how can we change the cursor to waiting state along with examples. We have seen the two different examples here, in the first example, we used the onmouseover event to change the cursor state. In the second example, we used onmouseover and onmouseout events to change the cursor to the waiting state. For the two examples of JavaScript we used the style.cursor property to define the value for the cursor. For the third example, we used the jQuery to change the cursor appearance using the jQuery cursor properties.