{"html":"

\n \n \n \n \n \n \n \n \n \n

","css":".loader {\n --icon-count: 3;\n --inner-height: 4em;\n --ratio: 2/3;\n /* Customizable */\n --period: 1s;\n /* Customizable */\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--inner-height);\n width: calc(var(--inner-height) * var(--ratio) * var(--icon-count));\n}\n\n.loader .icon {\n width: calc(100% / var(--icon-count));\n height: calc(100% * var(--ratio));\n animation: loader-bounce02 var(--period) infinite linear;\n}\n\n/*\n * animation delay = (n - 1) / steps * period\n */\n\n.loader .icon:nth-of-type(2) {\n animation-delay: calc(1 / 5 * var(--period));\n}\n\n.loader .icon:nth-of-type(3) {\n animation-delay: calc(2 / 5 * var(--period));\n}\n\n@keyframes loader-bounce02 {\n 20% {\n /* Raise */\n transform: translateY(calc(-50% * (1 - var(--ratio))));\n }\n\n 40% {\n /* Lower */\n transform: translateY(calc(50% * (1 - var(--ratio))));\n }\n\n 60% {\n /* Keep centered */\n transform: translateY(0);\n }\n\n 80% {\n /* Keep centered */\n transform: translateY(0);\n }\n}"}

cuddly-falcon-18

👁 实时预览

📝 源代码