Give your app's status a face. Six tiny characters drop in anywhere a spinner would go, and no two of them move the same way. People can tell at a glance whether things are working, done, broken, or waiting on them.
It's one custom element, <tiny-tell>, with no dependencies and about 14 KB min+gzip. It works in Chrome 111+, Firefox 113+, and Safari 16.4+.
See them live, and read the docs →
Pre-1.0. It's tested, but names and defaults may change before 1.0, so pin a version.
npm i tiny-tellsimport 'tiny-tells';To skip the build step, use the CDN script tag from the install guide, which always shows the current version.
Then add a tell, with words beside it that say what's happening:
<p><tiny-tell skin="dekatron" state="working" label=""></tiny-tell> <span role="status">Syncing 3 files…</span></p>Change the state and the tell springs into the new one:
document.querySelector('tiny-tell').state = 'done';The six tells are drones, flipdot, eyes, blot, dekatron, and lens. The five states are working, done, error, warning (waiting on a person), and idle. The docs cover sizing, color, accessibility, frameworks, agent status, testing, the play bundle, and the full API.
Building with an AI assistant? Point it at llms.txt, or see Build with AI.
Setup, builds, and tests live in CONTRIBUTING.md.