Super easy way to add nprogress loading bar to a Remix app.
Makes adding nprogress to your Remix app really easy. Makes the nprogress loading effect appear whenever there is:
Uses some reasonable debouncing to keep it from being too glitchy / janky.
npm i @sjc5/remix-loading-effect
In your app root, or wherever you want to use the loading effect, do the following:
import nProgress from "@sjc5/remix-loading-effect/nprogress.css"
import { useLoadingEffect } from "@sjc5/remix-loading-effect"
export function links() {
return [{ rel: "stylesheet", href: nProgress }]
}
export default function App() {
useLoadingEffect()
return <html />
}
--nprogress-color
CSS variable to your global stylesheet::root {
--nprogress-color: green;
}