How to create a wait cursor over entire html page

Question

Apu January 19, 2024 › #css › #HowTo

❌

How to create a wait cursor over entire html page

In this article, you are going to learn how to create a wait cursor that covers your entire HTML page.

Method 1: Using CSS to Apply the Wait Cursor #

To start, we can use CSS to apply a wait cursor to the entire page. This method is simple and requires only a few lines of code.

<html>
<head>
    <style>
        body {
            cursor: wait;
        }
    </style>
</head>
<body>
    <!-- Your page content goes here -->
</body>
</html>

Explanation of the above example:

We target the <body> element using CSS.
We set the cursor property to wait, which changes the cursor to a spinning wait icon.
This code snippet applies the wait cursor to the entire page, making it clear that the page is in a loading state.

Method 2: Using JavaScript to Toggle the Wait Cursor #

In some cases, you may want to control when the wait cursor appears. JavaScript allows us to toggle the wait cursor based on specific events. Here's an example using JavaScript:

<html>
<head>
    <style>
        body.waiting {
            cursor: wait;
        }
    </style>
</head>
<body>
 <button onclick="showWaitCursor()">Show Wait Cursor</button>
 <button onclick="hideWaitCursor()">Hide Wait Cursor</button>
 <script>
   function showWaitCursor() {
      document.body.classList.add('waiting');
   }

   function hideWaitCursor() {
      document.body.classList.remove('waiting');
   }
 </script>
</body>
</html>

Explanation of the above example:

We define two JavaScript functions, showWaitCursor() and hideWaitCursor(), to add and remove the waiting class from the <body> element.
CSS is used to apply the wait cursor when the waiting class is present on the <body> element.
You can trigger the wait cursor by calling showWaitCursor() and remove it with hideWaitCursor().

Conclusion: #

In this article, you learned two methods to create a wait cursor for your HTML page.

The first method uses CSS to apply the wait cursor to the entire page, while the second method involves JavaScript to toggle the wait cursor based on events.

Write Your Answer

Apu · Accepted Answer · 2024-01-19T17:20:57+05:30

In this article, you are going to learn how to create a wait cursor that covers your enti…