{"html":"

\n \n

\n\n

\n \n

\n\n

\n \n

\n","css":".loader {\n --path: #2f3545;\n --dot: #5628ee;\n --duration: 3s;\n width: 44px;\n height: 44px;\n position: relative;\n}\n\n.loader:before {\n content: \"\";\n width: 6px;\n height: 6px;\n border-radius: 50%;\n position: absolute;\n display: block;\n background: var(--dot);\n top: 37px;\n left: 19px;\n transform: translate(-18px, -18px);\n animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)\n infinite;\n}\n\n.loader svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.loader svg rect,\n.loader svg polygon,\n.loader svg circle {\n fill: none;\n stroke: var(--path);\n stroke-width: 10px;\n stroke-linejoin: round;\n stroke-linecap: round;\n}\n\n.loader svg polygon {\n stroke-dasharray: 145 76 145 76;\n stroke-dashoffset: 0;\n animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)\n infinite;\n}\n\n.loader svg rect {\n stroke-dasharray: 192 64 192 64;\n stroke-dashoffset: 0;\n animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;\n}\n\n.loader svg circle {\n stroke-dasharray: 150 50 150 50;\n stroke-dashoffset: 75;\n animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)\n infinite;\n}\n\n.loader.triangle {\n width: 48px;\n}\n\n.loader.triangle:before {\n left: 21px;\n transform: translate(-10px, -18px);\n animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)\n infinite;\n}\n\n@keyframes pathTriangle {\n 33% {\n stroke-dashoffset: 74;\n }\n\n 66% {\n stroke-dashoffset: 147;\n }\n\n 100% {\n stroke-dashoffset: 221;\n }\n}\n\n@keyframes dotTriangle {\n 33% {\n transform: translate(0, 0);\n }\n\n 66% {\n transform: translate(10px, -18px);\n }\n\n 100% {\n transform: translate(-10px, -18px);\n }\n}\n\n@keyframes pathRect {\n 25% {\n stroke-dashoffset: 64;\n }\n\n 50% {\n stroke-dashoffset: 128;\n }\n\n 75% {\n stroke-dashoffset: 192;\n }\n\n 100% {\n stroke-dashoffset: 256;\n }\n}\n\n@keyframes dotRect {\n 25% {\n transform: translate(0, 0);\n }\n\n 50% {\n transform: translate(18px, -18px);\n }\n\n 75% {\n transform: translate(0, -36px);\n }\n\n 100% {\n transform: translate(-18px, -18px);\n }\n}\n\n@keyframes pathCircle {\n 25% {\n stroke-dashoffset: 125;\n }\n\n 50% {\n stroke-dashoffset: 175;\n }\n\n 75% {\n stroke-dashoffset: 225;\n }\n\n 100% {\n stroke-dashoffset: 275;\n }\n}\n\n.loader {\n display: inline-block;\n margin: 0 16px;\n}\n"}

proud-ladybug-46

👁 实时预览

📝 源代码

🔗 相关联的样式