我如何使preLoader大小，以填充屏幕的反应，使用反应-旋转？

Question

我在我的react页面中创建了一个预加载器，它正在工作，但是它不是显示在全屏上，而是显示在左上角，而不能正确地看到它。

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;

Answer 1

问题是你的尺寸。我在这里做了一些测试

测试1 测试2

将大小更改为: 10加载程序将自动显示在屏幕中心。

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


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

见docs 这里。