NProgress bar like for Remix
npm install @bprogress/remixBProgress integration for Remix applications.
To install BProgress, run the following command:
``bash`
npm install @bprogress/remix
Import into your /app/root(.jsx/.tsx) folder.
`tsx`
import { ProgressProvider } from '@bprogress/remix';
`tsx`
`tsx title="app/root.tsx"
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from '@remix-run/react';
import type { LinksFunction } from '@remix-run/node';
import { ProgressProvider } from '@bprogress/remix';
import './tailwind.css';
export const links: LinksFunction = () => [
{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
{
rel: 'preconnect',
href: 'https://fonts.gstatic.com',
crossOrigin: 'anonymous',
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
},
];
export function Layout({ children }: { children: React.ReactNode }) {
return (
export default function App() {
return
}
``
Go to the documentation to learn more about BProgress.
If you encounter any problems, do not hesitate to open an issue or make a PR here.
MIT