{"html":"\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n\n \n \n \n \n \n \n\n","css":".loader {\n --dur: 2s;\n display: block;\n margin: auto;\n width: 14em;\n height: auto;\n}\n.loader__glare-top,\n.loader__glare-bottom,\n.loader__model,\n.loader__motion-thick,\n.loader__motion-medium,\n.loader__motion-thin,\n.loader__sand-drop,\n.loader__sand-fill,\n.loader__sand-grain-left,\n.loader__sand-grain-right,\n.loader__sand-line-left,\n.loader__sand-line-right,\n.loader__sand-mound-top,\n.loader__sand-mound-bottom {\n animation-duration: var(--dur);\n animation-timing-function: cubic-bezier(0.83, 0, 0.17, 1);\n animation-iteration-count: infinite;\n}\n.loader__glare-top {\n animation-name: glare-top;\n}\n.loader__glare-bottom {\n animation-name: glare-bottom;\n}\n.loader__model {\n animation-name: loader-flip;\n transform-origin: 12.25px 16.75px;\n}\n.loader__motion-thick,\n.loader__motion-medium,\n.loader__motion-thin {\n transform-origin: 26px 26px;\n}\n.loader__motion-thick {\n animation-name: motion-thick;\n}\n.loader__motion-medium {\n animation-name: motion-medium;\n}\n.loader__motion-thin {\n animation-name: motion-thin;\n}\n.loader__sand-drop {\n animation-name: sand-drop;\n}\n.loader__sand-fill {\n animation-name: sand-fill;\n}\n.loader__sand-grain-left {\n animation-name: sand-grain-left;\n}\n.loader__sand-grain-right {\n animation-name: sand-grain-right;\n}\n.loader__sand-line-left {\n animation-name: sand-line-left;\n}\n.loader__sand-line-right {\n animation-name: sand-line-right;\n}\n.loader__sand-mound-top {\n animation-name: sand-mound-top;\n}\n.loader__sand-mound-bottom {\n animation-name: sand-mound-bottom;\n transform-origin: 12.25px 31.5px;\n}\n\n/* Dark theme */\n@media (prefers-color-scheme: dark) {\n :root {\n --bg: hsl(var(--hue), 90%, 10%);\n --fg: hsl(var(--hue), 90%, 90%);\n }\n}\n/* Animation */\n@keyframes loader-flip {\n from {\n transform: translate(13.75px, 9.25px) rotate(-180deg);\n }\n 24%,\n to {\n transform: translate(13.75px, 9.25px) rotate(0);\n }\n}\n@keyframes glare-top {\n from {\n stroke: rgba(255, 255, 255, 0);\n }\n 24%,\n to {\n stroke: white;\n }\n}\n@keyframes glare-bottom {\n from {\n stroke: white;\n }\n 24%,\n to {\n stroke: rgba(255, 255, 255, 0);\n }\n}\n@keyframes motion-thick {\n from {\n animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);\n stroke: rgba(255, 255, 255, 0);\n stroke-dashoffset: 153.94;\n transform: rotate(0.67turn);\n }\n 20% {\n animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);\n stroke: rgb(32, 32, 32);\n stroke-dashoffset: 141.11;\n transform: rotate(1turn);\n }\n 40%,\n to {\n stroke: rgba(255, 255, 255, 0);\n stroke-dashoffset: 153.94;\n transform: rotate(1.33turn);\n }\n}\n@keyframes motion-medium {\n from,\n 8% {\n animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);\n stroke: rgba(255, 255, 255, 0);\n stroke-dashoffset: 153.94;\n transform: rotate(0.5turn);\n }\n 20% {\n animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);\n stroke: white;\n stroke-dashoffset: 147.53;\n transform: rotate(0.83turn);\n }\n 32%,\n to {\n stroke: rgba(255, 255, 255, 0);\n stroke-dashoffset: 153.94;\n transform: rotate(1.17turn);\n }\n}\n@keyframes motion-thin {\n from,\n 4% {\n animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);\n stroke: rgba(255, 255, 255, 0);\n stroke-dashoffset: 153.94;\n transform: rotate(0.33turn);\n }\n 24% {\n animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);\n stroke: rgb(53, 53, 53);\n stroke-dashoffset: 134.7;\n transform: rotate(0.67turn);\n }\n 44%,\n to {\n stroke: rgba(255, 255, 255, 0);\n stroke-dashoffset: 153.94;\n transform: rotate(1turn);\n }\n}\n@keyframes sand-drop {\n from,\n 10% {\n animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);\n stroke-dashoffset: 1;\n }\n 70%,\n to {\n stroke-dashoffset: -107;\n }\n}\n@keyframes sand-fill {\n from,\n 10% {\n animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);\n stroke-dashoffset: 55;\n }\n 70%,\n to {\n stroke-dashoffset: -54;\n }\n}\n@keyframes sand-grain-left {\n from,\n 10% {\n animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);\n stroke-dashoffset: 29;\n }\n 70%,\n to {\n stroke-dashoffset: -22;\n }\n}\n@keyframes sand-grain-right {\n from,\n 10% {\n animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);\n stroke-dashoffset: 27;\n }\n 70%,\n to {\n stroke-dashoffset: -24;\n }\n}\n@keyframes sand-line-left {\n from,\n 10% {\n animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);\n stroke-dashoffset: 53;\n }\n 70%,\n to {\n stroke-dashoffset: -55;\n }\n}\n@keyframes sand-line-right {\n from,\n 10% {\n animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);\n stroke-dashoffset: 14;\n }\n 70%,\n to {\n stroke-dashoffset: -24.5;\n }\n}\n@keyframes sand-mound-top {\n from,\n 10% {\n animation-timing-function: linear;\n transform: translate(0, 0);\n }\n 15% {\n animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);\n transform: translate(0, 1.5px);\n }\n 51%,\n to {\n transform: translate(0, 13px);\n }\n}\n@keyframes sand-mound-bottom {\n from,\n 31% {\n animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);\n transform: scale(1, 0);\n }\n 56%,\n to {\n transform: scale(1, 1);\n }\n}\n"}

itchy-bulldog-59

👁 实时预览

📝 源代码