react-page-loading-bar
v1.0.10
Published
A react top loading bar component for page loads
Downloads
386
Maintainers
syntaxiscsReadme
react-page-transition-bar
Inspired by react-top-loading-bar, rewritten to fix Hydration Errors
Install
with NPM
npm install react-page-transition-barwith PNPM (recommended)
pnpm add react-page-transition-barUsage
Defining with single color
import {LoadingBar} from "react-page-transition-bar"
export const App() {
const ref = useRef<{
complete: () => void;
staticStart: () => void;
getProgress: () => number;
continuousStart: () => void;
} | null>(null);
// Call on start of page load
ref.current.continousStart();
// Call on page load completion
ref.current.complete();
return (
<div>
<LoadingBar color="#ffffff" ref={ref}/>
</div>
);
}
Defining with color gradient
You may also pass 2 hex codes as an array to have the bar be shown as a linear gradient
import {LoadingBar} from "react-page-transition-bar"
export const App() {
const ref = useRef<{
complete: () => void;
staticStart: () => void;
getProgress: () => number;
continuousStart: () => void;
} | null>(null);
// Call on start of page load
ref.current.continousStart();
// Call on page load completion
ref.current.complete();
return (
<div>
<LoadingBar color={["#ffffff", "#00000"]} ref={ref}/>
</div>
);Examples
Remix
// Remix & React
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useNavigation
} from "@remix-run/react";
import { ReactNode, useEffect, useRef } from "react";
import {LoadingBar} from "react-page-transition-bar"
export const Layout = ({children}: ReactNode) => {
// Utils
const transition = useNavigate();
const ref = useRef<{
complete: () => void;
staticStart: () => void;
getProgress: () => number;
continuousStart: () => void;
} | null>(null);
useEffect(() => {
if (transition.state === "loading" && ref.current) {
ref.current.continuousStart();
} else if (transition.state === "idle" && ref.current) {
ref.current.complete();
}
}, [transition.state]);
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<LoadingBar color=#6e06f1" height={3} ref={ref} />
{children}
<ScrollRestoration />
<Scripts />
</body>
</html>
);
};
export default function App() {
return <Outlet/>
};