remix-loading-effect
Super easy way to add nprogress loading bar to a Remix app.
Ecosystems:
TypeScript
@sjc5/remix-loading-effect
Description
Makes adding nprogress to your Remix app really easy. Makes the nprogress loading effect appear whenever there is:
- a navigation in progress, or
- a mutation in progress (specifically, a POST request via useFetcher)
Uses some reasonable debouncing to keep it from being too glitchy / janky.
Installation
npm i @sjc5/remix-loading-effect
Usage
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 />
}
Customize Color
- To customize color, add an
--nprogress-colorCSS variable to your global stylesheet:
:root {
--nprogress-color: green;
}
Package Rankings
Top 24.16% on Npmjs.org