{"html":"

\n","css":".loader {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: scale(0.2);\n\n --from: 200px;\n --to: 40px;\n --size: 32px;\n --time: 6s;\n --count: 100;\n --turns: 6;\n}\n\n.circle {\n position: absolute;\n\n --delay: calc(var(--time) / var(--count) * -1 * var(--i));\n rotate: calc(var(--turns) * 1turn / var(--count) * var(--i));\n\n animation: circle var(--time) var(--delay) ease-in-out infinite;\n}\n.circle::before {\n content: \"\";\n display: block;\n width: var(--size);\n aspect-ratio: 1/1;\n border-radius: 50%;\n background-color: white;\n transform-origin: center center;\n\n animation: circleSize var(--time) var(--delay) ease-in-out infinite;\n}\n\n/* rainbow color using HSL */\n.rainbow .circle::before {\n background-color: hsl(\n calc(1turn / (var(--count) / var(--turns)) * var(--i)) 100% 70%\n );\n}\n\n/* animations */\n@keyframes circle {\n from {\n transform: translate(0, var(--from));\n }\n to {\n transform: translate(0, var(--to));\n }\n}\n@keyframes circleSize {\n 0%,\n 100% {\n transform: scale(0);\n }\n 25%,\n 50% {\n transform: scale(1);\n }\n}\n"}

wicked-badger-71

👁 实时预览

📝 源代码