{"html":"

\n Loading...\n

\n\n

\n","css":".liquid-loader {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 5px;\n padding: 20px;\n font-family: system-ui, sans-serif;\n}\n\n.loader-track {\n position: relative;\n width: 180px;\n height: 32px;\n background: linear-gradient(135deg, #2a2a2a, #1a1a1a);\n border-radius: 16px;\n overflow: hidden;\n box-shadow:\n inset 0 2px 4px rgba(0, 0, 0, 0.6),\n 0 1px 3px rgba(255, 255, 255, 0.1);\n}\n\n.liquid-fill {\n position: absolute;\n top: 2px;\n left: 2px;\n height: calc(100% - 4px);\n background: linear-gradient(90deg, #4f46e5, #7c3aed, #ec4899, #f59e0b);\n border-radius: 14px;\n animation:\n fillProgress 4s ease-out infinite,\n colorShift 3s linear infinite;\n box-shadow:\n 0 0 12px rgba(124, 58, 237, 0.4),\n inset 0 1px 2px rgba(255, 255, 255, 0.2);\n}\n\n.loading-text {\n color: white;\n font-size: 18px;\n font-weight: 600;\n letter-spacing: 1px;\n animation: textGlow 1s ease-in-out infinite;\n}\n\n.dot {\n margin-left: 3px;\n animation: blink 1.5s infinite;\n}\n.dot:nth-of-type(1) {\n animation-delay: 0s;\n}\n.dot:nth-of-type(2) {\n animation-delay: 0.3s;\n}\n.dot:nth-of-type(3) {\n animation-delay: 0.6s;\n}\n\n@keyframes fillProgress {\n 0% {\n width: 4px;\n }\n 25% {\n width: 25%;\n }\n 50% {\n width: 50%;\n }\n 75% {\n width: 75%;\n }\n 100% {\n width: calc(100% - 4px);\n }\n}\n\n@keyframes colorShift {\n 0% {\n filter: hue-rotate(0deg) brightness(1);\n }\n 33% {\n filter: hue-rotate(120deg) brightness(1.1);\n }\n 66% {\n filter: hue-rotate(240deg) brightness(0.9);\n }\n 100% {\n filter: hue-rotate(360deg) brightness(1);\n }\n}\n\n@keyframes textGlow {\n 0%,\n 100% {\n opacity: 0.7;\n text-shadow: 0 0 8px rgba(139, 92, 246, 0.3);\n }\n 50% {\n opacity: 1;\n text-shadow: 0 0 16px rgba(139, 92, 246, 0.6);\n }\n}\n\n@keyframes blink {\n 0%,\n 50% {\n opacity: 1;\n }\n 51%,\n 100% {\n opacity: 0;\n }\n}\n"}

warm-emu-89

👁 实时预览

📝 源代码