{"loaderData":{"0":null,"0-3":{"total":7313,"projects":[{"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"},{"created":"2024-01-22T16:54:09.000Z","isPrivate":0,"projectId":"961fec","snapshot":null,"tags":null,"title":"loader by G4b413l","updated":"2024-01-22T16:54:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":135,"cssLen":1407,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".leap-frog {\n --uib-size: 40px;\n --uib-speed: 2s;\n --uib-color: rgb(37, 37, 149);\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: var(--uib-size);\n height: var(--uib-size);\n}\n\n.leap-frog__dot {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n height: 100%;\n}\n\n.leap-frog__dot::before {\n content: '';\n display: block;\n height: calc(var(--uib-size) * 0.22);\n width: calc(var(--uib-size) * 0.22);\n border-radius: 50%;\n background-color: var(--uib-color);\n will-change: transform;\n}\n\n.leap-frog__dot:nth-child(1) {\n animation: leapFrog var(--uib-speed) ease infinite;\n}\n\n.leap-frog__dot:nth-child(2) {\n transform: translateX(calc(var(--uib-size) * 0.4));\n animation: leapFrog var(--uib-speed) ease calc(var(--uib-speed) / -1.5)\n infinite;\n}\n\n.leap-frog__dot:nth-child(3) {\n transform: translateX(calc(var(--uib-size) * 0.8)) rotate(0deg);\n animation: leapFrog var(--uib-speed) ease calc(var(--uib-speed) / -3)\n infinite;\n}\n\n@keyframes leapFrog {\n 0% {\n transform: translateX(0) rotate(0deg);\n }\n\n 33.333% {\n transform: translateX(0) rotate(180deg);\n }\n\n 66.666% {\n transform: translateX(calc(var(--uib-size) * -0.4)) rotate(180deg);\n }\n\n 99.999% {\n transform: translateX(calc(var(--uib-size) * -0.8)) rotate(180deg);\n }\n\n 100% {\n transform: translateX(0) rotate(0deg);\n }\n}\n"},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"f1576f","snapshot":null,"tags":null,"title":"loader by escannord","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":479,"cssLen":523,"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","css":".loader {\n position: relative;\n}\n.load {\n display: inline-block;\n height: calc(var(--i) * 15);\n width: calc(var(--i) * 15);\n background-color: transparent;\n position: absolute;\n border: 5px rgb(47, 0, 255) solid;\n border-top: none;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n animation: turn 2s infinite linear;\n}\n\n.load:nth-child(odd) {\n animation: turn 2s infinite linear reverse;\n}\n\n@keyframes turn {\n 100% {\n transform: translate(-50%, -50%) rotateZ(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"01bb47","snapshot":null,"tags":null,"title":"loader by e-coders","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":227,"cssLen":2163,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"@keyframes ldio-4j5ay0xf86g {\n 0% {\n opacity: 1\n }\n\n 100% {\n opacity: 0\n }\n}\n\n.ldio-4j5ay0xf86g div {\n left: 94px;\n top: 48px;\n position: absolute;\n animation: ldio-4j5ay0xf86g linear 1s infinite;\n background: #fe718d;\n width: 12px;\n height: 24px;\n border-radius: 6px / 12px;\n transform-origin: 6px 52px;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(1) {\n transform: rotate(0deg);\n animation-delay: -0.9166666666666666s;\n background: #fe718d;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(2) {\n transform: rotate(30deg);\n animation-delay: -0.8333333333333334s;\n background: #fe718d;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(3) {\n transform: rotate(60deg);\n animation-delay: -0.75s;\n background: #fe718d;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(4) {\n transform: rotate(90deg);\n animation-delay: -0.6666666666666666s;\n background: #fe718d;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(5) {\n transform: rotate(120deg);\n animation-delay: -0.5833333333333334s;\n background: #fe718d;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(6) {\n transform: rotate(150deg);\n animation-delay: -0.5s;\n background: #fe718d;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(7) {\n transform: rotate(180deg);\n animation-delay: -0.4166666666666667s;\n background: #fe718d;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(8) {\n transform: rotate(210deg);\n animation-delay: -0.3333333333333333s;\n background: #fe718d;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(9) {\n transform: rotate(240deg);\n animation-delay: -0.25s;\n background: #fe718d;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(10) {\n transform: rotate(270deg);\n animation-delay: -0.16666666666666666s;\n background: #fe718d;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(11) {\n transform: rotate(300deg);\n animation-delay: -0.08333333333333333s;\n background: #fe718d;\n}\n\n.ldio-4j5ay0xf86g div:nth-child(12) {\n transform: rotate(330deg);\n animation-delay: 0s;\n background: #fe718d;\n}\n\n.loadingio-spinner-spinner-977el9wwy2v {\n width: 200px;\n height: 200px;\n display: inline-block;\n overflow: hidden;\n}\n\n.ldio-4j5ay0xf86g {\n width: 100%;\n height: 100%;\n position: relative;\n transform: translateZ(0) scale(1);\n backface-visibility: hidden;\n transform-origin: 0 0;\n /* see note above */\n}\n\n.ldio-4j5ay0xf86g div {\n box-sizing: content-box;\n}"},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"38c4b7","snapshot":null,"tags":null,"title":"loader by 0senno","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":92,"cssLen":1439,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".glitch {\n position: relative;\n font-size: 25px;\n font-weight: 700;\n line-height: 1.2;\n color: #fff;\n letter-spacing: 5px;\n z-index: 1;\n animation: shift 1s ease-in-out infinite alternate;\n}\n\n.glitch:before,\n.glitch:after {\n display: block;\n content: attr(data-glitch);\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0.8;\n}\n\n.glitch:before {\n animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;\n color: #ff8b00; /* Updated color */\n z-index: -1;\n}\n\n.glitch:after {\n animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both\n infinite;\n color: #57e500; /* Updated color */\n z-index: -2;\n}\n\n@keyframes glitch {\n 0% {\n transform: translate(0);\n }\n\n 20% {\n transform: translate(-3px, 3px);\n }\n\n 40% {\n transform: translate(-3px, -3px);\n }\n\n 60% {\n transform: translate(3px, 3px);\n }\n\n 80% {\n transform: translate(3px, -3px);\n }\n\n to {\n transform: translate(0);\n }\n}\n\n@keyframes shift {\n 0%,\n 40%,\n 44%,\n 58%,\n 61%,\n 65%,\n 69%,\n 73%,\n 100% {\n transform: skewX(0deg);\n }\n\n 41% {\n transform: skewX(10deg);\n }\n\n 42% {\n transform: skewX(-10deg);\n }\n\n 59% {\n transform: skewX(40deg) skewY(10deg);\n }\n\n 60% {\n transform: skewX(-40deg) skewY(-10deg);\n }\n\n 63% {\n transform: skewX(10deg) skewY(-5deg);\n }\n\n 70% {\n transform: skewX(-50deg) skewY(-20deg);\n }\n\n 71% {\n transform: skewX(10deg) skewY(-10deg);\n }\n}\n"}]}},"actionData":null,"errors":null}