npm i react-global-loader

import { LoaderContainer } from "react-global-loader";

export default function App() {
  return (
    <div>
      <LoaderContainer />
    </div>
  );
}

import { LoaderContainer, DefaultSpinner } from "react-global-loader";

export default function App() {
  return (
    <div>
      <LoaderContainer>
        <DefaultSpinner />
      </LoaderContainer>
    </div>
  );
}

import { LoaderContainer } from "react-global-loader";
import FidgetLoader from "./loader.gif";

export default function App() {
  return (
    <div>
      <LoaderContainer>
        <img src={FidgetLoader} alt="loading" />
      </LoaderContainer>
    </div>
  );
}

import { loader } from "react-global-loader";

export default function PageName() {
  const showLoader = () => {
    loader.show();
  };

  const hideLoader = () => {
    loader.hide();
  };

  useEffect(() => {
    showLoader();

    setTimeout(() => {
      hideLoader();
    }, 3000);
  });

  return <div>Page 1</div>;
}

import { LoaderContainer, loader } from "react-global-loader";

export default function App() {
  const showLoader = () => {
    loader.show();
  };

  const hideLoader = () => {
    loader.hide();
  };

  useEffect(() => {
    showLoader();

    setTimeout(() => {
      hideLoader();
    }, 3000);
  });

  const Arrow = () => (
    <div
      style={{
        width: 0,
        height: 0,
        borderTop: "10px solid transparent",
        borderRight: "20px solid red",
        borderBottom: "10px solid transparent",
      }}
    ></div>
  );

  return (
    <div>
      <LoaderContainer opacity={0.5} backgroundColor="#ccc">
        <div style={{ display: "inline-flex" }}>
          <Arrow />
          <div style={{ marginLeft: "10px" }}> Custom Loader</div>
        </div>
      </LoaderContainer>
    </div>
  );
}

import { Audio } from "react-loader-spinner";
import { LoaderContainer, loader } from "react-global-loader";

export default function App() {
  useEffect(() => {
    loader.show();
    setTimeout(() => {
      loader.hide();
    }, 5000);
  });
  return (
    <LoaderContainer>
      <Audio
        height="100"
        width="100"
        color="#4fa94d"
        ariaLabel="audio-loading"
        wrapperStyle={{}}
        wrapperClass="wrapper-class"
        visible={true}
      />
    </LoaderContainer>
  );
}