` - Needs: `kit.css` and `kit.mjs` ([how to install the kit](https://tactileui.dev/docs/installation#the-kit)) - Categories: Loaders - Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED - Volumes: Tactile, Quiet ## Variants ### Glass up · the panel as it is ```html

Invoice 0412 · NorthwindDraft

Customer

Amount

Saving your changes

``` ### Glass down · aria-busy="true" ```html

Invoice 0412 · NorthwindDraft

Customer

Amount

Refreshing the invoice

``` ### On a list of rows ```html

Harlow & Finch Ltd£1,240.00
Quay Joinery£310.00
Okafor Surveys£95.00

Refreshing

Saving your changes

``` ```js import { setBusy } from '/kit/kit.mjs'; const panel = document.querySelector('.tui-loading'); setBusy(panel, true, 'Saving your changes'); // glass down: content inert, the plate says why await save(); setBusy(panel, false); // glass up: content live, focus returned // aria-busy set by hand works too: kit.mjs watches it and keeps the content inert in step. ``` The demo on the page: ```html

Invoice 0412 · NorthwindDraft

Customer

Amount

Saving your changes

Nothing saved yet

``` ## Usage notes Press Save changes: the glass comes down over the invoice, the form behind it is out of reach (Tab skips it), and the plate says what is going on. After two seconds it lifts and the panel is exactly as it was. The two panels under Variants show the same panel with the glass up and down. ## Accessibility - The panel carries `aria-busy`, which tells a screen reader its content is changing; the plate is a polite `role="status"`, so its line is said when the glass comes down and again when the words change. - What is underneath is inert while the glass is down: it cannot be pressed, tabbed to or read, so nobody acts on a form that is mid-save. It is given back, with the focus, when the glass lifts. - If the focus was inside the panel it moves to the plate, which has a visible 2px ring, and returns to where it was when the work is done. - The glass dims what is under it, but the words are on an ordinary plate in ordinary ink (the same contrast as any other text), so they read the same in every finish. Where reduced transparency is asked for, the glass is solid. - Under reduced motion the glass appears at once and the spinner holds on one lit lamp; the words are the same. ## How it’s built The panel is given a second layer, an absolutely placed pane the size of the panel with the panel’s own corners, so the panel is neither replaced nor resized. The glass is the kit’s shadow colour at half strength with a little blur, a faint sheen from the upper left and a lit lip; the plate on it is a float plate, the same one a menu uses. The script does the one thing CSS cannot, making the content inert and looking after the focus. ## Rules Show that a panel is saving or refreshing without moving it or blanking it: the same panel, behind glass, with one line saying what is happening. The full rules are in `loading-overlay.rules.md` in the brain, which ships with the Kit. ## Related parts - [Spinner](https://tactileui.dev/parts/spinner): A ring of eight lamps lit in turn, a chase round a dial: each lamp is a dim cap with its light laid over it, and the light fades as the chase passes on, leaving a short tail. Only the light’s opacity moves. Amber, the lamp for work in hand. Under reduced motion it holds still on one lit lamp at the top, and the words still say it is busy. - [Skeleton](https://tactileui.dev/parts/skeleton): The shape of a page before its data arrives, drawn as the unprinted plate: blank engraved bars where the words will print. Nothing on it moves. One amber lamp beside “Loading” is the only sign of work. - [Panel](https://tactileui.dev/parts/panel): A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels. - [Status](https://tactileui.dev/parts/status): A lamp with words: the state line in tables, panel heads and lists. The words carry the meaning; the lamp is the glance.