# Légua Uma pílula flutuante no topo da tela mostra quanto da página já foi lido e se abre num menu ao clicar. > Légua é um componente do THM Componentes que fixa uma pílula no topo da tela com um anel e um número mostrando quanto da página já foi rolado. Ao clicar, ela se expande com efeito de mola e revela uma área com links ou conteúdo extra, útil em artigos longos, propostas e documentação. - Categoria: Navegação e scroll - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, NumberFlow, Motion for Vue - Interação: Mouse, Toque, Rolagem - URL: https://vibecode.thmtecnologia.com/componentes/legua/ ## Como ele é Lembra a ilha de notificações dos celulares recentes, dedicada à leitura. Uma pílula na cor primária do tema, levemente translúcida e com desfoque atrás, fica presa no topo e centralizada enquanto a página rola. À esquerda, um pequeno anel se preenche conforme a rolagem; no centro, um título curto; à direita, a porcentagem, com dígitos que rolam ao mudar. O anel troca de cor entre o modo claro e o escuro para manter o contraste. Ao carregar, ela se abre do centro com um leve quique. Um clique a expande num painel um pouco mais largo, com até 240 pixels de conteúdo rolável, como uma lista de seções. ## Você pode estar procurando isto se pediu algo assim - “aquela ilha do iPhone, mas mostrando quanto falta para terminar de ler” - “barra de progresso de leitura flutuando no topo do artigo” - “indicador de porcentagem lida que fica fixo enquanto rolo a página” - “menu flutuante que abre com o índice do artigo” - “pílula no topo da página com o progresso do scroll” - “mostrar ao leitor quanto da proposta ele já leu” ## Também chamado de pílula de progresso, reading progress, barra de progresso de leitura, scroll progress indicator, porcentagem de leitura, índice flutuante, indicador de rolagem ## Quando usar - Artigos longos de blog, guias e estudos de caso - Propostas comerciais e relatórios publicados como página - Documentação com índice de seções que a pessoa quer acessar rápido - Landing pages longas em que vale mostrar o quanto falta ## Quando evitar - Páginas curtas, em que o indicador quase não sai do zero - Layouts que já têm uma barra fixa no topo, onde a pílula disputa espaço ## Como pedir para a sua IA ```text Adicione uma ilha flutuante de progresso de leitura no topo dos meus artigos: pílula fixa com anel e porcentagem lida, que se expande ao clicar com o índice das seções, abre pelo teclado, usa as cores do tema e tem versão sem animação para movimento reduzido. ``` Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Légua ### Légua funciona no Nuxt com SSR? Funciona, com um cuidado. Légua lê a rolagem e o tema de cores no navegador ao montar, por isso o prompt do THM Componentes orienta a IA a carregar sob demanda e a envolver o componente em ClientOnly, com um fallback estático no servidor. O componente também precisa de uma dependência de números animados, instalada pelo mesmo prompt. ### Dá para abrir Légua pelo teclado? Não por padrão. Légua abre e fecha com um clique na própria pílula, que não é um botão, então não recebe foco pelo Tab nem responde ao Enter. Os links dentro da área expandida são focáveis. Vale pedir à IA para trocar o gatilho por um botão com aria-expanded e anunciar o progresso de forma discreta. ### Légua funciona no celular? Sim. O progresso de Légua acompanha a rolagem pelo dedo ou pela roda do mouse, e o toque na pílula abre e fecha a área extra como um clique. A pílula tem 260 pixels de largura fechada e 320 aberta, o que cabe na maioria dos celulares; em telas muito estreitas, vale reduzir esses valores. ## Componentes relacionados - [Atol](https://vibecode.thmtecnologia.com/componentes/atol/): Uma pílula preta no topo da tela que cresce e muda de formato para mostrar música, chamada, aviso ou cronômetro. - [Farol](https://vibecode.thmtecnologia.com/componentes/farol/): Uma linha fina ao lado do texto ganha um feixe colorido que desce junto enquanto a pessoa lê e rola a página. - [Transferidor](https://vibecode.thmtecnologia.com/componentes/transferidor/): Um anel que se preenche com animação até a porcentagem da meta, com o número no centro. - [Trevo](https://vibecode.thmtecnologia.com/componentes/trevo/): Uma janela de busca que abre com Ctrl K ou ⌘K para achar páginas e executar ações sem tirar as mãos do teclado. - [Almanaque](https://vibecode.thmtecnologia.com/componentes/almanaque/): Uma linha vertical com marcos fixos que vai sendo preenchida por um feixe colorido conforme a página rola. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.