What is the difference between progress and wait?

progress means busy but still usable; wait means busy, please hold on. On Windows they look different (arrow with spinner versus spinner alone). On macOS, Chrome shows the same cursor for both.

How do I show the progress cursor during a fetch?

Add a class such as is-busy to the html element before the request and remove it in a finally block, with html.is-busy { cursor: progress; }.

Can I make my own animated progress cursor?

Not with url(). Browsers show a single frame of a cursor image. For a custom animated look you need a JavaScript cursor that follows the pointer.

cursor: progress in CSS: busy, but still usable

cursor: progress; 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 progress.

What it shows

Windows draws Working in Background (the AppStarting role, aero_working.ani), an animated arrow with a spinning ring. macOS shows the arrow with a small spinning wheel.

Usage

When to use it

Use it for

While a save, upload or fetch runs in the background and the page stays usable.
On a button right after it is clicked, while its request is in flight, together with a spinner or a 'Saving...' label.
On the whole page during a client-side navigation, removed the moment the new content is in.

Avoid it for

When people really cannot interact yet. That is wait, and you should block the UI honestly.
As the only feedback. Many people never look at the cursor, and touch users have none. Show progress in the page too.

Code

Copy the snippet

CSS

.saving { cursor: progress; }

HTML

<div class="saving">Saving in the background. You can keep typing.</div>

Support

Browsers and systems

Browser support for progress
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	AppStarting
Windows file	`aero_working.ani (animated)`
macOS	Busy but clickable (arrow with spinner)

Watch out

Gotchas

Clear the class in a finally block, or a failed request leaves the spinner on screen for good.
The Windows version is an animated .ani file. Browsers do not animate url() cursors, so you cannot copy the spin with a custom image.
Chrome on macOS shows the same cursor for progress and wait.

Free cursors

A custom progress 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

What is the difference between progress and wait?: progress means busy but still usable; wait means busy, please hold on. On Windows they look different (arrow with spinner versus spinner alone). On macOS, Chrome shows the same cursor for both.
How do I show the progress cursor during a fetch?: Add a class such as is-busy to the html element before the request and remove it in a finally block, with html.is-busy { cursor: progress; }.
Can I make my own animated progress cursor?: Not with url(). Browsers show a single frame of a cursor image. For a custom animated look you need a JavaScript cursor that follows the pointer.

More