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>
);
}