Loader

作者：lukepadiachy♥ 0 点赞MIT
实时预览

源代码

export default function Component() {
  return (
    <div className="my-loader">
  <div className="rubiks-cube">
    <div className="face front">
      <div style={{ background: "#ff3d00" }} className="cube"></div>
      <div style={{ background: "#ffeb3b" }} className="cube"></div>
      <div style={{ background: "#4caf50" }} className="cube"></div>
      <div style={{ background: "#2196f3" }} className="cube"></div>
      <div style={{ background: "#ffffff" }} className="cube"></div>
      <div style={{ background: "#ffeb3b" }} className="cube"></div>
      <div style={{ background: "#4caf50" }} className="cube"></div>
      <div style={{ background: "#2196f3" }} className="cube"></div>
      <div style={{ background: "#ff3d00" }} className="cube"></div>
    </div>

    <div className="face back">
      <div style={{ background: "#4caf50" }} className="cube"></div>
      <div style={{ background: "#ff3d00" }} className="cube"></div>
      <div style={{ background: "#ffeb3b" }} className="cube"></div>
      <div style={{ background: "#2196f3" }} className="cube"></div>
      <div style={{ background: "#ffffff" }} className="cube"></div>
      <div style={{ background: "#ff3d00" }} className="cube"></div>
      <div style={{ background: "#ffeb3b" }} className="cube"></div>
      <div style={{ background: "#4caf50" }} className="cube"></div>
      <div style={{ background: "#2196f3" }} className="cube"></div>
    </div>
    <div className="face left">
      <div style={{ background: "#ffeb3b" }} className="cube"></div>
      <div style={{ background: "#4caf50" }} className="cube"></div>
      <div style={{ background: "#2196f3" }} className="cube"></div>
      <div style={{ background: "#ff3d00" }} className="cube"></div>
      <div style={{ background: "#ffffff" }} className="cube"></div>
      <div style={{ background: "#4caf50" }} className="cube"></div>
      <div style={{ background: "#2196f3" }} className="cube"></div>
      <div style={{ background: "#ffeb3b" }} className="cube"></div>
      <div style={{ background: "#ff3d00" }} className="cube"></div>
    </div>
    <div className="face right">
      <div style={{ background: "#4caf50" }} className="cube"></div>
      <div style={{ background: "#ff3d00" }} className="cube"></div>
      <div style={{ background: "#ffeb3b" }} className="cube"></div>
      <div style={{ background: "#2196f3" }} className="cube"></div>
      <div style={{ background: "#ffffff" }} className="cube"></div>
      <div style={{ background: "#ff3d00" }} className="cube"></div>
      <div style={{ background: "#ffeb3b" }} className="cube"></div>
      <div style={{ background: "#4caf50" }} className="cube"></div>
      <div style={{ background: "#2196f3" }} className="cube"></div>
    </div>
    <div className="face top">
      <div style={{ background: "#2196f3" }} className="cube"></div>
      <div style={{ background: "#ffeb3b" }} className="cube"></div>
      <div style={{ background: "#ff3d00" }} className="cube"></div>
      <div style={{ background: "#4caf50" }} className="cube"></div>
      <div style={{ background: "#ffffff" }} className="cube"></div>
      <div style={{ background: "#ffeb3b" }} className="cube"></div>
      <div style={{ background: "#ff3d00" }} className="cube"></div>
      <div style={{ background: "#4caf50" }} className="cube"></div>
      <div style={{ background: "#2196f3" }} className="cube"></div>
    </div>
    <div className="face bottom">
      <div style={{ background: "#ffffff" }} className="cube"></div>
      <div style={{ background: "#4caf50" }} className="cube"></div>
      <div style={{ background: "#2196f3" }} className="cube"></div>
      <div style={{ background: "#ff3d00" }} className="cube"></div>
      <div style={{ background: "#ffeb3b" }} className="cube"></div>
      <div style={{ background: "#4caf50" }} className="cube"></div>
      <div style={{ background: "#2196f3" }} className="cube"></div>
      <div style={{ background: "#ffffff" }} className="cube"></div>
      <div style={{ background: "#ff3d00" }} className="cube"></div>
    </div>
  </div>
</div>
  );
}
← 返回组件列表