{"loaderData":{"0":null,"0-3":{"total":7413,"projects":[{"created":"2024-01-22T16:54:10.000Z","isPrivate":0,"projectId":"de4b18","snapshot":null,"tags":null,"title":"loader by NlghtM4re","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1011,"cssLen":800,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".container {\n position: absolute;\n top: 40%;\n height: 90%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.item {\n position: absolute;\n background-color: transparent;\n width: calc(var(--i) * 2.5vmin);\n aspect-ratio: 1;\n border-radius: 50%;\n border: .9vmin solid rgb(0, 200, 255);\n transform-style: preserve-3d;\n transform: rotateX(70deg) translateZ(50px);\n animation: my-move 3s ease-in-out calc(var(--i) * 0.08s) infinite;\n box-shadow: 0px 0px 15px rgb(124, 124, 124),\n inset 0px 0px 15px rgb(124, 124, 124);\n}\n\n@keyframes my-move {\n 0%,\n 100% {\n transform: rotateX(70deg) translateZ(50px) translateY(0px);\n filter: hue-rotate(0deg);\n }\n\n 50% {\n transform: rotateX(70deg) translateZ(50px) translateY(-50vmin);\n filter: hue-rotate(180deg);\n }\n}"},{"created":"2024-01-22T16:54:09.000Z","isPrivate":0,"projectId":"cd9274","snapshot":null,"tags":null,"title":"loader by vinodjangid07","updated":"2024-01-22T16:54:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1605,"cssLen":666,"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\n \n \n \n \n \n

\n","css":".loader {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.book-wrapper {\n width: 150px;\n height: fit-content;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n position: relative;\n}\n.book {\n width: 100%;\n height: auto;\n filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.137));\n}\n.book-wrapper .book-page {\n width: 50%;\n height: auto;\n position: absolute;\n animation: paging 0.15s linear infinite;\n transform-origin: left;\n}\n@keyframes paging {\n 0% {\n transform: rotateY(0deg) skewY(0deg);\n }\n 50% {\n transform: rotateY(90deg) skewY(-20deg);\n }\n 100% {\n transform: rotateY(180deg) skewY(0deg);\n }\n}\n"},{"created":"2024-01-22T16:54:09.000Z","isPrivate":0,"projectId":"13d17e","snapshot":null,"tags":null,"title":"loader by Yaya12085","updated":"2024-01-22T16:54:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":281,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n height: 40px;\n width: 40px;\n border-radius: 50%;\n box-shadow: inset 0 0 0 #0a7cbe;\n animation: load 2s linear infinite alternate;\n}\n\n@keyframes load {\n 0% {\n box-shadow: inset -20px 40px 0 #0a7cbe;\n }\n\n 100% {\n box-shadow: inset 20px -40px 0 #0a7cbe;\n }\n}"},{"created":"2024-01-22T16:54:09.000Z","isPrivate":0,"projectId":"56a0b9","snapshot":null,"tags":null,"title":"loader by radwakhalil22","updated":"2024-01-22T16:54:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":523,"cssLen":2175,"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 ","css":".cube {\n position: relative;\n height: 100px;\n width: 100px;\n transform-style: preserve-3d;\n animation: animate 4s linear infinite;\n}\n\n@keyframes animate {\n 0% {\n transform: rotateX(-30deg) rotateY(0deg);\n }\n\n 100% {\n transform: rotateX(-30deg) rotateY(360deg);\n }\n}\n\n.cube .div {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n}\n\n.cube .div .span {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform: rotateY(calc(90deg * var(--i))) translateZ(50px);\n background-image: linear-gradient(\n -45deg,\n #000000,\n #13273f,\n #0d1729,\n #6a6a8d);\n background-size: 1200% 1200%;\n animation: AnimationName 30s ease infinite;\n display: flex;\n justify-content: center;\n align-items: center;\n transform-style: preserve-3d;\n}\n\n.cube .div .span p {\n position: absolute;\n font-size: 1em;\n color: white;\n transform: translateZ(20px);\n}\n\n.cube .div .span p:nth-child(1) {\n transform: translateZ(0) translateY(20px);\n color: rgba(0,0,0,0.1);\n filter: blur(2px);\n}\n\n@keyframes AnimationName {\n 0% {\n background-position: 0% 50%;\n }\n\n 50% {\n background-position: 100% 50%;\n }\n\n 100% {\n background-position: 0% 50%;\n }\n}\n\n.top {\n position: absolute;\n top: 0;\n left: 0;\n width: 300px;\n height: 300px;\n background-image: linear-gradient(\n -45deg,\n #000000,\n #13273f,\n #0d1729,\n #6a6a8d);\n transform: rotateX(90deg) translateZ(50px);\n background-size: 1200% 1200%;\n animation: AnimationName 30s ease infinite;\n}\n\n.top::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100px;\n height: 100px;\n background-image: linear-gradient(\n -45deg,\n #000000,\n #0d0d0e,\n #030303,\n #000000);\n background-size: 1200% 1200%;\n animation: AnimationName 30s ease infinite;\n box-shadow: 0 0 120px #3d413e,0 0 120px #302f2f,0 0 120px #413f3f;\n transition: box-shadow 3s;\n transform: translateZ(-200px);\n filter: blur(40px);\n}\n\n@keyframes AnimationName2 {\n 0% {\n background-position: 0% 50%;\n }\n\n 50% {\n background-position: 100% 50%;\n }\n\n 100% {\n background-position: 0% 50%;\n }\n}\n\n"},{"created":"2024-01-22T16:54:09.000Z","isPrivate":0,"projectId":"7379cd","snapshot":null,"tags":null,"title":"loader by ibrahimjlidi","updated":"2024-01-22T16:54:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":960,"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 margin: auto;\n position: relative;\n}\n\n.loader:before {\n content: '';\n width: 48px;\n height: 5px;\n background: #253050;\n position: absolute;\n top: 60px;\n left: 0;\n border-radius: 50%;\n animation: shadow324 0.5s linear infinite;\n}\n\n.loader:after {\n content: '';\n width: 100%;\n height: 100%;\n background: #044080;\n position: absolute;\n top: 0;\n left: 0;\n border-radius: 40px;\n animation: jump7456 0.5s linear infinite;\n}\n\n@keyframes jump7456 {\n 15% {\n border-bottom-right-radius: px;\n }\n\n 25% {\n transform: translateY(15px) rotate(22.5deg);\n }\n\n 50% {\n transform: translateY(17px) scale(1, .9) rotate(45deg);\n border-bottom-right-radius: 40px;\n }\n\n 75% {\n transform: translateY(4px) rotate(50.5deg);\n }\n\n 100% {\n transform: translateY(4) rotate(90deg);\n }\n}\n\n@keyframes shadow324 {\n\n 0%,\n 100% {\n transform: scale(2, 2);\n }\n\n 50% {\n transform: scale(2, );\n }\n}"},{"created":"2024-01-22T16:54:09.000Z","isPrivate":0,"projectId":"046ec7","snapshot":null,"tags":null,"title":"loader by carlosepcc","updated":"2024-01-22T16:54:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":163,"cssLen":684,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".flex {\n display: flex\n}\n\n.aspect-square {\n aspect-ratio: 1 / 1\n}\n\n.w-8 {\n width: 2rem\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg)\n }\n}\n\n.animate-spin {\n animation: spin 1s linear infinite\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-center {\n justify-content: center\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.border-t-2 {\n border-top-width: 2px\n}\n\n.border-yellow-500 {\n --tw-border-opacity: 1;\n border-color: rgb(234 179 8 / var(--tw-border-opacity))\n}\n\n.bg-yellow-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(253 224 71 / var(--tw-bg-opacity))\n}\n\n.text-yellow-700 {\n --tw-text-opacity: 1;\n color: rgb(161 98 7 / var(--tw-text-opacity))\n}"},{"created":"2024-01-22T16:54:09.000Z","isPrivate":0,"projectId":"e54880","snapshot":null,"tags":null,"title":"loader by PriyanshuGupta28","updated":"2024-01-22T16:54:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":267,"cssLen":1104,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

\n ","css":".loader {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n}\n\n.cube {\n width: 100px;\n height: 100px;\n position: relative;\n transform-style: preserve-3d;\n animation: spin 2s infinite linear;\n}\n\n.side {\n position: absolute;\n width: 100px;\n height: 100px;\n opacity: 0.8;\n}\n\n.front {\n transform: translateZ(50px);\n background: linear-gradient(45deg, #ff4e50, #f9d423);\n}\n\n.back {\n transform: translateZ(-50px);\n background: linear-gradient(45deg, #40e0d0, #ff8c00);\n}\n\n.top {\n transform: rotateX(90deg) translateZ(50px);\n background: linear-gradient(45deg, #800080, #00bfff);\n}\n\n.bottom {\n transform: rotateX(90deg) translateZ(-50px);\n background: linear-gradient(45deg, #008000, #ffff00);\n}\n\n.left {\n transform: rotateY(90deg) translateZ(50px);\n background: linear-gradient(45deg, #0000ff, #ff1493);\n}\n\n.right {\n transform: rotateY(90deg) translateZ(-50px);\n background: linear-gradient(45deg, #00ffff, #ff0000);\n}\n\n@keyframes spin {\n 0% {\n transform: rotateX(0deg) rotateY(0deg);\n }\n\n 100% {\n transform: rotateX(360deg) rotateY(360deg);\n }\n}"},{"created":"2024-01-22T16:54:09.000Z","isPrivate":0,"projectId":"144bf7","snapshot":null,"tags":null,"title":"loader by Deri-Kurniawan","updated":"2024-01-22T16:54:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":259,"cssLen":837,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n perspective: 600px;\n width: 100px;\n height: 100px;\n}\n\n.cube {\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n animation: rotate 4s linear infinite;\n}\n\n.face {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0.8;\n border: 0.5px solid #fff;\n}\n\n.face:nth-child(1) {\n transform: rotateX(90deg) translateZ(50px);\n}\n\n.face:nth-child(2) {\n transform: rotateX(-90deg) translateZ(50px);\n}\n\n.face:nth-child(3) {\n transform: translateZ(50px);\n}\n\n.face:nth-child(4) {\n transform: rotateY(90deg) translateZ(50px);\n}\n\n.face:nth-child(5) {\n transform: rotateY(-90deg) translateZ(50px);\n}\n\n.face:nth-child(6) {\n transform: rotateY(180deg) translateZ(50px);\n}\n\n@keyframes rotate {\n 0% {\n transform: rotateX(0deg) rotateY(0deg);\n }\n\n 100% {\n transform: rotateX(360deg) rotateY(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:09.000Z","isPrivate":0,"projectId":"869751","snapshot":null,"tags":null,"title":"loader by Smit-Prajapati","updated":"2024-01-22T16:54:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":92,"cssLen":697,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n height: 2px;\n width: 300px;\n background: rgb(44, 44, 44);\n position: relative;\n overflow: hidden;\n}\n.loader .black_overlay {\n background: linear-gradient(\n 87deg,\n rgb(0, 0, 0) 0%,\n rgba(0, 0, 0, 0.14) 30%,\n rgba(0, 0, 0, 0.14) 70%,\n rgb(0, 0, 0) 100%\n );\n position: absolute;\n inset: 0px;\n}\n.loader .light {\n width: 70px;\n height: 100%;\n position: absolute;\n left: -20%;\n top: 0px;\n background: linear-gradient(\n 87deg,\n rgba(0, 0, 0, 0) 0%,\n rgb(0, 204, 255) 40%,\n rgb(0, 204, 255) 60%,\n rgba(0, 0, 0, 0) 100%\n );\n animation: light 2s infinite ease-in-out;\n}\n\n@keyframes light {\n from {\n left: -30%;\n }\n to {\n left: 100%;\n }\n}\n"},{"created":"2024-01-22T16:54:09.000Z","isPrivate":0,"projectId":"59566a","snapshot":null,"tags":null,"title":"loader by ercnersoy","updated":"2024-01-22T16:54:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2253,"cssLen":249,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".bulb svg {\n display: block;\n height: 90px;\n transform-origin: center top;\n animation: swing_31 1.3s ease-in-out infinite alternate;\n}\n\n@keyframes swing_31 {\n 0% {\n transform: rotate(18deg);\n }\n\n 100% {\n transform: rotate(-18deg);\n }\n}"},{"created":"2024-01-22T16:54:09.000Z","isPrivate":0,"projectId":"71065d","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":668,"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 border: 2px solid #FFF;\n border-radius: 50%;\n display: inline-block;\n position: relative;\n box-sizing: border-box;\n animation: rotation_35 1s linear infinite;\n}\n\n.loader::after,\n.loader::before {\n content: '';\n box-sizing: border-box;\n position: absolute;\n left: 0;\n top: 0;\n background: greenyellow;\n width: 6px;\n height: 6px;\n transform: translate(150%, 150%);\n border-radius: 50%;\n}\n\n.loader::before {\n left: auto;\n top: auto;\n right: 0;\n bottom: 0;\n transform: translate(-150%, -150%);\n}\n\n@keyframes rotation_35 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n} "},{"created":"2024-01-22T16:54:09.000Z","isPrivate":0,"projectId":"d7b1e6","snapshot":null,"tags":null,"title":"loader by Yogeshawghad0477","updated":"2024-01-22T16:54:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":489,"cssLen":1508,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":"#div1 {\n width: 100%;\n background: transparent;\n\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n@keyframes animateHeight {\n 0% {\n height: 0px;\n }\n 50% {\n height: 50px;\n }\n}\n\n#l,\n#m {\n width: 150px;\n height: 70px;\n position: relative;\n overflow: hidden;\n background-color: black;\n border-radius: 0px 200px 0px 200px;\n -moz-border-radius: 0px 200px 0px 200px;\n -webkit-border-radius: 0px 200px 0px 200px;\n border: 1px solid transparent;\n animation: animateHeight 1s infinite alternate-reverse;\n}\n#m {\n border-radius: 200px 0px 200px 0px;\n -moz-border-radius: 200px 0px 200px 0px;\n -webkit-border-radius: 200px 0px 200px 0px;\n}\n.pupil,\n.pupl2,\n.pupil3,\n.pupil4,\n.p5 {\n overflow: hidden;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: rgba(0, 0, 0, 0.158);\n}\n.pupil3,\n.pupil4 {\n width: 18px;\n height: 3.5px;\n overflow: visible;\n}\n\n.pupil {\n width: 60px;\n height: 60px;\n background: linear-gradient(\n rgb(255, 105, 105),\n rgb(129, 249, 129),\n rgb(96, 96, 255),\n rgb(71, 71, 71)\n );\n}\n.pupl2 {\n width: 25px;\n height: 25px;\n background: linear-gradient(\n rgb(255, 2, 2),\n rgb(0, 255, 0),\n rgb(0, 0, 255),\n rgb(0, 0, 0)\n );\n}\n.p5 {\n width: 42px;\n height: 42px;\n background: linear-gradient(\n rgb(252, 71, 71),\n rgb(70, 249, 70),\n rgb(63, 63, 254),\n rgb(48, 47, 47)\n );\n}\n.pupil3 {\n width: 5px;\n height: 18px;\n}\n"}]}},"actionData":null,"errors":null}