{"html":"

\n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n\n \n\n \n Loading...\n \n\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n

\n","css":".main-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n.loader {\n width: 100%;\n height: 100%;\n}\n\n#browser {\n overflow: hidden;\n}\n\n.grid-line {\n stroke: #222;\n stroke-width: 0.5;\n}\n\n.browser-frame {\n fill: #111;\n stroke: #666;\n stroke-width: 1;\n filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.9));\n}\n\n.browser-top {\n fill: #1a1a1a;\n}\n\n.loading-text {\n font-family: Haettenschweiler, sans-serif;\n font-size: 14px;\n fill: #e4e4e4;\n}\n\n.skeleton {\n fill: #2d2d2d;\n rx: 4;\n ry: 4;\n animation: pulse 1.8s ease-in-out infinite;\n filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.02));\n}\n\n@keyframes pulse {\n 0% {\n fill: #2d2d2d;\n }\n 50% {\n fill: #505050;\n }\n 100% {\n fill: #2d2d2d;\n }\n}\n\n.trace-flow {\n stroke-width: 1;\n fill: none;\n stroke-dasharray: 120 600;\n stroke-dashoffset: 720;\n animation: flow 5s linear infinite;\n opacity: 0.95;\n stroke-linejoin: round;\n filter: drop-shadow(0 0 8px currentColor) blur(0.5px);\n color: #00ccff;\n}\n.trace-flow:nth-child(1) {\n stroke: url(#traceGradient1);\n}\n.trace-flow:nth-child(2) {\n stroke: url(#traceGradient2);\n}\n.trace-flow:nth-child(3) {\n stroke: url(#traceGradient3);\n}\n.trace-flow:nth-child(4) {\n stroke: url(#traceGradient4);\n}\n\n@keyframes flow {\n from {\n stroke-dashoffset: 720;\n }\n to {\n stroke-dashoffset: 0;\n }\n}\n"}

jolly-sheep-54

👁 实时预览

📝 源代码