# Légua A floating pill at the top of the screen shows how much of the page has been read and opens into a menu on click. > Légua is a THM Componentes component that pins a pill to the top of the screen with a ring and a number showing how much of the page has been scrolled. On click, it expands with a springy motion and reveals an area for links or extra content, useful for long articles, proposals and documentation. - Category: Navigation and scroll - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Medium: canvas or continuous animation; fine for one section - Technology: Vue 3, TypeScript, Tailwind CSS v4, NumberFlow, Motion for Vue - Interaction: Mouse, Touch, Scroll - URL: https://vibecode.thmtecnologia.com/en/components/legua/ ## 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 ```text 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. ## Related components - [Atol](https://vibecode.thmtecnologia.com/en/components/atol/): A black pill at the top of the screen that grows and reshapes to show music, a call, an alert or a timer. - [Farol](https://vibecode.thmtecnologia.com/en/components/farol/): A thin line beside the text gains a colorful beam that travels down as people read and scroll. - [Transferidor](https://vibecode.thmtecnologia.com/en/components/transferidor/): A ring that fills with animation up to the goal percentage, with the number in the middle. - [Trevo](https://vibecode.thmtecnologia.com/en/components/trevo/): A search box that opens with Ctrl K or ⌘K to find pages and run actions without leaving the keyboard. - [Almanaque](https://vibecode.thmtecnologia.com/en/components/almanaque/): A vertical line with pinned milestones that a colored beam fills in as the page scrolls. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).