{"loaderData":{"0":null,"0-3":{"total":7412,"projects":[{"created":"2024-01-22T16:54:20.000Z","isPrivate":0,"projectId":"d447ca","snapshot":null,"tags":null,"title":"loader by isfan4ik","updated":"2024-01-22T16:54:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":105,"cssLen":620,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n\n","css":".body {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.svg {\n position: absolute;\n width: 400px;\n fill: none;\n}\n\n.svg:nth-child(2) {\n filter: blur(40px);\n}\n\n.svg path {\n d: path(\"M0,25 C150,110 150, -60 300,25\");\n stroke: #ff0092;\n stroke-width: 50;\n stroke-linecap: round;\n transform: translate(50px,50%);\n animation: animate 2s ease-in-out infinite;\n}\n\n@keyframes animate {\n 0% {\n stroke: greenyellow;\n stroke: #ff0092;\n d: path(\"M0,25 C150,110 150, -60 300,25\");\n }\n\n 50% {\n stroke: dodgerblue;\n stroke: #00ff00;\n d: path(\"M0,25 C160,-50 140, 110 300,25\");\n }\n}"},{"created":"2024-01-22T16:54:20.000Z","isPrivate":0,"projectId":"7ab5f4","snapshot":null,"tags":null,"title":"loader by JaydipPrajapati1910","updated":"2024-01-22T16:54:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":185,"cssLen":1788,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%,-50%);\n animation: animate 8s linear infinite;\n}\n\n.pencil {\n width: 150px;\n background: #ffc334;\n border-top: 10px solid #ffd268;\n border-bottom: 10px solid #e3af38;\n overflow: hidden;\n transform-origin: top;\n}\n\n.pencil p {\n margin: 0;\n padding: 0;\n text-align: center;\n font-size: 12px;\n line-height: 15px;\n text-transform: uppercase;\n font-weight: bold;\n color: #d09200;\n}\n\n.pencil:before {\n content: '';\n position: absolute;\n left: -80px;\n top: 0;\n border-style: solid;\n border-color: transparent #e29663 transparent transparent;\n border-width: 17px 40px 18px;\n}\n\n.pencil:after {\n content: '';\n position: absolute;\n left: -80px;\n top: 0;\n border-style: solid;\n border-color: transparent #262626 transparent transparent;\n border-width: 17px 40px 18px;\n transform: scale(.3);\n}\n\n.top {\n position: absolute;\n top: 0;\n right: 0;\n height: 35px;\n width: 35px;\n background: #ccc;\n border-top: 10px solid #dedede;\n border-bottom: 10px solid #b9bfbf;\n}\n\n.top:before {\n content: '';\n position: absolute;\n top: -10px;\n right: -100%;\n width: 150%;\n height: 100%;\n background: #d76f6e;\n border-top: 10px solid #da8e8d;\n border-bottom: 10px solid #c85957;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n z-index: 2;\n}\n\n.stroke {\n position: absolute;\n top: 50%;\n left: calc(100% - 80px);\n transform: translate(-50%,-50%) rotate(45deg);\n border: 5px solid transparent;\n border-left-color: #000;\n border-top-color: #000;\n width: 220px;\n height: 220px;\n border-radius: 50%;\n z-index: 1;\n}\n\n@keyframes animate {\n 0% {\n transform: translate(-50%,-50%) rotate(360deg);\n }\n\n 100% {\n transform: translate(-50%,-50%) rotate(0deg);\n }\n}"},{"created":"2024-01-22T16:54:20.000Z","isPrivate":0,"projectId":"2193d2","snapshot":null,"tags":null,"title":"loader by AqFox","updated":"2024-01-22T16:54:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":833,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner {\n position: relative;\n width: 16px;\n height: 16px;\n}\n\n.spinner div {\n width: 100%;\n height: 100%;\n background-color: #004dff;\n border-radius: 50%;\n animation: spinner-4t3wzl 1.25s infinite backwards;\n}\n\n.spinner div:nth-child(1) {\n animation-delay: 0.15s;\n background-color: rgba(0,77,255,0.9);\n}\n\n.spinner div:nth-child(2) {\n animation-delay: 0.3s;\n background-color: rgba(0,77,255,0.8);\n}\n\n.spinner div:nth-child(3) {\n animation-delay: 0.45s;\n background-color: rgba(0,77,255,0.7);\n}\n\n.spinner div:nth-child(4) {\n animation-delay: 0.6s;\n background-color: rgba(0,77,255,0.6);\n}\n\n.spinner div:nth-child(5) {\n animation-delay: 0.75s;\n background-color: rgba(0,77,255,0.5);\n}\n\n@keyframes spinner-4t3wzl {\n 0% {\n transform: rotate(0deg) translateY(-200%);\n }\n\n 60%, 100% {\n transform: rotate(360deg) translateY(-200%);\n }\n}"},{"created":"2024-01-22T16:54:20.000Z","isPrivate":0,"projectId":"543242","snapshot":null,"tags":null,"title":"loader by vikas7754","updated":"2024-01-22T16:54:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":210,"cssLen":1164,"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","css":".glowing-cube {\n position: relative;\n width: 150px;\n height: 150px;\n transform-style: preserve-3d;\n animation: cube-rotate 4s linear infinite;\n}\n\n@keyframes cube-rotate {\n 0% {\n transform: rotatex(-30deg) rotatey(0deg);\n }\n\n 100% {\n transform: rotatex(-30deg) rotatey(360deg);\n }\n}\n\n.glowing-cube div {\n position: absolute;\n inset: 0;\n transform-style: preserve-3d;\n}\n\n.glowing-cube div span {\n position: absolute;\n inset: 0;\n background: linear-gradient(#151515, #3aff5e);\n transform: rotatey(calc(90deg * var(--i))) translatez(calc(150px / 2));\n}\n\n.glowing-cube .top {\n position: absolute;\n inset: 0;\n background: #222;\n transform: rotatex(90deg) translatez(calc(150px / 2));\n display: flex;\n justify-content: center;\n align-items: center;\n color: var(--top-font-color);\n font-size: 7rem;\n}\n\n.glowing-cube .top::before {\n content: '';\n position: absolute;\n background: #3aff5e;\n inset: 0;\n transform: translatez(calc(0px - calc(150px + 100px)));\n filter: blur(30px);\n box-shadow: 0 0 120px rgba(58, 134, 255, 0.2),\n 0 0 200px rgba(58, 134, 255, 0.4),\n 0 0 300px #00ff2f,\n 0 0 400px #51fd71,\n 0 0 500px #3aff5e;\n}"},{"created":"2024-01-22T16:54:20.000Z","isPrivate":0,"projectId":"edc47b","snapshot":null,"tags":null,"title":"loader by mrhyddenn","updated":"2024-01-22T16:54:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":761,"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 display: block;\n width: 44px;\n height: 44px;\n font-size: 15px;\n box-shadow: 9px 9px 33px #d1d1d1, -9px -9px 33px #ffffff;\n}\n\n.loader::before,\n.loader::after {\n content: '';\n position: absolute;\n display: block;\n}\n\n.loader_bubble::before {\n top: 10px;\n left: 10px;\n width: 10px;\n height: 10px;\n background: #fff;\n border-radius: 50%;\n}\n\n.loader_bubble {\n background: linear-gradient(180deg, rgb(0, 91, 228) 10%, rgb(75, 127, 240) 100%);\n border-radius: 50%;\n transform-origin: 50% 50%;\n animation: bubble7234 1200ms cubic-bezier(0.645, 0.045, 0.355, 1) infinite;\n}\n\n@keyframes bubble7234 {\n 0% {\n transform: translate3d(0,0,0) rotate(0);\n }\n\n 100% {\n transform: translate3d(0,0,0) rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"b7233f","snapshot":null,"tags":null,"title":"loader by fanishah","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1666,"cssLen":2738,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".loader {\n display: block;\n width: 150px;\n height: auto;\n}\n\n.loader_body,\n .loader_front,\n .loader_handlebars,\n .loader_pedals,\n .loader_pedals-spin,\n .loader_seat,\n .loader_spokes,\n .loader_spokes-spin,\n .loader_tire {\n animation: bikeBody 3s ease-in-out infinite;\n stroke: var(--primary);\n transition: stroke var(--trans-dur);\n}\n\n.loader_front {\n animation-name: bikeFront;\n}\n\n.loader_handlebars {\n animation-name: bikeHandlebars;\n}\n\n.loader_pedals {\n animation-name: bikePedals;\n}\n\n.loader_pedals-spin {\n animation-name: bikePedalsSpin;\n}\n\n.loader_seat {\n animation-name: bikeSeat;\n}\n\n.loader_spokes,\n .loader_tire {\n stroke: currentColor;\n}\n\n.loader_spokes {\n animation-name: bikeSpokes;\n}\n\n.loader_spokes-spin {\n animation-name: bikeSpokesSpin;\n}\n\n.loader_tire {\n animation-name: bikeTire;\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\n /* Animations */\n@keyframes bikeBody {\n from {\n stroke-dashoffset: 79;\n }\n\n 33%,\n 67% {\n stroke-dashoffset: 0;\n }\n\n to {\n stroke-dashoffset: -79;\n }\n}\n\n@keyframes bikeFront {\n from {\n stroke-dashoffset: 19;\n }\n\n 33%,\n 67% {\n stroke-dashoffset: 0;\n }\n\n to {\n stroke-dashoffset: -19;\n }\n}\n\n@keyframes bikeHandlebars {\n from {\n stroke-dashoffset: 10;\n }\n\n 33%,\n 67% {\n stroke-dashoffset: 0;\n }\n\n to {\n stroke-dashoffset: -10;\n }\n}\n\n@keyframes bikePedals {\n from {\n animation-timing-function: ease-in;\n stroke-dashoffset: -25.133;\n }\n\n 33%,\n 67% {\n animation-timing-function: ease-out;\n stroke-dashoffset: -21.991;\n }\n\n to {\n stroke-dashoffset: -25.133;\n }\n}\n\n@keyframes bikePedalsSpin {\n from {\n transform: rotate(0.1875turn);\n }\n\n to {\n transform: rotate(3.1875turn);\n }\n}\n\n@keyframes bikeSeat {\n from {\n stroke-dashoffset: 5;\n }\n\n 33%,\n 67% {\n stroke-dashoffset: 0;\n }\n\n to {\n stroke-dashoffset: -5;\n }\n}\n\n@keyframes bikeSpokes {\n from {\n animation-timing-function: ease-in;\n stroke-dashoffset: -31.416;\n }\n\n 33%,\n 67% {\n animation-timing-function: ease-out;\n stroke-dashoffset: -23.562;\n }\n\n to {\n stroke-dashoffset: -31.416;\n }\n}\n\n@keyframes bikeSpokesSpin {\n from {\n transform: rotate(0);\n }\n\n to {\n transform: rotate(3turn);\n }\n}\n\n@keyframes bikeTire {\n from {\n animation-timing-function: ease-in;\n stroke-dashoffset: 56.549;\n transform: rotate(0);\n }\n\n 33% {\n stroke-dashoffset: 0;\n transform: rotate(0.33turn);\n }\n\n 67% {\n animation-timing-function: ease-out;\n stroke-dashoffset: 0;\n transform: rotate(0.67turn);\n }\n\n to {\n stroke-dashoffset: -56.549;\n transform: rotate(1turn);\n }\n}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"21b68e","snapshot":null,"tags":null,"title":"loader by doniaskima","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":957,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"/* HTML:

*/\n.loader {\n height: 60px;\n aspect-ratio: 1;\n position: relative;\n}\n\n.loader::before,\n.loader::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n transform-origin: bottom;\n}\n\n.loader::after {\n background: radial-gradient(at 75% 15%,#fffb,#0000 35%),\n radial-gradient(at 80% 40%,#0000,#0008),\n radial-gradient(circle 5px,#fff 94%,#0000),\n radial-gradient(circle 10px,#000 94%,#0000),\n linear-gradient(#F93318 0 0) top /100% calc(50% - 5px),\n linear-gradient(#fff 0 0) bottom/100% calc(50% - 5px)\n #000;\n background-repeat: no-repeat;\n animation: l20 1s infinite cubic-bezier(0.5,120,0.5,-120);\n}\n\n.loader::before {\n background: #ddd;\n filter: blur(8px);\n transform: scaleY(0.4) translate(-13px, 0px);\n}\n\n@keyframes l20 {\n \n 30%,70% {\n transform: rotate(0deg)\n }\n\n 49.99% {\n transform: rotate(0.2deg)\n }\n\n 50% {\n transform: rotate(-0.2deg)\n }\n}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"e92aff","snapshot":null,"tags":null,"title":"loader by Fadhilmagass","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":188,"cssLen":1260,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: 100%;\n}\n\n.dot {\n display: inline-block;\n width: 10px;\n height: 10px;\n margin-right: 6px;\n border-radius: 50%;\n -webkit-animation: dot-pulse2 1.5s ease-in-out infinite;\n animation: dot-pulse2 1.5s ease-in-out infinite;\n}\n\n.dot-1 {\n background-color: #4285f4;\n -webkit-animation-delay: 0s;\n animation-delay: 0s;\n}\n\n.dot-2 {\n background-color: #34a853;\n -webkit-animation-delay: 0.3s;\n animation-delay: 0.3s;\n}\n\n.dot-3 {\n background-color: #fbbc05;\n -webkit-animation-delay: 0.6s;\n animation-delay: 0.6s;\n}\n\n.dot-4 {\n background-color: #ea4335;\n -webkit-animation-delay: 0.9s;\n animation-delay: 0.9s;\n}\n\n.dot-5 {\n background-color: #4285f4;\n -webkit-animation-delay: 1.2s;\n animation-delay: 1.2s;\n}\n\n@keyframes dot-pulse2 {\n 0% {\n -webkit-transform: scale(0.5);\n transform: scale(0.5);\n opacity: 0.5;\n }\n\n 50% {\n -webkit-transform: scale(1);\n transform: scale(1);\n opacity: 1;\n }\n\n 100% {\n -webkit-transform: scale(0.5);\n transform: scale(0.5);\n opacity: 0.5;\n }\n}\n"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"3a4fdb","snapshot":null,"tags":null,"title":"loader by 0senno","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":547,"cssLen":643,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \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 stroke: #ff4d5033;\n}\n\n.loading svg polyline#front {\n fill: none;\n stroke: #00ffff;\n stroke-dasharray: 48, 144;\n stroke-dashoffset: 192;\n animation: dash_682 2s linear infinite;\n animation-delay: 0s;\n}\n\n.loading svg polyline#front2 {\n fill: none;\n stroke: #00ffff;\n stroke-dasharray: 48, 144;\n stroke-dashoffset: 192;\n animation: dash_682 2s linear infinite;\n animation-delay: 1s;\n}\n\n@keyframes dash_682 {\n 72.5% {\n opacity: 0;\n }\n\n to {\n stroke-dashoffset: 0;\n }\n}\n"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"a1c43d","snapshot":null,"tags":null,"title":"loader by Satwinder04","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":179,"cssLen":634,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader3 {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.circle1 {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n margin: 0 10px;\n background-color: #333;\n animation: circle1 1s ease-in-out infinite;\n}\n\n.circle1:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.circle1:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n.circle1:nth-child(4) {\n animation-delay: 0.6s;\n}\n\n.circle1:nth-child(5) {\n animation-delay: 0.8s;\n}\n\n@keyframes circle1 {\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n\n 50% {\n transform: scale(1.5);\n opacity: 0.5;\n }\n\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n}\n"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"aabf26","snapshot":null,"tags":null,"title":"loader by BUGHERE","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":919,"cssLen":3174,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n display: flex;\n position: relative;\n justify-items: center;\n align-items: center;\n gap: 1rem;\n height: 55px;\n width: 200px;\n overflow: hidden;\n}\n\n.container {\n width: 100%;\n display: flex;\n flex-direction: column;\n height: 200px;\n position: relative;\n align-items: center;\n}\n\n.carousel {\n display: flex;\n gap: 1rem;\n flex-direction: column;\n position: absolute;\n width: 100%;\n transform-origin: center;\n animation-delay: 2s;\n}\n\n.loader .container:nth-child(3) {\n justify-content: flex-start;\n justify-items: flex-start;\n animation: scroll-up 4s infinite ease-in-out;\n animation-delay: 3s;\n}\n\n.loader .container:nth-child(2) {\n justify-content: flex-end;\n justify-items: flex-end;\n animation: scroll-down 4s infinite ease-in-out;\n animation-delay: 3s;\n}\n\n.loader .container:nth-child(1) {\n justify-content: flex-end;\n justify-items: flex-end;\n animation: scroll-down 3s infinite ease-in-out;\n animation-delay: 3s;\n}\n\n.love {\n background: black;\n display: flex;\n width: 30px;\n height: 30px;\n position: relative;\n align-items: center;\n justify-content: center;\n left: 8px;\n margin: 0.8rem 4px;\n transform: rotate(45deg);\n animation-delay: 2s;\n}\n\n.love::before,\n.love::after {\n content: \"\";\n position: absolute;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background: darkred;\n}\n\n.love::before {\n left: -16px;\n}\n\n.love::after {\n top: -16px;\n}\n\n.death {\n display: flex;\n width: 100%;\n height: 55px;\n position: relative;\n align-items: center;\n justify-content: center;\n animation: rotation 3s infinite ease-in-out;\n animation-delay: 1s;\n}\n\n.death:after {\n content: \"\";\n height: 63px;\n position: absolute;\n border-left: 12px solid black;\n transform: rotate(45deg);\n border-radius: 8px;\n top: -4px;\n}\n\n.death:before {\n content: \"\";\n height: 60px;\n position: absolute;\n border-left: 12px solid darkred;\n transform: rotate(-45deg);\n}\n\n.loader:hover {\n animation: none;\n}\n\n.robots {\n display: flex;\n width: 100%;\n height: 55px;\n justify-content: space-between;\n background-color: black;\n border-radius: 0 8px 8px;\n padding: 8px;\n animation-delay: 5s;\n}\n\n.robots::after {\n content: \"\";\n width: 12px;\n height: 12px;\n top: 0;\n left: 0;\n background-color: darkred;\n border-radius: 50%;\n animation-delay: 2s;\n animation: blink 0.5s 2 forwards;\n}\n\n.robots::before {\n content: \"\";\n width: 12px;\n height: 12px;\n top: 0;\n left: 0;\n background-color: darkred;\n border-radius: 50%;\n animation-delay: 2s;\n animation: blink 0.5s 2 forwards;\n}\n\n@keyframes scroll-up {\n 0% {\n transform: translateY(0);\n filter: blur(0);\n }\n\n 30% {\n transform: translateY(-150%);\n filter: blur(10px);\n }\n\n 60% {\n transform: translateY(0);\n filter: blur(0px);\n }\n}\n\n@keyframes scroll-down {\n 0% {\n transform: translateY(0);\n filter: blur(0);\n }\n\n 30% {\n transform: translateY(150%);\n filter: blur(10px);\n }\n\n 60% {\n transform: translateY(0);\n filter: blur(0px);\n }\n}\n\n@keyframes rotation {\n 20%,\n 100% {\n transform: rotate(180deg);\n }\n}\n\n@keyframes blink {\n 0% {\n height: 0;\n }\n\n 20% {\n height: 12px;\n }\n\n 100% {\n height: 12px;\n }\n}\n"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"330065","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":232,"cssLen":2726,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".cube {\n top: -100px;\n margin: 200px auto 0;\n width: 100px;\n height: 100Px;\n position: relative;\n transform-style: preserve-3d;\n animation: spin 3s infinite cubic-bezier(0.16, 0.61, 0.49, 0.91);\n}\n\n.face {\n position: absolute;\n width: 100%;\n height: 100%;\n background: rgb(67, 191, 207);\n border: 2px solid #fff;\n border-radius: 5px;\n box-shadow: 0 0 15px #fff;\n}\n\n.top {\n transform: rotateX(90deg) translateZ(50px);\n animation: shift-top 3s infinite ease-out;\n}\n\n.bottom {\n transform: rotateX(-90deg) translateZ(50px);\n animation: shift-bottom 3s infinite ease-out;\n}\n\n.right {\n transform: rotateY(90deg) translateZ(50px);\n animation: shift-right 3s infinite ease-out;\n}\n\n.left {\n transform: rotateY(-90deg) translateZ(50px);\n animation: shift-left 3s infinite ease-out;\n}\n\n.front {\n transform: translateZ(50px);\n animation: shift-front 3s infinite ease-out;\n}\n\n.back {\n transform: rotateY(-180deg) translateZ(50px);\n animation: shift-back 3s infinite ease-out;\n}\n\n@keyframes spin {\n 33% {\n transform: rotateX(-36deg) rotateY(-405deg);\n }\n\n 100% {\n transform: rotateX(-36deg) rotateY(-405deg);\n }\n}\n\n@keyframes shift-top {\n 33% {\n transform: rotateX(90deg) translateZ(50px);\n }\n\n 50% {\n transform: rotateX(90deg) translateZ(100px);\n }\n\n 60% {\n transform: rotateX(90deg) translateZ(100px);\n }\n\n 75% {\n transform: rotateX(90deg) translateZ(50px);\n }\n}\n\n@keyframes shift-bottom {\n 33% {\n transform: rotateX(-90deg) translateZ(50px);\n }\n\n 50% {\n transform: rotateX(-90deg) translateZ(100px);\n }\n\n 60% {\n transform: rotateX(-90deg) translateZ(100px);\n }\n\n 75% {\n transform: rotateX(-90deg) translateZ(50px);\n }\n}\n\n@keyframes shift-right {\n 33% {\n transform: rotateY(90deg) translateZ(50px);\n }\n\n 50% {\n transform: rotateY(90deg) translateZ(100px);\n }\n\n 60% {\n transform: rotateY(90deg) translateZ(100px);\n }\n\n 75% {\n transform: rotateY(90deg) translateZ(50px);\n }\n}\n\n@keyframes shift-left {\n 33% {\n transform: rotateY(-90deg) translateZ(50px);\n }\n\n 50% {\n transform: rotateY(-90deg) translateZ(100px);\n }\n\n 60% {\n transform: rotateY(-90deg) translateZ(100px);\n }\n\n 75% {\n transform: rotateY(-90deg) translateZ(50px);\n }\n}\n\n@keyframes shift-front {\n 33% {\n transform: translateZ(50px);\n }\n\n 50% {\n transform: translateZ(100px);\n }\n\n 60% {\n transform: translateZ(100px);\n }\n\n 75% {\n transform: translateZ(50px);\n }\n}\n\n@keyframes shift-back {\n 33% {\n transform: rotateY(-180deg) translateZ(50px);\n }\n\n 50% {\n transform: rotateY(-180deg) translateZ(100px);\n }\n\n 60% {\n transform: rotateY(-180deg) translateZ(100px);\n }\n\n 75% {\n transform: rotateY(-180deg) translateZ(50px);\n }\n}"}]}},"actionData":null,"errors":null}