ScrollProgress

scrollprogress-1779394345290.tsx

'use client'
import { useState, useEffect } from 'react'

export default function ScrollProgress({ color = 'linear-gradient(90deg,#6d28d9,#2563eb,#0891b2)' }) {
  const [progress, setProgress] = useState(0)
  useEffect(() => {
    const onScroll = () => {
      const el = document.documentElement
      const scrolled = el.scrollTop
      const total = el.scrollHeight - el.clientHeight
      setProgress(total > 0 ? (scrolled / total) * 100 : 0)
    }
    window.addEventListener('scroll', onScroll)
    return () => window.removeEventListener('scroll', onScroll)
  }, [])
  return (
    <div style={{ padding:'20px', display:'flex', flexDirection:'column', gap:'16px' }}>
      <div style={{ position:'relative', height:'6px', background:'#e2e8f0', borderRadius:'3px', overflow:'hidden' }}>
        <div style={{ height:'100%', background:color, borderRadius:'3px', width:progress+'%', transition:'width 0.1s' }} />
      </div>
      <div style={{ textAlign:'center', fontSize:'13px', color:'#64748b' }}>
        Scroll progress: <strong style={{ color:'#6d28d9' }}>{Math.round(progress)}%</strong>
      </div>
      <div style={{ height:'300px', overflowY:'scroll', border:'1px solid #e2e8f0', borderRadius:'10px', padding:'16px' }}
        onScroll={e => {
          const el = e.currentTarget
          setProgress((el.scrollTop / (el.scrollHeight - el.clientHeight)) * 100)
        }}
      >
        {Array.from({length:20}).map((_,i)=>(
          <p key={i} style={{ color:'#374151', fontSize:'14px', lineHeight:1.7, marginBottom:'12px' }}>
            Paragraph {i+1}: Scroll through this content to see the progress bar update in real time. Empire UI components are designed to be interactive and responsive.
          </p>
        ))}
      </div>
    </div>
  )
}

Component info

CategoryNavigation

Frameworkreact

TierFREE

Copies0

About

Reading progress bar that tracks page scroll position

More from Navigation

import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface FloatingDockProps {
  icons: { id: number; src: string; }[];
}

class FloatingDock extends React.Component<FloatingDockProps, {}> {
  constructor(props: FloatingDockPro

FloatingDock

Navigation

'use client'
import { useState } from 'react'

const NAV = [
  { id: 'home', icon: '◉', label: 'Overview', shortcut: 'G H' },
  { id: 'components', icon: '⬡', label: 'Components', shortcut: 'G C', badge: 120, children: [
    { id: 'buttons', label: '

SidebarNav

Navigation

'use client';

import React from 'react';

interface PaginationNavProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}

const PaginationNav: React.FC<PaginationNavProps> = ({ currentPage, totalPages, onPageCh

PaginationNav

Navigation

'use client';

import React, { useState } from 'react';

interface Tab {
  id: number;
  label: string;
}

const tabs: Tab[] = [
  { id: 1, label: 'Tab 1' },
  { id: 2, label: 'Tab 2' },
  { id: 3, label: 'Tab 3' },
  { id: 4, label: 'Tab 4' },
];

c

TabsNav

Navigation