Variants
import { html, renderApp } from 'mates';
import { Spinner, Text } from 'mates-ui';
const App = () => () => html`
<x-row gap="var(--md-space-6)" align="center" wrap>
${(["default","arc","double","segments","fade"]).map(v => html`
<x-col align="center" gap="var(--md-space-2)">
${Spinner({ variant: v, size: "md" })}
${Text(v, { type: "label-sm", color: "muted" })}
</x-col>
`)}
</x-row>
`;
renderApp(App, document.getElementById('app'));
Sizes
import { html, renderApp } from 'mates';
import { Spinner, Text } from 'mates-ui';
const App = () => () => html`
<x-row gap="var(--md-space-6)" align="center">
<x-col align="center" gap="var(--md-space-2)">
${Spinner({ size: "xs" })}
${Text("xs", { type: "label-sm", color: "muted" })}
</x-col>
<x-col align="center" gap="var(--md-space-2)">
${Spinner({ size: "sm" })}
${Text("sm", { type: "label-sm", color: "muted" })}
</x-col>
<x-col align="center" gap="var(--md-space-2)">
${Spinner({ size: "md" })}
${Text("md", { type: "label-sm", color: "muted" })}
</x-col>
<x-col align="center" gap="var(--md-space-2)">
${Spinner({ size: "lg" })}
${Text("lg", { type: "label-sm", color: "muted" })}
</x-col>
</x-row>
`;
renderApp(App, document.getElementById('app'));
Colors
import { html, renderApp } from 'mates';
import { Spinner, Text } from 'mates-ui';
const App = () => () => html`
<x-row gap="var(--md-space-6)" align="center">
<x-col align="center" gap="var(--md-space-2)">
${Spinner({ color: "primary" })}
${Text("primary", { type: "label-sm", color: "muted" })}
</x-col>
<x-col align="center" gap="var(--md-space-2)">
${Spinner({ color: "muted" })}
${Text("muted", { type: "label-sm", color: "muted" })}
</x-col>
<x-col align="center" gap="var(--md-space-2)">
${Spinner({ color: "error" })}
${Text("error", { type: "label-sm", color: "muted" })}
</x-col>
<x-col align="center" gap="var(--md-space-2)"
style="background:var(--md-color-primary);padding:var(--md-space-3);border-radius:var(--md-radius-md);">
${Spinner({ color: "white" })}
${Text("white", { type: "label-sm", style: { color: "rgba(255,255,255,0.7)" } })}
</x-col>
</x-row>
`;
renderApp(App, document.getElementById('app'));
Inside buttons
import { html, renderApp } from 'mates';
import { FilledButton, OutlinedButton, TextButton, DangerButton } from 'mates-ui';
const App = () => () => html`
<x-row gap="var(--md-space-3)" wrap>
${FilledButton("Saving…", { loading: true })}
${OutlinedButton("Loading", { loading: true })}
${TextButton("Wait", { loading: true })}
${DangerButton("Danger", { loading: true })}
</x-row>
`;
renderApp(App, document.getElementById('app'));
Inline usage
import { html, renderApp } from 'mates';
import { Spinner, Text } from 'mates-ui';
const App = () => () => html`
<x-col gap="var(--md-space-4)">
<x-row gap="var(--md-space-3)" align="center">
${Spinner({ size: "sm" })}
${Text("Fetching latest results…", { type: "body-md", color: "muted" })}
</x-row>
<x-row gap="var(--md-space-3)" align="center">
${Spinner({ size: "sm", color: "error" })}
${Text("Retrying connection…", { type: "body-md", color: "muted" })}
</x-row>
<x-row gap="var(--md-space-3)" align="center">
${Spinner({ size: "xs" })}
${Text("Syncing", { type: "label-md", color: "muted" })}
</x-row>
</x-col>
`;
renderApp(App, document.getElementById('app'));
Centered overlay
import { html, renderApp } from 'mates';
import { Spinner, Text } from 'mates-ui';
const App = () => () => html`
<div style="width:100%;max-width:28rem;height:10rem;
border:0.06rem dashed var(--md-color-border);
border-radius:var(--md-radius-lg);display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:var(--md-space-3);
background:var(--md-color-surface-variant);">
${Spinner({ size: "lg" })}
${Text("Loading content…", { type: "label-md", color: "muted" })}
</div>
`;
renderApp(App, document.getElementById('app'));