LoadingDots

import ui/theme.qwe use theme_cssuse ui/loading_dots.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>

view LoadingDotsDemo() =    <div.demo-stack>        <div.demo-row style="gap: 28px">            <LoadingDots/>            <LoadingDots size="sm" tone="neutral"/>            <LoadingDots size="lg" tone="success"/>            <LoadingDots tone="info" show_label={true} label="Thinking"/>        </div>        <div.demo-row>            <Button disabled={true}><LoadingDots tone="current" label="Sending"/> Sending</Button>            <span style="display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 18px; background: var(--ui-subtle)">                <LoadingDots size="sm" tone="neutral" label="Ada is typing"/>            </span>        </div>    </div>

// LoadingDots: three dots that bounce in turn, in the line of text, for// something short that is on its way (a reply being typed, a result coming).// Screen readers hear the label once (role="status").////   <LoadingDots/>//   <LoadingDots size="sm" label="Ada is typing"/>//   <Button disabled={true}><LoadingDots tone="current" label="Sending"/></Button>//// size: "sm", "md" (default) or "lg". label: what is loading ("Loading"), for// screen readers only; show_label: true writes it beside the dots too.// tone: "accent" (default), "neutral", "success", "warning", "danger", "info", or// "current" to take the text's colour (inside a button). With reduced motion the// dots fade in turn instead of bouncing.import ui/theme.qwe use ui_clslet loading_dots_css = css`.ui-ldots { 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); --d: 7px; }.ui-ldots-row { display: inline-flex; align-items: center; gap: calc(var(--d) * .6); height: calc(var(--d) * 2.6); }.ui-ldots-dot { width: var(--d); height: var(--d); border-radius: 50%; background: var(--t);  animation: ui-ldots-bounce 1.2s ease-in-out infinite; }.ui-ldots-dot:nth-child(2) { animation-delay: .15s; }.ui-ldots-dot:nth-child(3) { animation-delay: .3s; }.ui-ldots-sm { --d: 5px; font-size: 13px; }.ui-ldots-lg { --d: 10px; font-size: 15px; }.ui-ldots-neutral { --t: var(--ui-muted); }.ui-ldots-success { --t: var(--ui-success); }.ui-ldots-warning { --t: var(--ui-warning); }.ui-ldots-danger { --t: var(--ui-danger); }.ui-ldots-info { --t: var(--ui-info); }.ui-ldots-current { --t: currentColor; color: inherit; }@keyframes ui-ldots-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(calc(var(--d) * -.8)); opacity: 1; } }@keyframes ui-ldots-fade { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }@media (prefers-reduced-motion: reduce) { .ui-ldots-dot { animation-name: ui-ldots-fade; animation-duration: 2s; } }`view LoadingDots(size: str = "md", label: str = "Loading", show_label: bool = false, tone: str = "accent",                 class: str? = null) {    style global loading_dots_css    <span class={ui_cls(["ui-ldots", size != "md" && `ui-ldots-${size}`, tone != "accent" && `ui-ldots-${tone}`, class])}          role="status">        <span.ui-ldots-row aria-hidden="true">            <span.ui-ldots-dot></span>            <span.ui-ldots-dot></span>            <span.ui-ldots-dot></span>        </span>        <span class={show_label ? "ui-ldots-label" : "ui-sr"}>{label}</span>    </span>}