1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Navegación scrollnavigationindicator

Scroll Indicator

Barra superior ultrafina que refleja el progreso de desplazamiento en tiempo real.

Uso

Copia y pega este código directamente en tu página de Astro:

astro 
---
import { ScrollIndicator } from 'astro-component-kit';
---

<ScrollProgressTop>Content</ScrollProgressTop>
--- import { ScrollIndicator } from 'astro-component-kit'; --- <ScrollProgressTop>Content</ScrollProgressTop>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/ScrollIndicator.astro:

astro 
---
---
<div class="scroll-ind" id="scroll-bar"></div>
<style>
  .scroll-ind { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: #6366f1; z-index: 1000; box-shadow: 0 0 10px #6366f1; }
</style>
<script>
  window.addEventListener('scroll', () => {
    const bar = document.getElementById('scroll-bar');
    const scroll = document.documentElement.scrollTop;
    const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    const scrolled = (scroll / height) * 100;
    if (bar) bar.style.width = scrolled + '%';
  });
</script>
--- --- <div class="scroll-ind" id="scroll-bar"></div> <style> .scroll-ind { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: #6366f1; z-index: 1000; box-shadow: 0 0 10px #6366f1; } </style> <script> window.addEventListener('scroll', () => { const bar = document.getElementById('scroll-bar'); const scroll = document.documentElement.scrollTop; const height = document.documentElement.scrollHeight - document.documentElement.clientHeight; const scrolled = (scroll / height) * 100; if (bar) bar.style.width = scrolled + '%'; }); </script>

Información Rápida

Categoría
Navegación
Nombre de archivo
ScrollIndicator.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
scrollnavigationindicator