Toast
A confirmation after an action.
Kit parts
Progress toast
A toast that carries a job running in the background, an export, an import or a sync, from its start to its end. The toast’s plate holds a lamp, the job in words, the progress groove filling with ink, the count, the percent and the time left, and a Cancel key. When the job ends the same plate says how it went: done, with an action key such as Open, and gone after six seconds; failed, with Retry, staying until it is closed; or cancelled. A job of unknown size runs a short length of ink to and fro. Nothing takes focus, and only the start and the end are said aloud.
Seats open in 11 days. Want one email that morning?
Anatomy
The plate is the toast’s, with the panel’s grain. The groove is the kit’s progress slot filling with ink; the lamp is the kit’s, amber and blinking while the job runs, green, red or unlit when it ends. The keys are the kit’s small keys and the close key the icon set’s cross. Sizes are printed by the file field’s own sizes. No colour is added.
Variants
- A count
- Sizes
- Size unknown · no total
- Done, with an action
- Failed, with Retry
- No Cancel key · no cancel()
States
- Running
- Size unknown
- Done
- Failed
- Cancelled
Props and options
| Name | Kind | Description |
|---|---|---|
| progressToast(options) | function | Shows a plate for a job and returns its handle. |
| text · value · total · unit | option | The job in words, how far it has got and how big it is. |
| cancel · cancelled | option | Called when Cancel is pressed (without it there is no Cancel key), and the words then. |
| eta · into | option | Whether to print the time left, worked out from the pace so far once there is enough of it; and an element to stack in (position: relative). |
| cancel() · dismiss() | method | Cancel the job as the key does, or take the plate away. |
| state · value · total · text · plate | property | Where the job stands, and the plate itself. |
| progressFraction() · progressCount() · progressPercent() · progressEta() · progressEtaText() · progressValueText() | function | The sums and words behind the plate. |
| progressToastHTML() | function | One plate as markup in a state, for a specimen or a page drawn on the server. |
Usage notes
Press Export 3 files: a plate rises in the corner of the panel, its lamp blinking amber, and the groove fills a file at a time with the time left beside it; when it is done the lamp turns green and Open appears. Sync the library has no size, so its ink runs to and fro. Press Cancel on any of them while it runs.
Accessibility
- Only the start and the end are said, in one polite status line shared by the stack; a failure is said in an alert. The percent is never read out as it climbs.
- A plate never takes focus. Its keys are real buttons in the page’s tab order, named in words (Cancel, Open, Retry, and a close key named “Close:” and the job). Escape closes a finished plate that focus is in, and focus goes back where it came from.
- A finished plate’s clock stops while the pointer is on it or focus is in it; a failed one stays until it is closed, because an error should not leave before it has been read.
- The lamp is never alone: the words say done, failed or cancelled. Under reduced motion the plate does not rise, the lamp does not blink, and a job of unknown size is a still, hatched groove.
Related parts
Ticket toast
A toast issued like a numbered ticket from a dispenser. A short slip of thermal paper with a number, a line of words and, if it needs one, an action key slides out of a slot at the edge of the screen. Several fan a little. Tear one off with a swipe or its close key, or leave it and it retracts by itself, on a timer that stops while you are reading it.
Progress
Progress through a task: ink filling a groove, never a coloured bar.
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.
Loading overlay
A pane of smoked glass laid over a panel while it works. The panel underneath keeps every pixel of its place, dimmed and a little out of focus, with one plate in the middle carrying a spinner and a line of words. Set aria-busy on the panel to lower the glass; what is underneath goes inert, so nothing in it can be pressed or tabbed to until the glass lifts.