# Spinner > A loading status sized on its text: a breathing ring, twelve bars, three dots or a terminal braille cell. Add .is-done and a tick draws itself while the words roll. Feedback & loading · spinner, loading, status, button · HTML and CSS only · no dependencies · updated 2026-10-16 Demo: https://kodza.dev/components/loading-spinner/ ## Files The code below, served as files: byte for byte what the Kodza site copies (the CSS includes its theme guard). - [`kodza-loading-spinner.css`](https://kodza.dev/registry/loading-spinner/kodza-loading-spinner.css) · 10.0 KB - [`kodza-loading-spinner.html`](https://kodza.dev/registry/loading-spinner/kodza-loading-spinner.html) · 2.7 KB · the markup, to adapt and paste into your page **Can you run shell commands? Download the CSS, don't retype it.** Retyping costs thousands of tokens and can drop or change lines of the CSS. Put the files where your stack expects them (Use it says where: change the `-o` paths): ```bash curl -fsSL --create-dirs -o kodza/kodza-loading-spinner.css https://kodza.dev/registry/loading-spinner/kodza-loading-spinner.css ``` Then load the file from your page as Use it shows, instead of pasting the content. The HTML is the part you adapt (text, links, modifiers): paste it from the Code section. Copy the CSS from the Code section only if you can't run commands, exactly as it is. (Windows PowerShell: `curl.exe`.) ## API - Root: `.kodza-spinner` - Variables (set them on the root element itself: it declares its own defaults): - `--kz-spinner-size: 1.15em` - `--kz-spinner-stroke: 2.2` - `--kz-spinner-track: 0.16` - `--kz-spinner-tempo: 1` - `--kz-spinner-gap: 0.6em` - `--kz-spinner-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace` - `--kz-spinner-ease: cubic-bezier(0.22, 1, 0.36, 1)` - Modifiers: `.kodza-spinner--terminal` ## Dark mode Nothing to set: it takes its colours from the text around it, or looks the same on a light and a dark page. ## Use it ### Plain HTML page - CSS: `kodza/kodza-loading-spinner.css` next to the page (the Files commands as they are), linked in ``: ``. Without a shell, paste it in a `