{"html":"

\n \n \n

\n\n

\n \n

\n\n

\n \n

","css":".loader {\n display: flex;\n justify-content: center;\n align-items: center;\n /* Add these properties to position the loader properly */\n position: relative;\n width: 90px;\n height: 103px;\n /* Adjust the height to accommodate the \"h4\" span */\n}\n\n.loader div {\n position: absolute;\n width: 50px;\n height: 31px;\n}\n\n.rot {\n transform: rotate(150deg);\n}\n\n.rot2 {\n transform: rotate(20deg);\n}\n\n.loader div:nth-of-type(2) {\n transform: rotate(60deg);\n}\n\n.loader div:nth-of-type(3) {\n transform: rotate(-60deg);\n}\n\n.loader div div {\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n.loader div div span {\n position: absolute;\n width: 4px;\n height: 0%;\n background: #053146;\n z-index: 999999;\n}\n\n.h1 {\n left: 0;\n animation: load1 3.2s ease infinite;\n}\n\n.h2 {\n right: 0;\n animation: load2 3.2s ease 0.4s infinite;\n}\n\n.h3 {\n right: 0;\n animation: load3 3.2s ease 0.8s infinite;\n}\n\n.h4 {\n top: 10px;\n left: 23px;\n animation: load4 3.2s ease 1s infinite;\n transform: rotate(90deg);\n}\n\n.h5 {\n bottom: 0;\n animation: load5 3.2s ease 1.2s infinite;\n}\n\n.h6 {\n left: 0;\n animation: load6 3.2s ease 1.3s infinite;\n}\n\n@keyframes load1 {\n 0% {\n bottom: 0;\n height: 0;\n }\n\n 6.944444444% {\n bottom: 0;\n height: 100%;\n }\n\n 50% {\n top: 0;\n height: 100%;\n }\n\n 59.944444433% {\n top: 0;\n height: 0;\n }\n /* 91.6666667%{top:0;height:0%;} */\n}\n\n@keyframes load2 {\n 0% {\n top: 0;\n height: 0;\n }\n\n 6.944444444% {\n top: 0;\n height: 100%;\n }\n\n 50% {\n bottom: 0;\n height: 100%;\n }\n\n 59.944444433% {\n bottom: 0;\n height: 0;\n }\n /* 91.6666667%{bottom:0;height:0%} */\n}\n\n@keyframes load3 {\n 0% {\n top: 0;\n height: 0;\n }\n\n 6.944444444% {\n top: 0;\n height: 100%;\n }\n\n 50% {\n bottom: 0;\n height: 100%;\n }\n\n 59.94444443% {\n bottom: 0;\n height: 0;\n }\n /* 91.6666667%{bottom:0;height:0%;} */\n}\n\n@keyframes load4 {\n 0% {\n top: 37px;\n left: 23px;\n height: 134%;\n }\n\n 6.944444444% {\n top: 10px;\n height: 134%;\n }\n\n 50% {\n bottom: 10px;\n height: 134%;\n }\n\n 59.94444443% {\n bottom: 0;\n height: 0;\n }\n /* 91.6666667%{bottom:0;height:0%;} */\n}\n\n@keyframes load5 {\n 0% {\n bottom: 0;\n height: 0;\n }\n\n 6.944444444% {\n bottom: 0;\n height: 100%;\n }\n\n 50% {\n top: 0;\n height: 100%;\n }\n\n 59.94444443% {\n top: 0;\n height: 0;\n }\n /* 91.6666667%{top:0;height:0%;} */\n}\n\n@keyframes load6 {\n 0% {\n bottom: 0;\n height: 0;\n }\n\n 6.944444444% {\n bottom: 0;\n height: 100%;\n }\n\n 50% {\n top: 0;\n height: 100%;\n }\n\n 59.94444443% {\n top: 0;\n height: 0;\n }\n /* 91.6666667%{top:0;height:0%;} */\n}"}

rude-panther-60

👁 实时预览

📝 源代码