Navigation scrollnavigationindicator

Scroll Indicator

Thin loading bar at the top of the page reflecting scroll depth.

Usage

Copy the full block below to use this component with its imports.

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

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

Manual Installation

If you are not using the npm package, create a new file src/components/lib/ScrollIndicator.astro and paste the following code:

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>

Quick Info

Category
Navigation
Filename
ScrollIndicator.astro
Dependencies
None — pure Astro + CSS
Tags
scrollnavigationindicator