{"loaderData":{"0":null,"0-3":{"total":7498,"projects":[{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"43cf3a","snapshot":null,"tags":null,"title":"loader by shadowfax29","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":574,"cssLen":289,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n\n

","css":".svgbox {\n --blue: rgb(148, 66, 63);\n stroke: var(--blue);\n stroke-width: 5;\n fill: none;\n stroke-dasharray: 50, 14;\n stroke-dashoffset: 192;\n animation: dash_682 1.4s linear infinite;\n}\n\n@keyframes dash_682 {\n 72.5% {\n opacity: 1;\n }\n\n to {\n stroke-dashoffset: 1;\n }\n}\n\n\n"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"bf7096","snapshot":null,"tags":null,"title":"loader by andrew-demchenk0","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":207,"cssLen":1771,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader-wrapper {\n position: relative;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n margin: auto;\n}\n\n.loader-wrapper .packman::before {\n content: '';\n position: absolute;\n width: 50px;\n height: 25px;\n background-color: #EFF107;\n border-radius: 100px 100px 0 0;\n transform: translate(-50%, -50%);\n animation: pac-top 0.5s linear infinite;\n transform-origin: center bottom;\n}\n\n.loader-wrapper .packman::after {\n content: '';\n position: absolute;\n width: 50px;\n height: 25px;\n background-color: #EFF107;\n border-radius: 0 0 100px 100px;\n transform: translate(-50%, 50%);\n animation: pac-bot 0.5s linear infinite;\n transform-origin: center top;\n}\n\n@keyframes pac-top {\n 0% {\n transform: translate(-50%, -50%) rotate(0)\n }\n\n 50% {\n transform: translate(-50%, -50%) rotate(-30deg)\n }\n\n 100% {\n transform: translate(-50%, -50%) rotate(0)\n }\n}\n\n@keyframes pac-bot {\n 0% {\n transform: translate(-50%, 50%) rotate(0)\n }\n\n 50% {\n transform: translate(-50%, 50%) rotate(30deg)\n }\n\n 100% {\n transform: translate(-50%, 50%) rotate(0)\n }\n}\n\n.dots .dot {\n position: absolute;\n z-index: -1;\n top: 8px;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: #fff;\n}\n\n.dots .dot:nth-child(1) {\n left: 90px;\n animation: dot-stage1 0.5s infinite;\n}\n\n.dots .dot:nth-child(2) {\n left: 60px;\n animation: dot-stage1 0.5s infinite;\n}\n\n.dots .dot:nth-child(3) {\n left: 30px;\n animation: dot-stage1 0.5s infinite;\n}\n\n.dots .dot:nth-child(4) {\n left: 10px;\n animation: dot-stage2 0.5s infinite;\n}\n\n@keyframes dot-stage1 {\n 0% {\n transform: translate(0, 0);\n }\n\n 100% {\n transform: translate(-24px, 0);\n }\n}\n\n@keyframes dot-stage2 {\n 0% {\n transform: scale(1);\n }\n\n 5%, 100% {\n transform: scale(0);\n }\n}\n\n\n"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"7dec16","snapshot":null,"tags":null,"title":"loader by tilakjain123","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":60,"cssLen":461,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

","css":".loader {\n position: relative;\n width: 64px;\n height: 64px;\n}\n\n.loader div {\n position: absolute;\n border: 4px solid #454ade;\n border-radius: 50%;\n animation: loader8435 1s ease-out infinite;\n}\n\n.loader div:nth-child(2) {\n animation-delay: -0.5s;\n}\n\n@keyframes loader8435 {\n 0% {\n top: 32px;\n left: 32px;\n width: 0;\n height: 0;\n opacity: 1;\n }\n\n 100% {\n top: 0;\n left: 0;\n width: 64px;\n height: 64px;\n opacity: 0;\n }\n}\n"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"f8d76b","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":142,"cssLen":677,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".container {\n width: 80px;\n margin: 100px auto;\n}\n\n.block {\n position: relative;\n box-sizing: border-box;\n float: left;\n margin: 0 10px 10px 0;\n width: 12px;\n height: 12px;\n border-radius: 3px;\n background: #FFF;\n}\n\n.block:nth-child(4n+1) {\n animation: wave_23 2s ease .0s infinite;\n}\n\n.block:nth-child(4n+2) {\n animation: wave_23 2s ease .2s infinite;\n}\n\n.block:nth-child(4n+3) {\n animation: wave_23 2s ease .4s infinite;\n}\n\n.block:nth-child(4n+4) {\n animation: wave_23 2s ease .6s infinite;\n margin-right: 0;\n}\n\n@keyframes wave_23 {\n 0% {\n top: 0;\n opacity: 1;\n }\n\n 50% {\n top: 30px;\n opacity: .2;\n }\n\n 100% {\n top: 0;\n opacity: 1;\n }\n}"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"0a04ba","snapshot":null,"tags":null,"title":"loader by SmookyDev","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":302,"cssLen":1139,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".center_div {\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 5px;\n}\n\n.wave {\n width: 1.8rem;\n height: 150px;\n background-color: #ff6b6b;\n margin: 0 4px;\n border-radius: 0.4rem;\n animation: wave 1.5s linear infinite;\n transform-origin: center;\n}\n\n@keyframes wave {\n 0% {\n transform: scale(0);\n filter: hue-rotate(90deg) blur(100px);\n }\n 25% {\n transform: scale(0);\n filter: hue-rotate(120deg) blur(50px);\n }\n 50% {\n transform: scale(1);\n filter: hue-rotate(180deg) blur(25px);\n }\n 25% {\n transform: scale(0);\n filter: hue-rotate(360deg) blur(2px);\n }\n 100% {\n transform: scale(0);\n filter: hue-rotate(0deg) blur(0);\n }\n}\n\n.wave:nth-child(2) {\n animation-delay: 0.1s;\n}\n\n.wave:nth-child(3) {\n animation-delay: 0.2s;\n}\n\n.wave:nth-child(4) {\n animation-delay: 0.3s;\n}\n\n.wave:nth-child(5) {\n animation-delay: 0.4s;\n}\n\n.wave:nth-child(6) {\n animation-delay: 0.5s;\n}\n\n.wave:nth-child(7) {\n animation-delay: 0.6s;\n}\n\n.wave:nth-child(8) {\n animation-delay: 0.7s;\n}\n\n.wave:nth-child(9) {\n animation-delay: 0.8s;\n}\n\n.wave:nth-child(10) {\n animation-delay: 0.9s;\n}\n"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"5d2aac","snapshot":null,"tags":null,"title":"loader by roroland","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":69,"cssLen":1515,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n loading...\n

\n","css":".loader {\n --col1: rgba(228, 19, 141, 0.925);\n --col2: rgb(255, 179, 80);\n font-size: 2em;\n font-weight: 600;\n perspective: 800px;\n position: relative;\n}\n\n.loader::after,\n.loader::before,\n.loader .text::after,\n.loader .text::before {\n perspective: 800px;\n animation: anim 2s ease-in-out infinite, dotMove 10s ease-out alternate infinite, move 10s linear infinite 1s;\n ;\n content: '●';\n color: var(--col1);\n position: absolute;\n translate: -60px 500px;\n width: 5px;\n height: 5px;\n}\n\n.loader::before {\n animation-delay: 3s;\n color: var(--col1);\n}\n\n.loader .text::before {\n color: var(--col2);\n animation-delay: 2s;\n}\n\n.loader .text::after {\n color: var(--col2);\n}\n\n.loader .text {\n animation: anim 20s linear infinite, move 10s linear infinite 1s;\n color: transparent;\n background-image: linear-gradient(90deg, \n var(--col1) 0%,\n var(--col2) 100%);\n background-clip: text;\n background-size: 100%;\n background-repeat: no-repeat;\n transform: skew(5deg, -5deg);\n -webkit-background-clip: text;\n position: relative;\n}\n\n@keyframes anim {\n 0%, 100% {\n text-shadow: 2px 0px 2px rgba(179, 158, 158, .5);\n }\n\n 50% {\n background-size: 0%;\n background-position-x: left;\n text-shadow: 2px 10px 6px rgba(179, 158, 158, 1);\n }\n}\n\n@keyframes move {\n 50% {\n translate: 0px 0px;\n rotate: x 60deg;\n transform: skew(-5deg, 5deg);\n }\n}\n\n@keyframes dotMove {\n 0%, 100% {\n translate: -60px 300px;\n }\n\n 50% {\n translate: 160px -250px;\n scale: .5;\n opacity: .85;\n }\n}"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"ca9146","snapshot":null,"tags":null,"title":"loader by Ratinax","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":293,"cssLen":1735,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".sun {\n position: relative;\n animation: rotate 4s linear infinite;\n --color: yellow;\n --scale: 0.4;\n}\n\n.center {\n height: calc(var(--scale) * 10em);\n width: calc(var(--scale) * 10em);\n transition: background-color 2s linear, box-shadow 2s linear;\n background-color: var(--color);\n border-radius: 50%;\n box-shadow: 0 0 calc(var(--scale) * 3em) var(--color);\n}\n\n.ray {\n position: absolute;\n height: calc(var(--scale) * 3em);\n width: calc(var(--scale) * 0.5em);\n transition: background-color 2s ease-in-out, box-shadow 2s ease-in-out;\n box-shadow: 0 0 calc(var(--scale) * 1em) var(--color);\n background-color: var(--color);\n}\n\n.r-1 {\n margin-left: calc(var(--scale) * 4.75em);\n margin-top: calc(var(--scale) * 1em);\n}\n\n.r-2 {\n margin-left: calc(var(--scale) * 12.25em);\n margin-top: calc(var(--scale) * -6.25em);\n transform: rotate(90deg);\n}\n\n.r-3 {\n margin-left: calc(var(--scale) * 4.75em);\n margin-top: calc(var(--scale) * -14em);\n}\n\n.r-4 {\n margin-left: calc(var(--scale) * -2.75em);\n margin-top: calc(var(--scale) * -6.25em);\n transform: rotate(90deg);\n}\n\n.r-5 {\n margin-left: calc(var(--scale) * -0.5em);\n margin-top: calc(var(--scale) * -1em);\n transform: rotate(45deg);\n}\n\n.r-6 {\n margin-left: calc(var(--scale) * 9.75em);\n margin-top: calc(var(--scale) * -1em);\n transform: rotate(-45deg);\n}\n\n.r-7 {\n margin-left: calc(var(--scale) * 10.25em);\n margin-top: calc(var(--scale) * -11.75em);\n transform: rotate(45deg);\n}\n\n.r-8 {\n margin-left: calc(var(--scale) * -0.5em);\n margin-top: calc(var(--scale) * -11.75em);\n transform: rotate(-45deg);\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n --color: yellow;\n }\n\n 100% {\n transform: rotate(360deg);\n --color: orange;\n }\n}"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"5916bd","snapshot":null,"tags":null,"title":"loader by Victan78","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":54,"cssLen":497,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 100px;\n height: 100px;\n border: solid 4px rgba(231, 231, 231, 0);\n border-top: solid 5px rgb(241, 68, 68);\n border-radius: 50%;\n transition: all 0.5s;\n animation: rotation_51512 1.2s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n\n@keyframes rotation_51512 {\n 70% {\n box-shadow: 0px 0px 10px 50px rgba(241, 57, 57, 0.526);\n }\n\n 90% {\n box-shadow: 0px 0px 10px 50px rgba(241, 57, 57, 0.04);\n }\n\n 100% {\n opacity: 0.5;\n transform: rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"ee7c7e","snapshot":null,"tags":null,"title":"loader by Leoodaviid","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":66,"cssLen":495,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader-container {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.loader {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);\n }\n\n 50% {\n transform: rotate(180deg);\n box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);\n }\n\n 100% {\n transform: rotate(360deg);\n box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);\n }\n}"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"d92e2b","snapshot":null,"tags":null,"title":"loader by satyamchaudharydev","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":447,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".ball {\n --size: 20px;\n --timing: 0.7s;\n --displace: 70px;\n border-radius: 50%;\n width: var(--size);\n height: var(--size);\n background: #000;\n margin-right: var(--displace);\n animation: animation321 var(--timing) infinite alternate\n cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n@keyframes animation321 {\n 0% {\n background: #4284f3;\n transform: translateX(var(--displace));\n }\n\n 100% {\n background: #ea4335;\n transform: translateX(00px);\n }\n}\n"},{"created":"2024-01-22T16:54:30.000Z","isPrivate":0,"projectId":"f86779","snapshot":null,"tags":null,"title":"loader by KSAplay","updated":"2024-01-22T16:54:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":33,"cssLen":971,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n font-weight: bold;\n font-size: 12px;\n color: #f2df95;\n height: 150px;\n width: 250px;\n background-color: #907A24;\n border-style: solid;\n border-width: 50px 250px 50px 0px;\n border-color: #C9B656 #AD9531 #87621B #AD9531;\n animation: camera_effect 4s infinite linear;\n}\n\n@keyframes camera_effect {\n 0% {\n border-width: 0px 250px 0px 0px;\n }\n\n 10% {\n border-width: 45px 250px 45px 0px;\n }\n\n 20% {\n border-width: 50px 160px 50px 0px;\n }\n\n 30% {\n border-width: 50px 80px 50px 80px;\n }\n\n 45% {\n border-width: 45px 75px 55px 85px;\n }\n\n 55% {\n border-width: 55px 70px 45px 90px;\n }\n\n 65% {\n border-width: 55px 85px 45px 75px;\n }\n\n 70% {\n border-width: 50px 80px 50px 80px;\n }\n\n 80% {\n border-width: 50px 0px 50px 160px;\n }\n\n 90% {\n border-width: 45px 0px 45px 250px;\n }\n\n 100% {\n border-width: 0px 0px 0px 250px;\n }\n}"},{"created":"2024-01-22T16:54:30.000Z","isPrivate":0,"projectId":"2747ff","snapshot":null,"tags":null,"title":"loader by Yaya12085","updated":"2024-01-22T16:54:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":324,"cssLen":787,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n ","css":".flex{display:flex}.h-12{height:3rem}.h-4{height:1rem}.w-12{width:3rem}.w-\\[170px\\]{width:170px}.w-\\[200px\\]{width:200px}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.items-center{align-items:center}.space-x-2 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.5rem * var(--tw-space-x-reverse));margin-left:calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-2 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.rounded-full{border-radius:9999px}.rounded-md{border-radius:0.375rem}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}"}]}},"actionData":null,"errors":null}