{"html":"\n

","css":".loadingspinner {\n --square: 26px;\n --offset: 30px;\n --duration: 2.4s;\n --delay: 0.2s;\n --timing-function: ease-in-out;\n --in-duration: 0.4s;\n --in-delay: 0.1s;\n --in-timing-function: ease-out;\n width: calc( 3 * var(--offset) + var(--square));\n height: calc( 2 * var(--offset) + var(--square));\n padding: 0px;\n margin-left: auto;\n margin-right: auto;\n margin-top: 10px;\n margin-bottom: 30px;\n position: relative;\n}\n\n.loadingspinner div {\n display: inline-block;\n background: darkorange;\n /*background: var(--text-color);*/\n /*box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);*/\n border: none;\n border-radius: 2px;\n width: var(--square);\n height: var(--square);\n position: absolute;\n padding: 0px;\n margin: 0px;\n font-size: 6pt;\n color: black;\n}\n\n.loadingspinner #square1 {\n left: calc( 0 * var(--offset) );\n top: calc( 0 * var(--offset) );\n animation: square1 var(--duration) var(--delay) var(--timing-function) infinite,\n squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;\n}\n\n.loadingspinner #square2 {\n left: calc( 0 * var(--offset) );\n top: calc( 1 * var(--offset) );\n animation: square2 var(--duration) var(--delay) var(--timing-function) infinite,\n squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;\n}\n\n.loadingspinner #square3 {\n left: calc( 1 * var(--offset) );\n top: calc( 1 * var(--offset) );\n animation: square3 var(--duration) var(--delay) var(--timing-function) infinite,\n squarefadein var(--in-duration) calc(2 * var(--in-delay)) var(--in-timing-function) both;\n}\n\n.loadingspinner #square4 {\n left: calc( 2 * var(--offset) );\n top: calc( 1 * var(--offset) );\n animation: square4 var(--duration) var(--delay) var(--timing-function) infinite,\n squarefadein var(--in-duration) calc(3 * var(--in-delay)) var(--in-timing-function) both;\n}\n\n.loadingspinner #square5 {\n left: calc( 3 * var(--offset) );\n top: calc( 1 * var(--offset) );\n animation: square5 var(--duration) var(--delay) var(--timing-function) infinite,\n squarefadein var(--in-duration) calc(4 * var(--in-delay)) var(--in-timing-function) both;\n}\n\n@keyframes square1 {\n 0% {\n left: calc( 0 * var(--offset) );\n top: calc( 0 * var(--offset) );\n }\n\n 8.333% {\n left: calc( 0 * var(--offset) );\n top: calc( 1 * var(--offset) );\n }\n\n 100% {\n left: calc( 0 * var(--offset) );\n top: calc( 1 * var(--offset) );\n }\n}\n\n@keyframes square2 {\n 0% {\n left: calc( 0 * var(--offset) );\n top: calc( 1 * var(--offset) );\n }\n\n 8.333% {\n left: calc( 0 * var(--offset) );\n top: calc( 2 * var(--offset) );\n }\n\n 16.67% {\n left: calc( 1 * var(--offset) );\n top: calc( 2 * var(--offset) );\n }\n\n 25.00% {\n left: calc( 1 * var(--offset) );\n top: calc( 1 * var(--offset) );\n }\n\n 83.33% {\n left: calc( 1 * var(--offset) );\n top: calc( 1 * var(--offset) );\n }\n\n 91.67% {\n left: calc( 1 * var(--offset) );\n top: calc( 0 * var(--offset) );\n }\n\n 100% {\n left: calc( 0 * var(--offset) );\n top: calc( 0 * var(--offset) );\n }\n}\n\n@keyframes square3 {\n 0%,100% {\n left: calc( 1 * var(--offset) );\n top: calc( 1 * var(--offset) );\n }\n\n 16.67% {\n left: calc( 1 * var(--offset) );\n top: calc( 1 * var(--offset) );\n }\n\n 25.00% {\n left: calc( 1 * var(--offset) );\n top: calc( 0 * var(--offset) );\n }\n\n 33.33% {\n left: calc( 2 * var(--offset) );\n top: calc( 0 * var(--offset) );\n }\n\n 41.67% {\n left: calc( 2 * var(--offset) );\n top: calc( 1 * var(--offset) );\n }\n\n 66.67% {\n left: calc( 2 * var(--offset) );\n top: calc( 1 * var(--offset) );\n }\n\n 75.00% {\n left: calc( 2 * var(--offset) );\n top: calc( 2 * var(--offset) );\n }\n\n 83.33% {\n left: calc( 1 * var(--offset) );\n top: calc( 2 * var(--offset) );\n }\n\n 91.67% {\n left: calc( 1 * var(--offset) );\n top: calc( 1 * var(--offset) );\n }\n}\n\n@keyframes square4 {\n 0% {\n left: calc( 2 * var(--offset) );\n top: calc( 1 * var(--offset) );\n }\n\n 33.33% {\n left: calc( 2 * var(--offset) );\n top: calc( 1 * var(--offset) );\n }\n\n 41.67% {\n left: calc( 2 * var(--offset) );\n top: calc( 2 * var(--offset) );\n }\n\n 50.00% {\n left: calc( 3 * var(--offset) );\n top: calc( 2 * var(--offset) );\n }\n\n 58.33% {\n left: calc( 3 * var(--offset) );\n top: calc( 1 * var(--offset) );\n }\n\n 100% {\n left: calc( 3 * var(--offset) );\n top: calc( 1 * var(--offset) );\n }\n}\n\n@keyframes square5 {\n 0% {\n left: calc( 3 * var(--offset) );\n top: calc( 1 * var(--offset) );\n }\n\n 50.00% {\n left: calc( 3 * var(--offset) );\n top: calc( 1 * var(--offset) );\n }\n\n 58.33% {\n left: calc( 3 * var(--offset) );\n top: calc( 0 * var(--offset) );\n }\n\n 66.67% {\n left: calc( 2 * var(--offset) );\n top: calc( 0 * var(--offset) );\n }\n\n 75.00% {\n left: calc( 2 * var(--offset) );\n top: calc( 1 * var(--offset) );\n }\n\n 100% {\n left: calc( 2 * var(--offset) );\n top: calc( 1 * var(--offset) );\n }\n}\n\n@keyframes squarefadein {\n 0% {\n transform: scale(0.75);\n opacity: 0.0;\n }\n\n 100% {\n transform: scale(1.0);\n opacity: 1.0;\n }\n}"}

slimy-tiger-93

👁 实时预览

📝 源代码