{"html":"

\n","css":".loader-wrapper {\n position: relative;\n width: 100%;\n height: 200px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.circle-loader {\n display: flex;\n gap: 15px;\n}\n\n.circle {\n width: 45px;\n height: 45px;\n border-radius: 50%;\n background: radial-gradient(circle at 30% 30%, #f5f5f5, #d5d5d5);\n position: relative;\n box-shadow:\n 6px 6px 12px rgba(0, 0, 0, 0.15),\n -6px -6px 12px rgba(255, 255, 255, 0.8),\n inset 2px 2px 4px rgba(0, 0, 0, 0.1),\n inset -2px -2px 4px rgba(255, 255, 255, 0.9);\n animation: circleRotate 2s ease-in-out infinite;\n}\n\n.circle:nth-child(1) {\n animation-delay: 0s;\n}\n\n.circle:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.circle:nth-child(3) {\n animation-delay: 0.3s;\n}\n\n.circle:nth-child(4) {\n animation-delay: 0.4s;\n}\n\n.circle:nth-child(5) {\n animation-delay: 0.5s;\n}\n\n.circle:nth-child(6) {\n animation-delay: 0.6s;\n}\n\n.circle:nth-child(7) {\n animation-delay: 0.7s;\n}\n\n.circle::before {\n content: \"\";\n position: absolute;\n top: 8px;\n left: 8px;\n width: 15px;\n height: 15px;\n background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent);\n border-radius: 50%;\n}\n\n@keyframes circleRotate {\n 0% {\n transform: scale(1) rotateZ(0deg);\n box-shadow:\n 6px 6px 12px rgba(0, 0, 0, 0.15),\n -6px -6px 12px rgba(255, 255, 255, 0.8),\n inset 2px 2px 4px rgba(0, 0, 0, 0.1),\n inset -2px -2px 4px rgba(255, 255, 255, 0.9);\n }\n\n 50% {\n transform: scale(1.2) rotateZ(180deg);\n box-shadow:\n 8px 8px 16px rgba(0, 0, 0, 0.2),\n -8px -8px 16px rgba(255, 255, 255, 0.9),\n inset 3px 3px 6px rgba(0, 0, 0, 0.15),\n inset -3px -3px 6px rgba(255, 255, 255, 1);\n }\n\n 100% {\n transform: scale(1) rotateZ(360deg);\n box-shadow:\n 6px 6px 12px rgba(0, 0, 0, 0.15),\n -6px -6px 12px rgba(255, 255, 255, 0.8),\n inset 2px 2px 4px rgba(0, 0, 0, 0.1),\n inset -2px -2px 4px rgba(255, 255, 255, 0.9);\n }\n}\n\n.loading-text {\n position: absolute;\n bottom: 30px;\n left: 50%;\n transform: translateX(-50%);\n font-size: 24px;\n font-weight: 300;\n color: #444;\n letter-spacing: 1px;\n animation: fadeBlink 1.5s infinite;\n}\n\n@keyframes fadeBlink {\n 0%,\n 100% {\n opacity: 1;\n transform: translateX(-50%) translateY(0);\n }\n\n 50% {\n opacity: 0.4;\n transform: translateX(-50%) translateY(-3px);\n }\n}\n"}

helpless-fly-70

👁 实时预览

📝 源代码