Added loader bar

Author: Nalin-Angrish

package-lock.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "axios": "^0.21.1",
     "next": "11.0.1",
+    "nprogress": "^0.2.0",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   }

package.json

@@ -1,6 +1,6 @@
 import React from "react"
 import Head from "next/head"
-import {useRouter} from "next/router"
+import Router, {useRouter} from "next/router"
 import Navbar from "../components/Navbar"
 import Footer from "../components/Footer"
 
@@ -11,6 +11,21 @@ import '../styles/Navbar.css'
 import '../styles/Footer.css'
 import '../styles/contact.css'
 import '../styles/globals.css'
+import '../styles/nprogress.css'
+
+
+import NProgress from 'nprogress';
+
+NProgress.configure({ easing: 'ease', speed: 1000 });
+Router.onRouteChangeStart = () => {
+  NProgress.start();
+};
+Router.onRouteChangeComplete = () => {
+  NProgress.done();
+};
+Router.onRouteChangeError = () => {
+  NProgress.done();
+};
 
 
 let excludes = ["/app/run"]

pages/_app.js

@@ -0,0 +1,82 @@
+/* Make clicks pass-through */
+
+#nprogress {
+    pointer-events: none;
+}
+
+#nprogress .bar {
+    background: #fc7;
+    position: fixed;
+    z-index: 1031;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 5px;
+}
+
+
+/* Fancy blur effect */
+
+#nprogress .peg {
+    display: block;
+    position: absolute;
+    right: 0px;
+    width: 100px;
+    height: 100%;
+    box-shadow: 0 0 10px #fc7, 0 0 5px #fc7;
+    opacity: 1.0;
+    -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: #fc7;
+    border-left-color: #fc7;
+    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);
+    }
+}