{"html":"

\n \n

","css":".container {\n overflow: hidden;\n}\n\n.container svg {\n --spin-duration: 2000ms;\n --infinity-duration: 2000ms;\n --hsl-base-h: 5deg;\n --hsl-base-s: 70%;\n --hsl-base-l: 50%;\n animation: spin81213 var(--spin-duration) linear infinite;\n}\n\n.eight {\n --eight-length-px: 60.84563446044922px;\n /* As seen on getTotalLength */\n --offset: calc(var(--order) * 5px);\n animation: infinity8123 var(--infinity-duration) linear infinite;\n d: path(\"m5 5a1 1 0 0110 0c0 4-10 6-10 10a1 1 0 0010 0c0-4-10-6-10-10\");\n fill: none;\n stroke: hsl(calc(var(--hsl-base-h) * var(--order)) var(--hsl-base-s) var(--hsl-base-l));\n stroke-dasharray: 6px calc(var(--eight-length-px) - 6px);\n stroke-linecap: round;\n stroke-width: calc(1 - var(--order) / 10);\n}\n\n@keyframes infinity8123 {\n 0% {\n stroke-dashoffset: calc(var(--eight-length-px) + var(--offset));\n }\n\n 100% {\n stroke-dashoffset: var(--offset);\n }\n}\n\n@keyframes spin81213 {\n 0% {\n transform: rotate(0)\n }\n\n 100% {\n transform: rotate(360deg)\n }\n}"}

weak-panther-69

👁 实时预览

📝 源代码