gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Portal reading progress bar above all layers

Browse Source
This commit is contained in:
gbanyan
2025-11-21 01:42:49 +08:00
parent cafb810155
commit fc24ddb676
1 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
components/reading-progress.tsx
View File

@@ -1,6 +1,7 @@
'use client'; 'use client';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
export function ReadingProgress() { export function ReadingProgress() {
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
@@ -29,19 +30,21 @@ export function ReadingProgress() {
return () => window.removeEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll);
}, [mounted]); }, [mounted]);
if (!mounted) return null; if (!mounted) return null;
return ( return createPortal(
<div className="pointer-events-none fixed inset-x-0 top-0 z-[999] h-2 bg-transparent"> <div className="pointer-events-none fixed inset-x-0 top-0 z-[1200] h-2 bg-transparent">
<div className="relative h-2 w-full overflow-visible"> <div className="relative h-2 w-full overflow-visible">
<div <div
className="absolute inset-y-0 left-0 w-full origin-left rounded-full bg-gradient-to-r from-[rgba(124,58,237,0.75)] via-[rgba(167,139,250,0.8)] to-[rgba(14,165,233,0.7)] shadow-[0_0_10px_rgba(124,58,237,0.45)] transition-[transform,opacity] duration-300 ease-out" className="absolute inset-y-0 left-0 w-full origin-left rounded-full bg-gradient-to-r from-[rgba(124,58,237,0.9)] via-[rgba(167,139,250,0.9)] to-[rgba(14,165,233,0.8)] shadow-[0_0_12px_rgba(124,58,237,0.5)] transition-[transform,opacity] duration-300 ease-out"
style={{ transform: `scaleX(${progress / 100})`, opacity: progress > 0 ? 1 : 0 }} style={{ transform: `scaleX(${progress / 100})`, opacity: progress > 0 ? 1 : 0 }}
> >
<span className="absolute -right-2 top-1/2 h-3 w-3 -translate-y-1/2 rounded-full bg-white/75 blur-[1px] dark:bg-slate-900/75" aria-hidden="true" /> <span className="absolute -right-2 top-1/2 h-3 w-3 -translate-y-1/2 rounded-full bg-white/80 blur-[1px] dark:bg-slate-900/80" aria-hidden="true" />
</div> </div>
<span className="absolute inset-x-0 top-2 h-px bg-gradient-to-r from-transparent via-blue-200/40 to-transparent blur-sm dark:via-blue-900/30" aria-hidden="true" /> <span className="absolute inset-x-0 top-2 h-px bg-gradient-to-r from-transparent via-blue-200/40 to-transparent blur-sm dark:via-blue-900/30" aria-hidden="true" />
</div> </div>
</div> </div>,
document.body
); );
} }