

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set the cursor to wait in JavaScript?
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
- Related Questions & Answers
- How to create a canvas with a wait cursor using FabricJS?
- How to set the type of cursor to display for the mouse pointer with JavaScript?
- How to create a canvas with wait cursor on hover over objects using FabricJS?
- How to create an Ellipse with wait cursor on hover over objects using FabricJS?
- How to create a Circle with wait cursor on hover over objects using FabricJS?
- How to find the coordinates of the cursor with JavaScript?
- How to find the coordinates of the cursor relative to the screen with JavaScript?
- JavaScript Cursor property
- How to use Wait-Process in Powershell?
- How to move the ResultSet cursor to the next row in JDBC?
- How to move the ResultSet cursor to the previous row in JDBC?
- How to move the ResultSet cursor to the last row in JDBC?
- How to move the ResultSet cursor to the first row in JDBC?
- How to set the text direction with JavaScript?
- How to convert Array to Set in JavaScript?