Does cursor: wait stop clicks?

No. It is only a cursor. Disable the buttons, set the inert attribute on the locked area, or cover it with an overlay.

Why does wait look like progress on my Mac?

macOS does not let apps use the spinning beach ball as a cursor. Chrome uses the arrow with a spinner for both values.

Is wait or progress better for a loading page?

Usually progress. Most loading states still let people scroll, read or cancel, which is exactly what progress means.

cursor: wait in CSS: the busy cursor, used honestly

cursor: wait; Move your mouse over this box Cursors only appear with a mouse or trackpad. Open this page on a computer to see this one.

This is the cursor your browser and system draw for wait.

What it shows

Windows draws Busy (the Wait role, aero_busy.ani), an animated spinning ring with no arrow. macOS does not let a page show the spinning beach ball, so Chrome shows the arrow with a small spinner, the same as progress.

Usage

When to use it

Use it for

A short blocking step where clicks really will be ignored, such as an overlay while a payment confirms.
Inside a modal or panel that is locked while it loads. Scope it to that element instead of the whole page.
Desktop-style web apps that block input while they open a large document.

Avoid it for

Background work while the page stays usable. That is progress.
Anything longer than a second or two without visible progress in the page itself.

Code

Copy the snippet

CSS

.checkout.is-locked { cursor: wait; }

HTML

<div class="checkout is-locked">Confirming your payment...</div>

Support

Browsers and systems

Browser support for wait
Browser	Support
Chrome	1
Edge	12
Firefox	1
Safari	1.2
Safari on iOS	no
Chrome on Android	18

The matching operating system cursor
System	Matching cursor
Windows role	Wait
Windows file	`aero_busy.ani (animated)`
macOS	Busy but clickable in Chrome (the beach ball is not available to pages)

Watch out

Gotchas

wait blocks nothing. Clicks go through unless you disable the controls or cover them.
Clear it in a finally block so an error does not leave the busy cursor on screen.
The Windows Busy cursor is an animated .ani file. You cannot reproduce the animation with url(); browsers show one frame.

Free cursors

A custom wait cursor

The same cursor from each of our packs, free under CC0. Move your mouse over one to try it, or open it for the .cur file, the PNG and the CSS.

FAQ

Questions

Does cursor: wait stop clicks?: No. It is only a cursor. Disable the buttons, set the inert attribute on the locked area, or cover it with an overlay.
Why does wait look like progress on my Mac?: macOS does not let apps use the spinning beach ball as a cursor. Chrome uses the arrow with a spinner for both values.
Is wait or progress better for a loading page?: Usually progress. Most loading states still let people scroll, read or cancel, which is exactly what progress means.

More