{"html":"

\n \n \n \n

\n","css":"@keyframes loadingBar {\n 0% {\n width: 0%;\n animation-timing-function: ease-out;\n }\n 30% {\n width: 33%;\n animation-timing-function: ease-out;\n }\n 60% {\n width: 66%;\n animation-timing-function: ease-out;\n }\n 90% {\n width: 100%;\n animation-timing-function: ease-out;\n }\n 100% {\n width: 100%;\n animation-timing-function: ease-out;\n }\n}\n\n@keyframes checkScale1 {\n 0% {\n transform: scale(0.75);\n background-color: #535353;\n }\n 28% {\n transform: scale(0.75);\n background-color: #535353;\n }\n 29% {\n transform: scale(1);\n background-color: rgb(0, 205, 0);\n }\n 100% {\n transform: scale(1);\n background-color: rgb(0, 205, 0);\n }\n}\n\n@keyframes checkScale2 {\n 0% {\n transform: scale(0.75);\n background-color: #535353;\n }\n 58% {\n transform: scale(0.75);\n background-color: #535353;\n }\n 59% {\n transform: scale(1);\n background-color: rgb(0, 205, 0);\n }\n 100% {\n transform: scale(1);\n background-color: rgb(0, 205, 0);\n }\n}\n\n@keyframes checkScale3 {\n 0% {\n transform: scale(0.75);\n background-color: #535353;\n }\n 88% {\n transform: scale(0.75);\n background-color: #535353;\n }\n 89% {\n transform: scale(1);\n background-color: rgb(0, 205, 0);\n }\n 100% {\n transform: scale(1);\n background-color: rgb(0, 205, 0);\n }\n}\n\n.loader {\n position: relative;\n background-color: #535353;\n border-radius: 1em;\n height: 1em;\n width: 330px;\n}\n\n.bar {\n position: relative;\n background-color: rgb(0, 205, 0);\n width: 40px;\n height: 100%;\n border-radius: 1em;\n animation: loadingBar 6s linear infinite;\n}\n\n.check-bar-container {\n position: absolute;\n left: 0px;\n top: -4px;\n z-index: 69;\n display: flex;\n width: 100%;\n justify-content: space-between;\n height: 0.5em;\n}\n\n.check {\n border-radius: 1em;\n height: 1.5em;\n width: 1.5em;\n padding: 3px;\n background-color: #535353;\n transform: scale(0.75);\n}\n\n.check-bar-container .check:nth-of-type(2) {\n animation: checkScale1 6s linear infinite;\n}\n.check-bar-container .check:nth-of-type(3) {\n animation: checkScale2 6s linear infinite;\n}\n.check-bar-container .check:nth-of-type(4) {\n animation: checkScale3 6s linear infinite;\n transform-origin: right;\n}\n"}

moody-squid-55

👁 实时预览

📝 源代码