How to use nprogress
package to show a loading top-bar on Vike?
#1611
-
The description is the title. I want to add a top-bar for loading. I'm currently on SolidJS though. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 4 replies
-
Hi @Blankeos, To show the top-bar loading when navigating between pages, use it with the For example: // +onPageTransitionStart.ts
import type { OnPageTransitionStartAsync } from "vike/types";
import NProgress from "nprogress"
export const onPageTransitionStart: OnPageTransitionStartAsync = async () => {
console.log("Page transition start");
NProgress.start();
}; //+onPageTransitionEnd.ts
import type { OnPageTransitionEndAsync } from "vike/types";
import NProgress from "nprogress"
export const onPageTransitionEnd: OnPageTransitionEndAsync = async () => {
console.log("Page transition end");
NProgress.done();
NProgress.remove();
}; |
Beta Was this translation helpful? Give feedback.
-
Managed to do it. Repo: https://github.com/Blankeos/hono-trpc Example above uses:
vike-ssr-solid-nprogress.mp4I'll let you close this one. Let me know if you want examples of this added onto the docs or smth. (out of topic on |
Beta Was this translation helpful? Give feedback.
Hi @Blankeos,
First, you need to install nprogress. Run
npm install nprogress
orpnpm add nprogress
. Additionally, if you are using TypeScript, install the types withnpm install -D @types/nprogress
orpnpm add -D @types/nprogress
.Next, import the CSS by adding
import "nprogress/nprogress.css"
inside yourLayoutDefault.tsx
file.To show the top-bar loading when navigating between pages, use it with the
+onPageTransitionStart
and+onPageTransitionEnd
hooks.For example: