CynosureComponents / Overlays
ProgressOverlay
A modal progress dialog for long work the page has to wait for.
When to useLink to "When to use"
- Blocking work that takes seconds or more: exporting, compressing, converting a document.
Use something else when:
- people can keep working meanwhile: a ProgressBar in the page, or a Toast when it is done
- it takes under a second: LoadingDots or nothing
UsageLink to "Usage"
tsx
import { ProgressOverlay } from "@arshad-shah/cynosure";
<ProgressOverlay open={running} title="Compressing the PDF" value={page} max={pages} onCancel={stop} />Leave value undefined while the amount is unknown. Give onCancel whenever the work can be stopped; without it the overlay cannot be closed.
PropsLink to "Props"
| Prop | What it does | Type | Default |
|---|---|---|---|
openRequired | Show it. | boolean | |
titleRequired | What is happening ("Compressing the PDF"). Names the dialog and the progress bar. | string | |
value | How far it has got; leave undefined while the amount is unknown. | number | |
max | The value that means complete. Default 100. | number | 100 |
status | A line under the bar ("Page 3: images"). Default: the count, or "Working…". Read out politely as it changes. | string | the count |
onCancel | Cancels the work: the Cancel button and Escape. Without it the overlay cannot be closed. | (() => void) | |
labels | Replace the built-in English text: the Cancel button and the status line. | Partial<ProgressOverlayLabels> | |
className | Added to the dialog's panel, for layout. | string | |
style | Layout only. | CSSProperties |
Generated from the type definitions in @arshad-shah/cynosure 0.5.0.
Behaviour and accessibilityLink to "Behaviour and accessibility"
- Role: a modal dialog named by
title, holding a progress bar with the same name. - Announcements: the status line ("3 of 12", or your
status) is a polite live region. - Keyboard: focus moves into the dialog and stays there; Escape cancels (only with
onCancel); focus returns where it was when it closes.
ThemingLink to "Theming"
No tokens of its own: style it through the Dialog and ProgressBar tokens.
RelatedLink to "Related"
These examples run Cynosure 0.5.0 (commit 50ce30b), the version on npm.