{"loaderData":{"0":null,"0-3":{"total":7424,"projects":[{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"312c3b","snapshot":null,"tags":null,"title":"loader by vikas7754","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":368,"cssLen":1274,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Status

\n","css":"@keyframes blinkCursor {\n 50% {\n border-right-color: transparent;\n }\n}\n\n@keyframes typeAndDelete {\n 0%,\n 10% {\n width: 0;\n }\n\n 45%,\n 55% {\n width: 5em;\n }\n\n 90%,\n 100% {\n width: 0;\n }\n}\n\n.terminal-loader {\n width: 100%;\n max-width: 400px;\n height: 200px;\n background: #1c1c1c;\n border: 1px solid #ffffff3e;\n border-radius: 10px;\n overflow: hidden;\n margin: 20px;\n box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);\n}\n\n.terminal-header {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #343434;\n padding: 6px;\n}\n\n.terminal-controls {\n position: absolute;\n left: 10px;\n display: flex;\n gap: 7px;\n}\n\n.control {\n display: inline-block;\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: #777;\n}\n\n.control.close {\n background-color: #e33;\n}\n\n.control.minimize {\n background-color: #ee0;\n}\n\n.control.maximize {\n background-color: #0b0;\n}\n\n.terminal-title {\n color: #eeeeeec1;\n}\n\n.content {\n padding: 10px;\n}\n.text {\n display: inline-block;\n white-space: nowrap;\n overflow: hidden;\n border-right: 2px solid green;\n animation: typeAndDelete 4s steps(11) infinite,\n blinkCursor 0.5s step-end infinite alternate;\n color: rgb(0, 196, 0);\n font-weight: 600;\n}\n"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"cde5f6","snapshot":null,"tags":null,"title":"loader by G4b413l","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":638,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".pulsar {\n --uib-size: 40px;\n --uib-speed: 0.9s;\n --uib-color: white;\n position: relative;\n height: var(--uib-size);\n width: var(--uib-size);\n}\n\n.pulsar::before,\n.pulsar::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n border-radius: 50%;\n background-color: var(--uib-color);\n animation: pulse9173412 var(--uib-speed) ease-in-out infinite;\n transform: scale(0);\n}\n\n.pulsar::after {\n animation-delay: calc(var(--uib-speed) / -2);\n}\n\n@keyframes pulse9173412 {\n 0%,\n 100% {\n transform: scale(0);\n opacity: 1;\n }\n\n 50% {\n transform: scale(1);\n opacity: 0.25;\n }\n}\n"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"9bbe1c","snapshot":null,"tags":null,"title":"loader by bociKond","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":96,"cssLen":1299,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Loading...\n

","css":"/* phone */\n.phone {\n --screen-clr: #0d85aa;\n --border-clr: #29536d;\n --loader-clr: #CCE3DE;\n background-color: var(--screen-clr);\n height: 13rem;\n aspect-ratio: 10/16;\n border-radius: .5rem;\n border: 5px solid var(--border-clr);\n border-top: 10px solid var(--border-clr);\n border-bottom: 10px solid var(--border-clr);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n animation: shake .5s infinite linear;\n position: relative;\n}\n\n/* camera */\n.phone::after {\n content: '';\n position: absolute;\n top: -7px;\n left: 50%;\n transform: translateX(-50%);\n width: 1rem;\n height: 5px;\n background-color: var(--loader-clr);\n border-radius: .5rem;\n}\n\n/* loader */\n.loader {\n border: 10px dashed var(--loader-clr);\n width: 2rem;\n height: 2rem;\n padding: 1.7rem;\n border-radius: 50%;\n animation: loading 2s infinite ease-in-out;\n}\n\n/* loading text */\n.text {\n color: var(--loader-clr);\n}\n\n/* loader spinning */\n@keyframes loading {\n 0% {\n rotate: 0deg;\n }\n\n 100% {\n rotate: 360deg;\n }\n}\n\n/* phone shaking */\n@keyframes shake {\n 0% {\n rotate: 0deg;\n }\n\n 10% {\n rotate: .5deg;\n }\n\n 20% {\n rotate: 0deg;\n }\n\n 30% {\n rotate: -.5deg;\n }\n\n 50% {\n rotate: 0deg;\n }\n\n 100% {\n rotate: 0deg;\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"114e52","snapshot":null,"tags":null,"title":"loader by garerim","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":300,"cssLen":801,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".anim-box {\n width: 200px;\n height: 200px;\n border: 5px solid #333;\n margin: 100px auto;\n position: relative;\n}\n\n.anim-interieur {\n width: 100px;\n height: 50px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n /* background-color: orange; */\n text-align: center;\n}\n\n.rect {\n background-color: #333;\n display: inline-block;\n height: 60px;\n width: 6px;\n margin: 0px 1px;\n animation: etire 1.2s infinite ease-in-out;\n}\n\n@keyframes etire {\n 0% {\n transform: scaleY(0.4);\n }\n\n 20% {\n transform: scaleY(1);\n }\n\n 40% {\n transform: scaleY(0.4);\n }\n\n 100% {\n transform: scaleY(0.4);\n }\n}\n\n.rect2 {\n animation-delay: -1.1s;\n}\n\n.rect3 {\n animation-delay: -1s;\n}\n\n.rect4 {\n animation-delay: -0.9s;\n}\n\n.rect5 {\n animation-delay: -0.8s;\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"604f62","snapshot":null,"tags":null,"title":"loader by davidhbt","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":339,"cssLen":987,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"@keyframes bounce {\n 0%, 80%, 100% {\n transform: scale(0);\n opacity: 0;\n }\n\n 40% {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n.loader {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n width: 100px;\n height: 100px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.circle {\n width: 20px;\n height: 20px;\n background-color: rgb(83, 82, 82);\n border-radius: 50%;\n margin: 2px;\n animation: bounce 1.2s infinite ease-in-out;\n}\n\n.circle:nth-child(2) {\n animation-delay: -0.1s;\n}\n\n.circle:nth-child(3) {\n animation-delay: -0.2s;\n}\n\n.circle:nth-child(4) {\n animation-delay: -0.3s;\n}\n\n.circle:nth-child(5) {\n animation-delay: -0.4s;\n}\n\n.circle:nth-child(6) {\n animation-delay: -0.5s;\n}\n\n.circle:nth-child(7) {\n animation-delay: -0.6s;\n}\n\n.circle:nth-child(8) {\n animation-delay: -0.7s;\n}\n\n.circle:nth-child(9) {\n animation-delay: -0.8s;\n}\n\n.circle:nth-child(10) {\n animation-delay: -0.9s;\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"361be5","snapshot":null,"tags":null,"title":"loader by Cybercom682","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":53,"cssLen":1508,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n height: 150px;\n width: 150px;\n border-radius: 50%;\n position: relative;\n}\n\n.loader::before {\n content: \"\";\n height: 100%;\n width: 100%;\n border: 1px solid black;\n border-radius: 50%;\n position: absolute;\n animation: doitreverse 4s infinite;\n}\n\n.loader::after {\n content: \"\";\n height: 100%;\n width: 100%;\n border: 1px solid black;\n border-radius: 50%;\n position: absolute;\n animation: doit 4s infinite;\n}\n\n@keyframes doit {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n border-radius: 20% 50%;\n transform: scale(1.25);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes doitreverse {\n 0% {\n transform: rotate(360deg);\n }\n\n 50% {\n border-radius: 50% 20%;\n transform: rotate(180deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}\n\n.eye {\n height: 50%;\n width: 50%;\n border-radius: 50%;\n border: 1px solid black;\n background-color: rgb(85, 0, 128);\n position: absolute;\n left: 25%;\n top: 25%;\n animation: showme 4s infinite;\n}\n\n.eye::before {\n content: \"\";\n height: 20%;\n width: 20%;\n border-radius: 50%;\n background-color: white;\n position: absolute;\n top: 25%;\n left: 50%;\n animation: showme 4s infinite;\n}\n\n.eye::after {\n content: \"\";\n height: 10%;\n width: 10%;\n border-radius: 50%;\n background-color: white;\n position: absolute;\n top: 60%;\n left: 50%;\n animation: showme 4s infinite;\n}\n\n@keyframes showme {\n 0% {\n transform: scale(0.3);\n }\n\n 50% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(0.3);\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"630098","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":62,"cssLen":306,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader-pulse {\n width: 64px;\n height: 64px;\n border-radius: 50%;\n background: #8f44fd;\n animation: load-pulse 0.85s infinite linear;\n}\n\n@keyframes load-pulse {\n 0% {\n transform: scale(0.15);\n opacity: 0;\n }\n\n 50% {\n opacity: 1;\n }\n\n 100% {\n transform: scale(1);\n opacity: 0;\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"1c26e0","snapshot":null,"tags":null,"title":"loader by carlosepcc","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2265,"cssLen":1598,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

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

","css":"/* Butterfly loader created by WerlynDev in Uiverse.io*/\n\n.loader {\n --sizeLoader: 60px;\n --sizeLoaderHalf: calc(var(--sizeLoader) / 2);\n --stepBtf: calc(var(--sizeLoader) / 10);\n display: flex;\n position: relative;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: var(--sizeLoader);\n height: var(--sizeLoader);\n background: radial-gradient(#f1f8,transparent 30%);\n}\n\n.loader:hover {\n cursor: progress;\n}\n\n.loader[anim1] {\n animation: anim1 0.3s alternate ease-in-out infinite;\n}\n\n.loader:not([anim1]) {\n right: var(--sizeLoaderHalf);\n transform-origin: center right;\n animation: moveAround 2s linear infinite;\n}\n\n.loader[showShadow] {\n filter: drop-shadow(0 10px 10px #060606de);\n}\n\n.loader svg:nth-child(1) {\n position: relative;\n height: 100%;\n left: 2%;\n transform-origin: center right;\n animation: wing 0.2s ease-in-out infinite;\n}\n\n.loader svg:nth-child(2) {\n height: 50%;\n}\n\n.loader svg:nth-child(3) {\n position: relative;\n height: 100%;\n left: -2%;\n transform-origin: center left;\n animation: wing 0.25s ease-in-out infinite;\n}\n\n@keyframes wing {\n 0% {\n transform: rotateY(0deg);\n }\n\n 50% {\n transform: rotateY(60deg);\n }\n\n 100% {\n transform: rotateY(0deg);\n }\n}\n\n@keyframes moveAround {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes anim1 {\n from {\n transform: translateY(0px);\n }\n\n to {\n transform: translateY(var(--stepBtf));\n }\n}\n\n/* @media (prefers-color-scheme: dark) {\n .loader[showShadow]{\n filter: drop-shadow(0 10px 10px #dbdbdbde);\n }\n} */"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"bcf599","snapshot":null,"tags":null,"title":"loader by Admin12121","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":352,"cssLen":3913,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

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

","css":".content {\n width: 300px;\n height: 300px;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.content .planet {\n width: 65%;\n height: 65%;\n background-color: #546c8c;\n border-radius: 100%;\n position: absolute;\n display: flex;\n align-items: center;\n transform-origin: center center;\n box-shadow: inset 2px -10px 0px rgba(0, 0, 0, 0.1);\n animation: planet 5s ease infinite alternate;\n /* planet ring */\n /* to cover the back of the ring */\n /* planet spots */\n}\n\n@keyframes planet {\n 0% {\n transform: rotate(10deg);\n }\n\n 100% {\n transform: rotate(-10deg);\n }\n}\n\n.content .planet .ring {\n position: absolute;\n width: 300px;\n height: 300px;\n border-radius: 100%;\n background-color: #bacbd9;\n display: flex;\n align-items: center;\n justify-content: center;\n transform-origin: 33% center;\n box-shadow: 2px -10px 0px rgba(0, 0, 0, 0.1), inset -5px -10px 0px rgba(0, 0, 0, 0.1);\n animation: ring 3s ease infinite;\n /* small ball */\n /* inner ring */\n}\n\n@keyframes ring {\n 0% {\n transform: rotateX(110deg) rotateZ(0deg) translate(-50px, 5px);\n }\n\n 100% {\n transform: rotateX(110deg) rotateZ(360deg) translate(-50px, 5px);\n }\n}\n\n.content .planet .ring:before {\n content: \"\";\n position: absolute;\n width: 10px;\n height: 30px;\n border-radius: 100%;\n background-color: #7ea1bf;\n z-index: 2;\n left: calc(0px - 5px);\n box-shadow: inset -3px 3px 0px rgba(0, 0, 0, 0.2);\n}\n\n.content .planet .ring:after {\n content: \"\";\n position: absolute;\n width: 240px;\n height: 240px;\n border-radius: 100%;\n background-color: #7ea1bf;\n box-shadow: inset 2px -10px 0px rgba(0, 0, 0, 0.1);\n}\n\n.content .planet .cover-ring {\n position: absolute;\n width: 100%;\n height: 50%;\n border-bottom-left-radius: 80%;\n border-bottom-right-radius: 80%;\n border-top-left-radius: 100px;\n border-top-right-radius: 100px;\n transform: translate(0px, -17px);\n background-color: #546c8c;\n z-index: 2;\n box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.1);\n}\n\n.content .planet .spots {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n z-index: 2;\n}\n\n.content .planet .spots span {\n width: 30px;\n height: 30px;\n background-color: #3c4359;\n position: absolute;\n border-radius: 100%;\n box-shadow: inset -2px 3px 0px rgba(0, 0, 0, 0.3);\n animation: dots 5s ease infinite alternate;\n}\n\n@keyframes dots {\n 0% {\n box-shadow: inset -3px 3px 0px rgba(0, 0, 0, 0.3);\n }\n\n 100% {\n box-shadow: inset 3px 3px 0px rgba(0, 0, 0, 0.3);\n }\n}\n\n.content .planet .spots span:nth-child(1) {\n top: 20px;\n right: 50px;\n}\n\n.content .planet .spots span:nth-child(2) {\n top: 40px;\n left: 50px;\n width: 15px;\n height: 15px;\n}\n\n.content .planet .spots span:nth-child(3) {\n top: 80px;\n left: 20px;\n width: 25px;\n height: 25px;\n}\n\n.content .planet .spots span:nth-child(4) {\n top: 80px;\n left: 90px;\n width: 40px;\n height: 40px;\n}\n\n.content .planet .spots span:nth-child(5) {\n top: 160px;\n left: 70px;\n width: 15px;\n height: 15px;\n}\n\n.content .planet .spots span:nth-child(6) {\n top: 165px;\n left: 125px;\n width: 10px;\n height: 10px;\n}\n\n.content .planet .spots span:nth-child(7) {\n top: 90px;\n left: 150px;\n width: 15px;\n height: 15px;\n}\n\n.content p {\n color: #bacbd9;\n font-size: 14px;\n z-index: 2;\n position: absolute;\n bottom: -20px;\n font-family: \"Roboto Mono\", monospace;\n animation: text 4s ease infinite;\n width: 100px;\n text-align: center;\n}\n\n@keyframes text {\n 0% {\n transform: translateX(-30px);\n letter-spacing: 0px;\n color: #bacbd9;\n }\n\n 25% {\n letter-spacing: 3px;\n color: #7ea1bf;\n }\n\n 50% {\n transform: translateX(30px);\n letter-spacing: 0px;\n color: #bacbd9;\n }\n\n 75% {\n letter-spacing: 3px;\n color: #7ea1bf;\n }\n\n 100% {\n transform: translateX(-30px);\n letter-spacing: 0px;\n color: #bacbd9;\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"fe411f","snapshot":null,"tags":null,"title":"loader by AbanoubMagdy1","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":336,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n --dim: 5rem;\n width: var(--dim);\n height: var(--dim);\n border: 7px solid #2596be;\n border-top-color: transparent;\n border-bottom-color: transparent;\n border-radius: 50%;\n animation: spin_51 1.5s infinite linear;\n}\n\n@keyframes spin_51 {\n from {\n transform: rotate(0)\n }\n\n to {\n transform: rotate(360deg)\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"f1f5fe","snapshot":null,"tags":null,"title":"loader by alexruix","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1029,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n position: relative;\n margin: auto;\n box-sizing: border-box;\n background-clip: padding-box;\n width: 200px;\n height: 200px;\n border-radius: 50%;\n border: 4px solid rgba(255, 255, 255, 0.1);\n -webkit-mask: linear-gradient(rgba(24, 24, 24, 0.2), rgba(24, 24, 24,0.9) 90%);\n transform-origin: 50% 60%;\n transform: perspective(200px) rotateX(66deg);\n}\n\n.loader:before, .loader:after {\n content: \"\";\n position: absolute;\n margin: -4px;\n box-sizing: inherit;\n width: inherit;\n height: inherit;\n border-radius: inherit;\n opacity: 0.05;\n border: inherit;\n border-color: transparent;\n animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, spinner-fade 1.2s linear infinite;\n}\n\n.loader:before {\n border-top-color: #66e6ff;\n}\n\n.loader:after {\n border-top-color: #f0db75;\n animation-delay: 0.3s;\n}\n\n@keyframes spinner-spin {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes spinner-fade {\n 20% {\n opacity: 0.1;\n }\n\n 40% {\n opacity: 1;\n }\n\n 60% {\n opacity: 0.1;\n }\n}\n "},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"e7c2d1","snapshot":null,"tags":null,"title":"loader by VashonG","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":373,"cssLen":1608,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n

\n\n\n","css":"@media (prefers-reduced-motion) {\n}\n\nfigure {\n --size: 15vmin;\n --duration: 4s;\n --direction: 1;\n --pull: -1.25;\n perspective: 30rem;\n display: grid;\n grid-template-areas: \"figure\";\n place-items: center;\n inline-size: var(--size);\n aspect-ratio: 1;\n animation: spin var(--duration) ease-in-out infinite;\n}\n\nfigure > * {\n --radius: calc(var(--size) / 2);\n --deg: calc(var(--i) * (360deg / 12));\n --hs: 225 100%;\n --transform-start: translate3d(\n calc(cos(var(--deg)) * var(--radius)),\n calc(sin(var(--deg)) * var(--radius)),\n 0\n )\n rotate(calc(var(--deg)));\n grid-area: figure;\n background-color: hsl(var(--hs) var(--l, 60%));\n inline-size: calc(var(--size) / 4);\n aspect-ratio: 1;\n clip-path: polygon(25% 25%, 100% 50%, 25% 75%, 0% 50%);\n transform: var(--transform-start);\n transform-style: preserve-3d;\n animation: diamonds var(--duration) cubic-bezier(0.87, 0, 0.13, 1) infinite;\n}\n\nfigure:nth-child(2) {\n --size: 30vmin;\n --direction: -1;\n --l: 70%;\n}\n\nfigure:nth-child(3) {\n --size: 55vmin;\n --pull: -1.125;\n --l: 80%;\n}\n\n@keyframes spin {\n 0%,\n 25% {\n transform: scaleX(var(--direction)) rotate(0);\n }\n\n 75%,\n 100% {\n transform: scaleX(var(--direction)) rotate(1turn);\n }\n}\n\n@keyframes diamonds {\n 0%,\n 20% {\n transform: var(--transform-start);\n }\n\n 50% {\n clip-path: polygon(75% 25%, 100% 50%, 75% 75%, 0% 50%);\n transform: translate3d(\n calc(cos(var(--deg)) * var(--radius) * var(--pull)),\n calc(sin(var(--deg)) * var(--radius) * var(--pull)),\n 5rem\n )\n rotate(calc(var(--deg) + 90deg));\n }\n}\n"}]}},"actionData":null,"errors":null}