{"loaderData":{"0":null,"0-3":{"total":7405,"projects":[{"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"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"b17ad4","snapshot":null,"tags":null,"title":"loader by mobinkakei","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":727,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".loader {\n position: relative;\n width: 60px;\n height: 60px;\n background: #a19dad;\n transform: rotateX(65deg) rotate(45deg);\n // remove bellows command for perspective change\n //transform: perspective(200px) rotateX(65deg) rotate(45deg);\n color: #fff;\n animation: layers1 1s linear infinite alternate;\n}\n.loader:after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: rgba(255, 255, 255, 0.7);\n animation: layerTr 1s linear infinite alternate;\n}\n\n@keyframes layers1 {\n 0% {\n box-shadow: 0px 0px 0 0px;\n }\n 90%,\n 100% {\n box-shadow: 20px 20px 0 -4px;\n }\n}\n@keyframes layerTr {\n 0% {\n transform: translate(0, 0) scale(1);\n }\n 100% {\n transform: translate(-25px, -25px) scale(1);\n }\n}\n"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"92fa6d","snapshot":null,"tags":null,"title":"loader by AHMED-MIT","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":658,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner {\n --d: 24.6px;\n width: 4.5px;\n height: 4.5px;\n border-radius: 50%;\n color: #474bff;\n box-shadow: calc(1*var(--d)) calc(0*var(--d)) 0 0,\n calc(0.707*var(--d)) calc(0.707*var(--d)) 0 1.1px,\n calc(0*var(--d)) calc(1*var(--d)) 0 2.2px,\n calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 3.4px,\n calc(-1*var(--d)) calc(0*var(--d)) 0 4.5px,\n calc(-0.707*var(--d)) calc(-0.707*var(--d))0 5.6px,\n calc(0*var(--d)) calc(-1*var(--d)) 0 6.7px;\n animation: spinner-a90wxe 1s infinite steps(8);\n}\n\n@keyframes spinner-a90wxe {\n 100% {\n transform: rotate(1turn);\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"8209ac","snapshot":null,"tags":null,"title":"loader by G4b413l","updated":"2024-01-22T16:54:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":593,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".ping {\n --uib-size: 50px;\n --uib-speed: 1s;\n --uib-color: #3950cf;\n position: relative;\n height: var(--uib-size);\n width: var(--uib-size);\n}\n\n.ping::before,\n.ping::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: pulse7132 var(--uib-speed) linear infinite;\n transform: scale(0);\n opacity: 0;\n}\n\n.ping::after {\n animation-delay: calc(var(--uib-speed) / -2);\n}\n\n@keyframes pulse7132 {\n 0% {\n transform: scale(0);\n opacity: 1;\n }\n\n 100% {\n transform: scale(1);\n opacity: 0;\n }\n}\n"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"116e0f","snapshot":null,"tags":null,"title":"loader by Juanes200122","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":475,"cssLen":13446,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n --duration: 3s;\n --primary: rgb(0, 204, 255);\n --primary-light: #00a6ff;\n --primary-rgba: rgba(204, 0, 255, 0.04);\n width: 200px;\n height: 320px;\n position: relative;\n transform-style: preserve-3d;\n}\n\n@media (max-width: 480px) {\n .loader {\n zoom: 0.44;\n }\n}\n\n.loader:before, .loader:after {\n --r: 20.5deg;\n content: \"\";\n width: 320px;\n height: 140px;\n position: absolute;\n right: 32%;\n bottom: -11px;\n /* change the back groung color on switching from light to dark mood */\n background: #e8e8e8;\n transform: translateZ(200px) rotate(var(--r));\n -webkit-animation: mask var(--duration) linear forwards infinite;\n animation: mask var(--duration) linear forwards infinite;\n}\n\n.loader:after {\n --r: -20.5deg;\n right: auto;\n left: 32%;\n}\n\n.loader .ground {\n position: absolute;\n left: -50px;\n bottom: -120px;\n transform-style: preserve-3d;\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n}\n\n.loader .ground div {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n width: 200px;\n height: 200px;\n background: var(--primary);\n background: linear-gradient(45deg, var(--primary) 0%, var(--primary) 50%, var(--primary-light) 50%, var(--primary-light) 100%);\n transform-style: preserve-3d;\n -webkit-animation: ground var(--duration) linear forwards infinite;\n animation: ground var(--duration) linear forwards infinite;\n}\n\n.loader .ground div:before, .loader .ground div:after {\n --rx: 90deg;\n --ry: 0deg;\n --x: 44px;\n --y: 162px;\n --z: -50px;\n content: \"\";\n width: 156px;\n height: 300px;\n opacity: 0;\n background: linear-gradient(var(--primary), var(--primary-rgba));\n position: absolute;\n transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));\n -webkit-animation: ground-shine var(--duration) linear forwards infinite;\n animation: ground-shine var(--duration) linear forwards infinite;\n}\n\n.loader .ground div:after {\n --rx: 90deg;\n --ry: 90deg;\n --x: 0;\n --y: 177px;\n --z: 150px;\n}\n\n.loader .box {\n --x: 0;\n --y: 0;\n position: absolute;\n -webkit-animation: var(--duration) linear forwards infinite;\n animation: var(--duration) linear forwards infinite;\n transform: translate(var(--x), var(--y));\n}\n\n.loader .box div {\n background-color: var(--primary);\n width: 48px;\n height: 48px;\n position: relative;\n transform-style: preserve-3d;\n -webkit-animation: var(--duration) ease forwards infinite;\n animation: var(--duration) ease forwards infinite;\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n}\n\n.loader .box div:before, .loader .box div:after {\n --rx: 90deg;\n --ry: 0deg;\n --z: 24px;\n --y: -24px;\n --x: 0;\n content: \"\";\n position: absolute;\n background-color: inherit;\n width: inherit;\n height: inherit;\n transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));\n filter: brightness(var(--b, 1.2));\n}\n\n.loader .box div:after {\n --rx: 0deg;\n --ry: 90deg;\n --x: 24px;\n --y: 0;\n --b: 1.4;\n}\n\n.loader .box.box0 {\n --x: -220px;\n --y: -120px;\n left: 58px;\n top: 108px;\n}\n\n.loader .box.box1 {\n --x: -260px;\n --y: 120px;\n left: 25px;\n top: 120px;\n}\n\n.loader .box.box2 {\n --x: 120px;\n --y: -190px;\n left: 58px;\n top: 64px;\n}\n\n.loader .box.box3 {\n --x: 280px;\n --y: -40px;\n left: 91px;\n top: 120px;\n}\n\n.loader .box.box4 {\n --x: 60px;\n --y: 200px;\n left: 58px;\n top: 132px;\n}\n\n.loader .box.box5 {\n --x: -220px;\n --y: -120px;\n left: 25px;\n top: 76px;\n}\n\n.loader .box.box6 {\n --x: -260px;\n --y: 120px;\n left: 91px;\n top: 76px;\n}\n\n.loader .box.box7 {\n --x: -240px;\n --y: 200px;\n left: 58px;\n top: 87px;\n}\n\n.loader .box0 {\n -webkit-animation-name: box-move0;\n animation-name: box-move0;\n}\n\n.loader .box0 div {\n -webkit-animation-name: box-scale0;\n animation-name: box-scale0;\n}\n\n.loader .box1 {\n -webkit-animation-name: box-move1;\n animation-name: box-move1;\n}\n\n.loader .box1 div {\n -webkit-animation-name: box-scale1;\n animation-name: box-scale1;\n}\n\n.loader .box2 {\n -webkit-animation-name: box-move2;\n animation-name: box-move2;\n}\n\n.loader .box2 div {\n -webkit-animation-name: box-scale2;\n animation-name: box-scale2;\n}\n\n.loader .box3 {\n -webkit-animation-name: box-move3;\n animation-name: box-move3;\n}\n\n.loader .box3 div {\n -webkit-animation-name: box-scale3;\n animation-name: box-scale3;\n}\n\n.loader .box4 {\n -webkit-animation-name: box-move4;\n animation-name: box-move4;\n}\n\n.loader .box4 div {\n -webkit-animation-name: box-scale4;\n animation-name: box-scale4;\n}\n\n.loader .box5 {\n -webkit-animation-name: box-move5;\n animation-name: box-move5;\n}\n\n.loader .box5 div {\n -webkit-animation-name: box-scale5;\n animation-name: box-scale5;\n}\n\n.loader .box6 {\n -webkit-animation-name: box-move6;\n animation-name: box-move6;\n}\n\n.loader .box6 div {\n -webkit-animation-name: box-scale6;\n animation-name: box-scale6;\n}\n\n.loader .box7 {\n -webkit-animation-name: box-move7;\n animation-name: box-move7;\n}\n\n.loader .box7 div {\n -webkit-animation-name: box-scale7;\n animation-name: box-scale7;\n}\n\n@-webkit-keyframes box-move0 {\n 12% {\n transform: translate(var(--x), var(--y));\n }\n\n 25%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move0 {\n 12% {\n transform: translate(var(--x), var(--y));\n }\n\n 25%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale0 {\n 6% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 14%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale0 {\n 6% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 14%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move1 {\n 16% {\n transform: translate(var(--x), var(--y));\n }\n\n 29%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move1 {\n 16% {\n transform: translate(var(--x), var(--y));\n }\n\n 29%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale1 {\n 10% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 18%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale1 {\n 10% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 18%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move2 {\n 20% {\n transform: translate(var(--x), var(--y));\n }\n\n 33%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move2 {\n 20% {\n transform: translate(var(--x), var(--y));\n }\n\n 33%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale2 {\n 14% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 22%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale2 {\n 14% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 22%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move3 {\n 24% {\n transform: translate(var(--x), var(--y));\n }\n\n 37%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move3 {\n 24% {\n transform: translate(var(--x), var(--y));\n }\n\n 37%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale3 {\n 18% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 26%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale3 {\n 18% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 26%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move4 {\n 28% {\n transform: translate(var(--x), var(--y));\n }\n\n 41%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move4 {\n 28% {\n transform: translate(var(--x), var(--y));\n }\n\n 41%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale4 {\n 22% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 30%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale4 {\n 22% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 30%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move5 {\n 32% {\n transform: translate(var(--x), var(--y));\n }\n\n 45%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move5 {\n 32% {\n transform: translate(var(--x), var(--y));\n }\n\n 45%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale5 {\n 26% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 34%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale5 {\n 26% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 34%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move6 {\n 36% {\n transform: translate(var(--x), var(--y));\n }\n\n 49%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move6 {\n 36% {\n transform: translate(var(--x), var(--y));\n }\n\n 49%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale6 {\n 30% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 38%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale6 {\n 30% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 38%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move7 {\n 40% {\n transform: translate(var(--x), var(--y));\n }\n\n 53%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move7 {\n 40% {\n transform: translate(var(--x), var(--y));\n }\n\n 53%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale7 {\n 34% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 42%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale7 {\n 34% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 42%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes ground {\n 0%, 65% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n\n 75%, 90% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);\n }\n\n 100% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n}\n\n@keyframes ground {\n 0%, 65% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n\n 75%, 90% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);\n }\n\n 100% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n}\n\n@-webkit-keyframes ground-shine {\n 0%, 70% {\n opacity: 0;\n }\n\n 75%, 87% {\n opacity: 0.2;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes ground-shine {\n 0%, 70% {\n opacity: 0;\n }\n\n 75%, 87% {\n opacity: 0.2;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n@-webkit-keyframes mask {\n 0%, 65% {\n opacity: 0;\n }\n\n 66%, 100% {\n opacity: 1;\n }\n}\n\n@keyframes mask {\n 0%, 65% {\n opacity: 0;\n }\n\n 66%, 100% {\n opacity: 1;\n }\n}\n "},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"abc35d","snapshot":null,"tags":null,"title":"loader by Juanes200122","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":475,"cssLen":13443,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n --duration: 3s;\n --primary: rgb(183, 0, 255);\n --primary-light: #d000ff;\n --primary-rgba: rgba(39, 94, 254, 0);\n width: 200px;\n height: 320px;\n position: relative;\n transform-style: preserve-3d;\n}\n\n@media (max-width: 480px) {\n .loader {\n zoom: 0.44;\n }\n}\n\n.loader:before, .loader:after {\n --r: 20.5deg;\n content: \"\";\n width: 320px;\n height: 140px;\n position: absolute;\n right: 32%;\n bottom: -11px;\n /* change the back groung color on switching from light to dark mood */\n background: #e8e8e8;\n transform: translateZ(200px) rotate(var(--r));\n -webkit-animation: mask var(--duration) linear forwards infinite;\n animation: mask var(--duration) linear forwards infinite;\n}\n\n.loader:after {\n --r: -20.5deg;\n right: auto;\n left: 32%;\n}\n\n.loader .ground {\n position: absolute;\n left: -50px;\n bottom: -120px;\n transform-style: preserve-3d;\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n}\n\n.loader .ground div {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n width: 200px;\n height: 200px;\n background: var(--primary);\n background: linear-gradient(45deg, var(--primary) 0%, var(--primary) 50%, var(--primary-light) 50%, var(--primary-light) 100%);\n transform-style: preserve-3d;\n -webkit-animation: ground var(--duration) linear forwards infinite;\n animation: ground var(--duration) linear forwards infinite;\n}\n\n.loader .ground div:before, .loader .ground div:after {\n --rx: 90deg;\n --ry: 0deg;\n --x: 44px;\n --y: 162px;\n --z: -50px;\n content: \"\";\n width: 156px;\n height: 300px;\n opacity: 0;\n background: linear-gradient(var(--primary), var(--primary-rgba));\n position: absolute;\n transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));\n -webkit-animation: ground-shine var(--duration) linear forwards infinite;\n animation: ground-shine var(--duration) linear forwards infinite;\n}\n\n.loader .ground div:after {\n --rx: 90deg;\n --ry: 90deg;\n --x: 0;\n --y: 177px;\n --z: 150px;\n}\n\n.loader .box {\n --x: 0;\n --y: 0;\n position: absolute;\n -webkit-animation: var(--duration) linear forwards infinite;\n animation: var(--duration) linear forwards infinite;\n transform: translate(var(--x), var(--y));\n}\n\n.loader .box div {\n background-color: var(--primary);\n width: 48px;\n height: 48px;\n position: relative;\n transform-style: preserve-3d;\n -webkit-animation: var(--duration) ease forwards infinite;\n animation: var(--duration) ease forwards infinite;\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n}\n\n.loader .box div:before, .loader .box div:after {\n --rx: 90deg;\n --ry: 0deg;\n --z: 24px;\n --y: -24px;\n --x: 0;\n content: \"\";\n position: absolute;\n background-color: inherit;\n width: inherit;\n height: inherit;\n transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));\n filter: brightness(var(--b, 1.2));\n}\n\n.loader .box div:after {\n --rx: 0deg;\n --ry: 90deg;\n --x: 24px;\n --y: 0;\n --b: 1.4;\n}\n\n.loader .box.box0 {\n --x: -220px;\n --y: -120px;\n left: 58px;\n top: 108px;\n}\n\n.loader .box.box1 {\n --x: -260px;\n --y: 120px;\n left: 25px;\n top: 120px;\n}\n\n.loader .box.box2 {\n --x: 120px;\n --y: -190px;\n left: 58px;\n top: 64px;\n}\n\n.loader .box.box3 {\n --x: 280px;\n --y: -40px;\n left: 91px;\n top: 120px;\n}\n\n.loader .box.box4 {\n --x: 60px;\n --y: 200px;\n left: 58px;\n top: 132px;\n}\n\n.loader .box.box5 {\n --x: -220px;\n --y: -120px;\n left: 25px;\n top: 76px;\n}\n\n.loader .box.box6 {\n --x: -260px;\n --y: 120px;\n left: 91px;\n top: 76px;\n}\n\n.loader .box.box7 {\n --x: -240px;\n --y: 200px;\n left: 58px;\n top: 87px;\n}\n\n.loader .box0 {\n -webkit-animation-name: box-move0;\n animation-name: box-move0;\n}\n\n.loader .box0 div {\n -webkit-animation-name: box-scale0;\n animation-name: box-scale0;\n}\n\n.loader .box1 {\n -webkit-animation-name: box-move1;\n animation-name: box-move1;\n}\n\n.loader .box1 div {\n -webkit-animation-name: box-scale1;\n animation-name: box-scale1;\n}\n\n.loader .box2 {\n -webkit-animation-name: box-move2;\n animation-name: box-move2;\n}\n\n.loader .box2 div {\n -webkit-animation-name: box-scale2;\n animation-name: box-scale2;\n}\n\n.loader .box3 {\n -webkit-animation-name: box-move3;\n animation-name: box-move3;\n}\n\n.loader .box3 div {\n -webkit-animation-name: box-scale3;\n animation-name: box-scale3;\n}\n\n.loader .box4 {\n -webkit-animation-name: box-move4;\n animation-name: box-move4;\n}\n\n.loader .box4 div {\n -webkit-animation-name: box-scale4;\n animation-name: box-scale4;\n}\n\n.loader .box5 {\n -webkit-animation-name: box-move5;\n animation-name: box-move5;\n}\n\n.loader .box5 div {\n -webkit-animation-name: box-scale5;\n animation-name: box-scale5;\n}\n\n.loader .box6 {\n -webkit-animation-name: box-move6;\n animation-name: box-move6;\n}\n\n.loader .box6 div {\n -webkit-animation-name: box-scale6;\n animation-name: box-scale6;\n}\n\n.loader .box7 {\n -webkit-animation-name: box-move7;\n animation-name: box-move7;\n}\n\n.loader .box7 div {\n -webkit-animation-name: box-scale7;\n animation-name: box-scale7;\n}\n\n@-webkit-keyframes box-move0 {\n 12% {\n transform: translate(var(--x), var(--y));\n }\n\n 25%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move0 {\n 12% {\n transform: translate(var(--x), var(--y));\n }\n\n 25%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale0 {\n 6% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 14%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale0 {\n 6% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 14%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move1 {\n 16% {\n transform: translate(var(--x), var(--y));\n }\n\n 29%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move1 {\n 16% {\n transform: translate(var(--x), var(--y));\n }\n\n 29%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale1 {\n 10% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 18%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale1 {\n 10% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 18%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move2 {\n 20% {\n transform: translate(var(--x), var(--y));\n }\n\n 33%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move2 {\n 20% {\n transform: translate(var(--x), var(--y));\n }\n\n 33%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale2 {\n 14% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 22%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale2 {\n 14% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 22%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move3 {\n 24% {\n transform: translate(var(--x), var(--y));\n }\n\n 37%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move3 {\n 24% {\n transform: translate(var(--x), var(--y));\n }\n\n 37%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale3 {\n 18% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 26%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale3 {\n 18% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 26%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move4 {\n 28% {\n transform: translate(var(--x), var(--y));\n }\n\n 41%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move4 {\n 28% {\n transform: translate(var(--x), var(--y));\n }\n\n 41%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale4 {\n 22% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 30%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale4 {\n 22% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 30%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move5 {\n 32% {\n transform: translate(var(--x), var(--y));\n }\n\n 45%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move5 {\n 32% {\n transform: translate(var(--x), var(--y));\n }\n\n 45%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale5 {\n 26% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 34%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale5 {\n 26% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 34%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move6 {\n 36% {\n transform: translate(var(--x), var(--y));\n }\n\n 49%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move6 {\n 36% {\n transform: translate(var(--x), var(--y));\n }\n\n 49%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale6 {\n 30% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 38%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale6 {\n 30% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 38%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move7 {\n 40% {\n transform: translate(var(--x), var(--y));\n }\n\n 53%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move7 {\n 40% {\n transform: translate(var(--x), var(--y));\n }\n\n 53%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale7 {\n 34% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 42%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale7 {\n 34% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 42%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes ground {\n 0%, 65% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n\n 75%, 90% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);\n }\n\n 100% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n}\n\n@keyframes ground {\n 0%, 65% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n\n 75%, 90% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);\n }\n\n 100% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n}\n\n@-webkit-keyframes ground-shine {\n 0%, 70% {\n opacity: 0;\n }\n\n 75%, 87% {\n opacity: 0.2;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes ground-shine {\n 0%, 70% {\n opacity: 0;\n }\n\n 75%, 87% {\n opacity: 0.2;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n@-webkit-keyframes mask {\n 0%, 65% {\n opacity: 0;\n }\n\n 66%, 100% {\n opacity: 1;\n }\n}\n\n@keyframes mask {\n 0%, 65% {\n opacity: 0;\n }\n\n 66%, 100% {\n opacity: 1;\n }\n}\n "},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"088632","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":743,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".loader {\n width: 48px;\n height: 48px;\n display: block;\n margin: 15px auto;\n position: relative;\n color: #FFF;\n box-sizing: border-box;\n animation: rotation_19 1s linear infinite;\n}\n\n.loader::after,\n.loader::before {\n content: '';\n box-sizing: border-box;\n position: absolute;\n width: 24px;\n height: 24px;\n top: 0;\n background-color: #FFF;\n border-radius: 50%;\n animation: scale50 1s infinite ease-in-out;\n}\n\n.loader::before {\n top: auto;\n bottom: 0;\n background-color: #FF3D00;\n animation-delay: 0.5s;\n}\n\n@keyframes rotation_19 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes scale50 {\n 0%, 100% {\n transform: scale(0);\n }\n\n 50% {\n transform: scale(1);\n }\n} "},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"329cc8","snapshot":null,"tags":null,"title":"loader by RaspberryBee","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":275,"cssLen":414,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".loading svg polyline {\n fill: none;\n stroke-width: 3;\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n\n.loading svg polyline#back {\n fill: none;\n}\n\n.loading svg polyline#front {\n fill: none;\n stroke: #FF0000;\n stroke-dasharray: 48, 144;\n stroke-dashoffset: 192;\n animation: dash_682 1.4s linear infinite;\n}\n\n@keyframes dash_682 {\n 72.5% {\n opacity: 0;\n }\n\n to {\n stroke-dashoffset: 0;\n }\n}\n"}]}},"actionData":null,"errors":null}