globals.css

/* styles/globals.css */
.loading-indicator-container {
  --loading-width: 0.8;
  --still-loading-width: 0.9;
  --still-loading-duration: 10s;
  --done-duration: 0.4s;
  --fade-out-duration: 0.4s;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  height: 3px;
  width: 100%;
  opacity: 0;
  transition: opacity var(--fade-out-duration) ease var(--done-duration);
  background-color: var(--primary-low);
}

.loading-indicator {
  width: var(--loading-width)%;
  height: 100%;
  background-color: var(--primary-high);
  animation: loading var(--loading-duration) ease-in-out infinite;
}

@keyframes loading {
  0% {
    width: var(--loading-width)%;
  }
  50% {
    width: var(--still-loading-width)%;
  }
  100% {
    width: var(--loading-width)%;
  }
}

TopLoadingIndicator.jsx

// components/TopLoadingIndicator.js
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';

const TopLoadingIndicator = () => {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const handleStart = () => {
      setLoading(true);
    };
    const handleComplete = () => {
      setLoading(false);
    };

    router.events.on('routeChangeStart', handleStart);
    router.events.on('routeChangeComplete', handleComplete);
    router.events.on('routeChangeError', handleComplete);

    return () => {
      router.events.off('routeChangeStart', handleStart);
      router.events.off('routeChangeComplete', handleComplete);
      router.events.off('routeChangeError', handleComplete);
    };
  }, [router]);

  return (
    <div
      className="loading-indicator-container"
      style={{ opacity: loading ? 1 : 0 }}
    >
      <div className="loading-indicator"></div>
    </div>
  );
};

export default TopLoadingIndicator;