# Custom cursor and loader

> Turn any layer into a cursor that follows the pointer, or a frame into a loader that covers the page as it opens.

Source: https://uxdeck.app/guide/cursor-loader (checked against uxdeck on 16 October 2026)

Two finishing touches for a website: a **Custom cursor**, a layer that follows the pointer in place of the usual arrow, and a **Loader**, a frame that covers the page as it opens, plays what is inside it, then leaves. Both are designed on the canvas like anything else and play in Preview and on your published site.

## Make a custom cursor

1. Draw the cursor: a small circle, a ring, a word in a pill.
2. Put it in the screen where it should be used.
3. Select it, open the **Prototype** tab and press the pointer button (**Make this the cursor**) at the right of **Custom cursor**.

It follows the pointer, centred on it. A toast confirms it, for example "Dot follows the pointer as the cursor in Preview and on the site".

### Cursor settings

- **Lag** (0 to 2 s, 0.12 s to start): how far behind the pointer it follows. 0 sticks to it; more feels softer.
- **Blend:** **Normal**, or **Difference**, which inverts what is under it. Make the cursor white for this: a white cursor stays visible over any colour, while a black one changes nothing.
- **Hide the page's cursor** (on): hides the usual arrow, so only yours shows.
- **Grow over links** (on): the cursor grows over anything clickable. **Size over links** sets how much (250% to start, 10 to 2,000%).

To turn it back into a plain layer, press the minus in **Custom cursor**.

## Make a loader

1. Draw a frame the size of the screen, directly in the page frame, and design what shows while the page opens: a logo, a counter, a burst of pictures.
2. Select it, open the **Prototype** tab and press the hourglass button (**Make this the loader**) at the right of **Loader**.

When the page opens, the loader covers it, plays what appears inside it, holds, then leaves. Everything outside it waits, and the page cannot scroll meanwhile.

### Loader settings

- **Hold for** (0 to 60 s, 2.5 s to start): how long it stays.
- **Leave over** (0 to 10 s, 0.6 s to start): how long it takes to go.
- **Leaves by:** **Fading out** or **Blurring away**.
- **Once a visit** (off): show it once a visit rather than every time the page opens.

### What to put inside

- **A counter:** a number with [Appear on scroll](/guide/appear-on-scroll) set to **Roll digits**.
- **A burst of pictures:** a frame of pictures with a **Flipbook** loop. See [Loop, Pin and scroll behaviour](/guide/loop-pin-scroll).
- **A logo:** any appear, such as **Mask reveal** on a word mark.

To turn it back into a section of the page, press the minus in **Loader**.

## Catches

- **The custom cursor is hidden on phones** and until the pointer first moves. Touch screens have no pointer to follow.
- **The page's own cursor comes back** over a field someone is typing in.
- **The loader must sit directly in the page frame.** In an auto layout page, set it to ignore auto layout first, or the **Loader** section is not offered.
- **A long hold is a long wait.** Keep the loader short; people came for the page.
- **On the canvas they stay where you drew them.** Preview the page to see them at work.

Custom cursors and loaders are on every plan.