mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-06-03 06:35:42 -05:00
closes #199
This commit is contained in:
Kalle (Sendou)
parent
0858454a88
commit
2e8e027ae7
11
package-lock.json
generated
11
package-lock.json
generated
|
|
@ -1859,6 +1859,12 @@
|
|||
"integrity": "sha512-BJ97wAUuU3NUiUCp44xzUFquQEvnk1wu7q4CMEUYKJWjdkr0YWYDsm4RFtAvxYsNjLsKcrFt6RvK8r+mnzMbEQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/nprogress": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/nprogress/-/nprogress-0.2.0.tgz",
|
||||
"integrity": "sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/object-assign": {
|
||||
"version": "4.0.30",
|
||||
"resolved": "https://registry.npmjs.org/@types/object-assign/-/object-assign-4.0.30.tgz",
|
||||
|
|
@ -7292,6 +7298,11 @@
|
|||
"set-blocking": "~2.0.0"
|
||||
}
|
||||
},
|
||||
"nprogress": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
|
||||
"integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E="
|
||||
},
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
"next-auth": "^3.1.0",
|
||||
"next-google-fonts": "^1.2.1",
|
||||
"next-images": "^1.6.2",
|
||||
"nprogress": "^0.2.0",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-draggable": "^4.4.3",
|
||||
|
|
@ -58,6 +59,7 @@
|
|||
"@prisma/cli": "^2.12.1",
|
||||
"@types/next-auth": "^3.1.18",
|
||||
"@types/node": "^14.14.11",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@types/react": "^17.0.0",
|
||||
"@types/react-infinite-scroller": "^1.2.1",
|
||||
"@types/recharts": "^1.8.17",
|
||||
|
|
|
|||
|
|
@ -8,10 +8,22 @@ import { locales } from "lib/lists/locales";
|
|||
import { Provider as NextAuthProvider } from "next-auth/client";
|
||||
import GoogleFonts from "next-google-fonts";
|
||||
import type { AppProps } from "next/app";
|
||||
import Head from "next/head";
|
||||
import { Router } from "next/router";
|
||||
import NProgress from "nprogress";
|
||||
import { useEffect } from "react";
|
||||
import { theme } from "theme";
|
||||
import "./styles.css";
|
||||
|
||||
NProgress.configure({ showSpinner: false });
|
||||
|
||||
Router.events.on("routeChangeStart", (url) => {
|
||||
console.log(`Loading: ${url}`);
|
||||
NProgress.start();
|
||||
});
|
||||
Router.events.on("routeChangeComplete", () => NProgress.done());
|
||||
Router.events.on("routeChangeError", () => NProgress.done());
|
||||
|
||||
const extendedTheme = extendTheme({
|
||||
styles: {
|
||||
global: (props) => ({
|
||||
|
|
@ -126,6 +138,9 @@ const MyApp = (props: AppProps) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<link rel="stylesheet" type="text/css" href="/nprogress.css" />
|
||||
</Head>
|
||||
<GoogleFonts
|
||||
href={`https://fonts.googleapis.com/css2?family=Rubik&display=swap`}
|
||||
/>
|
||||
|
|
|
|||
81
public/nprogress.css
Normal file
81
public/nprogress.css
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
/* Make clicks pass-through */
|
||||
#nprogress {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
background: #79ff61;
|
||||
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
/* Fancy blur effect */
|
||||
#nprogress .peg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 10px #79ff61, 0 0 5px #79ff61;
|
||||
opacity: 1;
|
||||
|
||||
-webkit-transform: rotate(3deg) translate(0px, -4px);
|
||||
-ms-transform: rotate(3deg) translate(0px, -4px);
|
||||
transform: rotate(3deg) translate(0px, -4px);
|
||||
}
|
||||
|
||||
/* Remove these to get rid of the spinner */
|
||||
#nprogress .spinner {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
#nprogress .spinner-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
box-sizing: border-box;
|
||||
|
||||
border: solid 2px transparent;
|
||||
border-top-color: #79ff61;
|
||||
border-left-color: #79ff61;
|
||||
border-radius: 50%;
|
||||
|
||||
-webkit-animation: nprogress-spinner 400ms linear infinite;
|
||||
animation: nprogress-spinner 400ms linear infinite;
|
||||
}
|
||||
|
||||
.nprogress-custom-parent {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nprogress-custom-parent #nprogress .spinner,
|
||||
.nprogress-custom-parent #nprogress .bar {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@-webkit-keyframes nprogress-spinner {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes nprogress-spinner {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user