diff --git a/frontend_nuxt/assets/global.css b/frontend_nuxt/assets/global.css index af5513209..668654b83 100644 --- a/frontend_nuxt/assets/global.css +++ b/frontend_nuxt/assets/global.css @@ -273,4 +273,34 @@ body { position: relative; min-width: 0; } +} + +/* NProgress styles */ +#nprogress { + pointer-events: none; +} + +#nprogress .bar { + background: var(--primary-color); + position: fixed; + z-index: 1031; + top: 0; + left: 0; + width: 100%; + height: 3px; +} + +#nprogress .peg { + display: block; + position: absolute; + right: 0; + width: 100px; + height: 100%; + box-shadow: 0 0 10px var(--primary-color), 0 0 5px var(--primary-color); + opacity: 1; + transform: rotate(3deg) translate(0px, -4px); +} + +#nprogress .spinner { + display: none; } \ No newline at end of file diff --git a/frontend_nuxt/package-lock.json b/frontend_nuxt/package-lock.json index e65f0126e..0262f98eb 100644 --- a/frontend_nuxt/package-lock.json +++ b/frontend_nuxt/package-lock.json @@ -11,6 +11,7 @@ "highlight.js": "^11.11.1", "ldrs": "^1.0.0", "markdown-it": "^14.1.0", + "nprogress": "^0.2.0", "nuxt": "latest", "vditor": "^3.11.1", "vue-easy-lightbox": "^1.19.0", @@ -6415,6 +6416,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/nprogress": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz", + "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==", + "license": "MIT" + }, "node_modules/nth-check": { "version": "2.1.1", "license": "BSD-2-Clause", diff --git a/frontend_nuxt/package.json b/frontend_nuxt/package.json index 193879b9c..ee734e167 100644 --- a/frontend_nuxt/package.json +++ b/frontend_nuxt/package.json @@ -15,6 +15,7 @@ "ldrs": "^1.0.0", "markdown-it": "^14.1.0", "nuxt": "latest", + "nprogress": "^0.2.0", "vditor": "^3.11.1", "vue-easy-lightbox": "^1.19.0", "vue-echarts": "^7.0.3", diff --git a/frontend_nuxt/plugins/nprogress.client.ts b/frontend_nuxt/plugins/nprogress.client.ts new file mode 100644 index 000000000..cecdf6e5f --- /dev/null +++ b/frontend_nuxt/plugins/nprogress.client.ts @@ -0,0 +1,18 @@ +import NProgress from 'nprogress' +import 'nprogress/nprogress.css' + +export default defineNuxtPlugin((nuxtApp) => { + NProgress.configure({ showSpinner: false }) + + nuxtApp.hook('page:start', () => { + NProgress.start() + }) + + nuxtApp.hook('page:finish', () => { + NProgress.done() + }) + + nuxtApp.hook('page:error', () => { + NProgress.done() + }) +})