What it looks like
It resembles the notification island on recent phones, built for reading. A pill in the theme primary color, slightly translucent with a blur behind it, stays pinned and centered at the top while the page scrolls. On the left, a small ring fills as you scroll; in the center, a short title; on the right, the percentage, with digits that roll as they change. The ring color switches between light and dark mode to keep contrast. On load, it opens from the center with a slight bounce. A click expands it into a slightly wider panel with up to 240 pixels of scrollable content, like a section list.
You may be looking for this if you asked for something like
- that iPhone island thing, but showing how much is left to read
- a reading progress bar floating at the top of the article
- a percentage read indicator that stays fixed while I scroll
- a floating menu that opens with the article table of contents
- a pill at the top of the page with scroll progress
- show readers how much of the proposal they have read
Also known as
- scroll percentage badge
- reading progress indicator
- scroll progress indicator
- reading progress ring
- floating table of contents
- progress pill
When to use
- Long blog posts, guides and case studies
- Sales proposals and reports published as a web page
- Documentation with a section index people want to reach quickly
- Long landing pages where it helps to show how much is left
When to avoid
- Short pages, where the indicator barely moves from zero
- Layouts that already have a fixed top bar, where the pill competes for space
How to ask your AI
Add a floating reading progress island at the top of my articles: a fixed pill with a ring and the percentage read, expanding on click with the section index, operable from the keyboard, using the theme colors and with a version without animation for reduced motion.
With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising.
Questions about Légua
Does Légua work in Nuxt with SSR?
It does, with one precaution. Légua reads the scroll position and the color theme in the browser when it mounts, so the THM Componentes prompt tells your AI to load it on demand and wrap it in ClientOnly with a static fallback on the server. It also needs an animated number dependency, installed by the same prompt.
Can people open Légua with the keyboard?
Not by default. Légua opens and closes with a click on the pill itself, which is not a button, so it does not take focus with Tab or respond to Enter. Links inside the expanded area are focusable. Ask your AI to turn the trigger into a button with aria-expanded and to announce progress discreetly.
Does Légua work on phones?
Yes. The progress in Légua follows scrolling by finger or mouse wheel, and tapping the pill opens and closes the extra area like a click. The pill is 260 pixels wide when closed and 320 when open, which fits most phones; on very narrow screens, consider reducing those values.
