React实现加载效果（用css）

直接上代码，其实我也是学习的别人的，基本没咋改，我就记记，原文章链接为：

css实现叶子形状loading效果

代码结构：

 

// App.js
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <div id="loading">
        <div className="color1"></div>
        <div className="color1"></div>
        <div className="color1"></div>
        <div className="color1"></div>
        <div className="color1"></div>
        <div className="color2"></div>
        <div className="color2"></div>
        <div className="color2"></div>
        <div className="color2"></div>
        <div className="color2"></div>
      </div>
    </div>
  );
}

// index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

// style.css
.App {
  font-family: sans-serif;
  text-align: center;
}
body {
  background-color: #000;
}
.color1 {
  background: #fde515;
}
.color2 {
  background: #00def2;
}

@-webkit-keyframes loadRotate {
  from {
    -webkit-transform: rotateZ(0deg);
  }
  to {
    -webkit-transform: rotateZ(360deg);
  }
}
@keyframes loadRotate {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}
#loading {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
  animation: loadRotate 2s linear infinite;
  animation-fill-mode: both;
}
#loading div {
  width: 20px;
  height: 30px;
  position: absolute;
  left: 40px;
  top: 35px;
  transform: rotateZ(0) translateX(60px);
  opacity: 1;
  border-radius: 50% 0;
}
#loading div:nth-child(2) {
  transform: rotateZ(36deg) translateX(60px);
  opacity: 0.8;
}
#loading div:nth-child(3) {
  transform: rotateZ(72deg) translateX(60px);
  opacity: 0.6;
}
#loading div:nth-child(4) {
  transform: rotateZ(108deg) translateX(60px);
  opacity: 0.4;
}
#loading div:nth-child(5) {
  transform: rotateZ(144deg) translateX(60px);
  opacity: 0.2;
}

#loading div:nth-child(6) {
  transform: rotateZ(180deg) translateX(60px);
  opacity: 1;
}
#loading div:nth-child(7) {
  transform: rotateZ(216deg) translateX(60px);
  opacity: 0.8;
}
#loading div:nth-child(8) {
  transform: rotateZ(252deg) translateX(60px);
  opacity: 0.6;
}
#loading div:nth-child(9) {
  transform: rotateZ(288deg) translateX(60px);
  opacity: 0.4;
}
#loading div:nth-child(10) {
  transform: rotateZ(324deg) translateX(60px);
  opacity: 0.2;
}