Spinner
A loading spinner with a label for screen readers; it pulses instead of turning with reduced motion.
Demo
LoadingLoadingLoading the reportLoadingLoading
SavingLoading invoices
Sending In a line of text, in its colour.
Get it
It needs theme.qwe, as every component does; or take the whole kit, quillo-ui.qwe. Each component brings its own styles to the pages that show it.
$ curl -O https://quillolang.org/components/ui/theme.qwe$ curl -O https://quillolang.org/components/ui/spinner.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/spinner.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/spinner.qwe
view SpinnerDemo() = <div.demo-stack> <div.demo-row> <Spinner size="sm"/> <Spinner/> <Spinner size="lg" label="Loading the report"/> <Spinner tone="neutral"/> <Spinner tone="success"/> </div> <div.demo-row> <Spinner size="sm" show_label={true} label="Saving"/> <Spinner show_label={true} label="Loading invoices"/> <p.demo-note><Spinner size="sm" tone="current" label="Sending"/> In a line of text, in its colour.</p> </div> </div>Source
ui/spinner.qwe
// Spinner: something is loading. Screen readers hear its label once (role="status").//// <Spinner/>// <Spinner size="lg" label="Loading invoices"/>// <Spinner size="sm" show_label={true} label="Saving"/>//// size: "sm", "md" (default) or "lg"; it is drawn in the text's size units, so it// also follows font-size. label: what is loading ("Loading" by default), hidden// unless show_label. tone: "accent" (default), "neutral" or any other tone; inside// a button, tone="current" takes the text's colour. With reduced motion it pulses// slowly instead of turning.import ui/theme.qwe use ui_clslet spinner_css = css`.ui-spinner { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; font: 14px/1.4 var(--ui-font); color: var(--ui-muted); --t: var(--ui-accent); --s: 20px; }.ui-spinner-ring { flex: none; width: var(--s); height: var(--s); border-radius: 50%; border: max(2px, calc(var(--s) / 9)) solid color-mix(in srgb, var(--t) 18%, transparent); border-top-color: var(--t); animation: ui-spinner-turn .75s linear infinite;}.ui-spinner-sm { --s: 14px; font-size: 13px; }.ui-spinner-lg { --s: 32px; }.ui-spinner-neutral { --t: var(--ui-muted); }.ui-spinner-success { --t: var(--ui-success); }.ui-spinner-warning { --t: var(--ui-warning); }.ui-spinner-danger { --t: var(--ui-danger); }.ui-spinner-info { --t: var(--ui-info); }.ui-spinner-current { --t: currentColor; color: inherit; }@keyframes ui-spinner-turn { to { transform: rotate(360deg); } }@keyframes ui-spinner-pulse { 50% { opacity: .35; } }@media (prefers-reduced-motion: reduce) { .ui-spinner-ring { animation: ui-spinner-pulse 2s ease-in-out infinite; border-color: var(--t); }}`view Spinner(size: str = "md", label: str = "Loading", show_label: bool = false, tone: str = "accent", class: str? = null) { style global spinner_css <span class={ui_cls(["ui-spinner", size != "md" && `ui-spinner-${size}`, tone != "accent" && `ui-spinner-${tone}`, class])} role="status"> <span.ui-spinner-ring aria-hidden="true"></span> <span class={show_label ? "ui-spinner-label" : "ui-sr"}>{label}</span> </span>}Related
LoadingDotsThree dots bouncing in turn, inline, for something short that is on its way; screen readers hear the label.5 views · 6 downloadsLoadingOverlayCovers its content with a spinner and a message while something is busy, keeping the content in place but out of reach.5 views · 5 downloadsProgressHow far along something is, as a bar or a ring, with its percentage, or indeterminate.5 views · 6 downloadsSkeletonGrey shapes where content will be while it loads: text lines, boxes, circles, and a card.6 views · 6 downloadsSkeletonTableA table of grey bars in rows and columns, with a header row, while a table's data loads.4 views · 7 downloadsSkeletonTextGrey lines in the shape of a paragraph, with a heading and several paragraphs if asked, while text loads.5 views · 5 downloads
Thread
Thread 0 posts
On Spinner: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.