https://github.com/impeterk/remix-toploader
A Remix/React Router Top Loading Bar based on NProgress -- inspired by nextjs-toploader
https://github.com/impeterk/remix-toploader
progressbar react-router react-router-v7 remix remix-run toploader
Last synced: 11 months ago
JSON representation
A Remix/React Router Top Loading Bar based on NProgress -- inspired by nextjs-toploader
- Host: GitHub
- URL: https://github.com/impeterk/remix-toploader
- Owner: impeterk
- License: mit
- Created: 2024-10-15T19:28:14.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-30T23:14:36.000Z (over 1 year ago)
- Last Synced: 2025-07-01T22:51:01.394Z (11 months ago)
- Topics: progressbar, react-router, react-router-v7, remix, remix-run, toploader
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/remix-toploader
- Size: 79.1 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Remix / React Router TopLoader
- A Remix and React Router Top Loading bar Component **heavily** inspired by [Next.js TopLoader](https://github.com/TheSGJ/nextjs-toploader). Based on [NProgress](https://www.npmjs.com/package/nprogress)
> :exclamation: This is my first package. Contributions are welcomed 👍
## Install
using npm:
```bash
npm install remix-toploader
```
using yarn:
```bash
yarn add remix-toploader
```
using pnpm:
```bash
pnpm add remix-toploader
```
## Usage
import using:
```js
// in Remix v2
import RemixTopLoader from "remix-toploader";
// or
import { RemixTopLoader } from "remix-toploader";
// in React Router v7
import { RouterTopLoader } from "remix-toploader";
```
Navigate to `root.tsx` of your app and add `` to the `` tag.
```js
export function Layout({ children }) {
return (
{/* in Remix v2 */}
{/* in React Router v7 */}
{children}
);
}
```
### Default Configuration
Default styles and configuration without any props passed
```jsx
```
- `color`: to change the default color of TopLoader.
- `initialPosition`: to change initial position for the TopLoader in percentage, : `0.08 = 8%`.
- `crawlSpeed`: increment delay speed in `ms`.
- `speed`: animation speed for the TopLoader in `ms`
- `easing`: animation settings using easing (a CSS easing string).
- `height`: height of TopLoader in `px`.
- `crawl`: auto incrementing behavior for the TopLoader.
- `showSpinner`: to show spinner or not.
- `shadow`: a smooth shadow for the TopLoader. (set to `false` to disable it)
- `template`: to include custom HTML attributes for the TopLoader.
- `zIndex`: defines zIndex for the TopLoader.
- `showAtBottom`: To show the TopLoader at bottom. (increase height for the TopLoader to ensure it's visibility at the mobile devices)
#### `RemixTopLoaderProps`
| **Name** | **Type** | **Default Value** |
| ------------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| `color` | `string` | `"#2299DD"` |
| `initialPosition` | `number` | `0.08` |
| `crawlSpeed` | `number` | `200` |
| `height` | `number` | `3` |
| `crawl` | `boolean` | `true` |
| `showSpinner` | `boolean` | `true` |
| `easing` | `string` | `"ease"` |
| `speed` | `number` | `200` |
| `shadow` | `string \| false` | `"0 0 10px #2299DD,0 0 5px #2299DD"` |
| `template` | `string` | `"
"` |
| `zIndex` | `number` | `1600` |
| `showAtBottom` | `boolean` | `false` |
| `showForHashAnchor` | `boolean` | `true` |