Page veil

Page clicks:

Nested local veils

This panel has its own veil with the default timings: the spinner shows after 300 ms and stays for at least 500 ms. Requests fired from inside it veil only the panel, so the rest of the page stays usable.

Outer panel clicks:

Slow request from the outer panel: takes two seconds and veils the whole outer panel, inner panel included.

This nested panel has a veil of its own, configured with setSpinnerDelay(100 ms) and setMinimumSpinnerTime(1 s). Requests fired from inside it veil only this panel: the innermost veil takes the request.

Inner panel clicks:

Delegated clicks

One AjaxEventBehavior on the list handles the clicks on all of its rows through a child selector, and every row has a local veil of its own. A click on a row takes a second and veils only the row that was clicked, not the list or the page.

A markup id named after an object member

This panel's markup id is constructor, the name of a member every JavaScript object has. It is veiled like any other: Slow request, clicked times.

Scrolling host

This box scrolls and has a local veil. Scroll down and click a request: the veil covers the part of the box you see, with the spinner in its middle, and follows the box while you scroll it. Requests sent: .

Line : slow request

Positioned host

The card on the right is absolutely positioned and has a local veil. A request from it takes two seconds, and the card stays where it is.

Slow request, clicked times

Under a sticky header

The panel in this box has a local veil. Click its request, which takes three seconds, then scroll the box so the panel slides under the sticky header: the header stays in front of the veil and its spinner.

Sticky header

Scroll down to the panel.

Slow request, clicked times

Scroll on, so the panel can move under the header.