✨ Add progress bar

src/assets/utils.css

@@ -12,3 +12,11 @@ body,
 .no-scrollbar::-webkit-scrollbar {
   width: 0;
 }
+
+html, body {
+  scroll-behavior: smooth;
+}
+
+#nprogress .bar {
+  background: #ffffff !important;
+}

src/main.ts

@@ -3,6 +3,8 @@ import "virtual:uno.css"
 import "./assets/utils.css"
 import "./assets/safe-area.css"
 
+import "nprogress/nprogress.css"
+
 import { createApp } from "vue"
 import { createPinia } from "pinia"
 
@@ -17,9 +19,16 @@ import "@mdi/font/css/materialdesignicons.min.css"
 import "@fontsource/roboto/latin.css"
 import "@unocss/reset/tailwind.css"
 
+import nprogress from "nprogress";
+
 import index from "./index.vue"
 import router from "./router"
 
+nprogress.configure({showSpinner: false})
+nprogress.start()
+
+window.onload = () => nprogress.done()
+
 const app = createApp(index)
 
 app.use(

src/router/index.ts

@@ -1,6 +1,8 @@
 import { createRouter, createWebHistory } from "vue-router"
 import MasterLayout from "@/layouts/master.vue"
 
+import nprogress from "nprogress";
+
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -71,4 +73,11 @@ const router = createRouter({
   ]
 })
 
+router.beforeEach((_to, _from, next) => {
+  nprogress.start()
+  next()
+})
+
+router.afterEach(() => nprogress.done())
+
 export default router