I created a preloader in my react page using react-spinner and is working but it is not showing in full screen instead showing in the top left corner without being able to see it properly.

import React from "react";
import Header from "./components/Header";
import { Helmet } from "react-helmet";
import Sidebar from "./components/Sidebar";
import ClimbingBoxLoader from "react-spinners/ClimbingBoxLoader";
import { useState, useEffect } from "react";
import "./index.css";
const App = () => {
  const [load, setLoaded] = useState(false);
  useEffect(() => {
    setLoaded(true);
    setTimeout(() => {
      setLoaded(false);
    }, 8000);
  }, []);
  return (
    <div className="container">
      {load ? (
        <ClimbingBoxLoader size={150} color={"#123abc"} loading={load} />
      ) : (
        
        <div>
          <div className="indexing">
            <Header className="fixed" />
          </div>
          <div>
            <Sidebar></Sidebar>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;

CodePudding user response：

The problem is your size. I did some tests here and see :

Test 1 Test 2

Change size to something like : 10 The loader will be shown automatically on the center of screen.

import React from 'react';
import ClimbingBoxLoader from '@bit/davidhu2000.react-spinners.climbing-box-loader';


export default (
    <ClimbingBoxLoader size={10} color={"#123abc"} loading="true" />
)

See docs here.