{"html":"

\n \n\n \n \n

\n","css":".loader {\n display: flex;\n align-items: center;\n justify-content: center;\n background: #141218;\n}\n\n.iconLoaderProgress {\n display: flex;\n align-items: center;\n justify-content: center;\n animation-duration: 2s;\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n animation-name: rotateLoader;\n}\n\n.iconLoaderProgress svg {\n stroke-width: 16px;\n fill: none;\n transform-origin: center;\n z-index: 999;\n}\n\n.iconLoaderProgressFirst circle,\n.iconLoaderProgressSecond circle,\n.iconLoaderProgressFirst,\n.iconLoaderProgressSecond {\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n}\n\n.iconLoaderProgressFirst circle,\n.iconLoaderProgressSecond circle {\n animation-duration: 3s;\n border-radius: 15px;\n}\n\n.iconLoaderProgressFirst,\n.iconLoaderProgressSecond {\n position: absolute;\n animation-duration: 6s;\n}\n\n.iconLoaderProgressFirst circle {\n animation-name: circleFirst;\n stroke-dasharray: 628, 628;\n stroke-dashoffset: 0;\n stroke: #7c57f4;\n stroke-linecap: round;\n}\n\n.iconLoaderProgressSecond {\n transform: rotate(-14deg);\n}\n\n.iconLoaderProgressSecond circle {\n animation-name: circleSecond;\n stroke-dasharray: 628, 628;\n stroke-dashoffset: 0;\n stroke: #bfb2f7;\n stroke-linecap: round;\n}\n\n@keyframes circleFirst {\n from,\n to {\n stroke-dashoffset: 50;\n }\n\n 50% {\n stroke-dashoffset: 625;\n }\n}\n\n@keyframes circleSecond {\n from,\n to {\n stroke-dashoffset: -625;\n }\n\n 50% {\n stroke-dashoffset: -50;\n }\n}\n\n@keyframes rotateLoader {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n"}

bad-snail-59

👁 实时预览

📝 源代码