{"html":"

\n","css":".loader-display-zone {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n max-width: 280px;\n max-height: 280px;\n overflow: hidden;\n}\n\n.loader-grid-container {\n position: relative;\n width: 150px;\n height: 150px;\n transform-style: preserve-3d;\n perspective: 800px;\n}\n\n.loader-grid-layer {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(3, 1fr);\n gap: 8px;\n opacity: 0;\n animation: loader-grid-expand 4s infinite ease-out;\n}\n\n.loader-grid-cell {\n background-color: #fcd34d; /* Amber-300 */\n border-radius: 4px;\n box-shadow: 0 0 5px rgba(252, 211, 77, 0.5);\n}\n\n.loader-grid-layer-one {\n animation-delay: 0s;\n transform: rotateX(60deg) rotateZ(0deg);\n}\n\n.loader-grid-layer-two {\n animation-delay: 1s;\n transform: rotateX(60deg) rotateZ(90deg);\n opacity: 0.2;\n}\n\n.loader-grid-layer-three {\n animation-delay: 2s;\n transform: rotateX(60deg) rotateZ(180deg);\n opacity: 0.1;\n}\n\n.loader-central-indicator {\n position: absolute;\n width: 30px;\n height: 30px;\n background-color: #f97316; /* Orange-500 */\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 10;\n animation: loader-indicator-pulse 2s infinite ease-in-out;\n box-shadow: 0 0 15px rgba(249, 115, 22, 0.8);\n}\n\n@keyframes loader-grid-expand {\n 0% {\n transform: rotateX(60deg) scale(0.5);\n opacity: 0;\n }\n 20% {\n opacity: 1;\n }\n 80% {\n transform: rotateX(60deg) scale(1.5);\n opacity: 0;\n }\n 100% {\n transform: rotateX(60deg) scale(0.5);\n opacity: 0;\n }\n}\n\n@keyframes loader-indicator-pulse {\n 0%,\n 100% {\n transform: translate(-50%, -50%) scale(1);\n opacity: 1;\n }\n 50% {\n transform: translate(-50%, -50%) scale(1.2);\n opacity: 0.8;\n }\n}\n"}

proud-snake-90

👁 实时预览

📝 源代码