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

","css":"/* Simple loader made by: csozi | Website: www.csozi.hu*/\n\n.square {\n display: flex;\n flex-wrap: wrap;\n width: 100px;\n height: 100px;\n box-sizing: content-box;\n animation: load-big 4s infinite;\n transform-origin: 0px 100px;\n}\n\n.mini_square {\n box-sizing: border-box;\n height: 50px;\n width: 50px;\n background-color: darkcyan;\n}\n\n.sq-1 {\n animation: load-left-top 4s infinite;\n}\n\n.sq-2 {\n animation: load-right-top 4s infinite;\n}\n\n.sq-4 {\n animation: load-right-bottom 4s infinite;\n}\n\n@keyframes load-right-bottom {\n 0% {\n translate: -50px 0px;\n }\n\n 25% {\n translate: 0px 0px;\n }\n\n 100% {\n translate: 0px 0px;\n }\n}\n\n@keyframes load-right-top {\n 0% {\n translate: -50px 50px;\n }\n\n 25% {\n translate: 0px 50px;\n }\n\n 50% {\n translate: 0px 0px;\n }\n\n 100% {\n translate: 0px 0px;\n }\n}\n\n@keyframes load-left-top {\n 0% {\n translate: 0px 50px;\n }\n\n 25% {\n translate: 50px 50px;\n }\n\n 50% {\n translate: 50px 0px;\n }\n\n 75% {\n translate: 0px 0px;\n }\n\n 100% {\n translate: 0px 0px;\n }\n}\n\n@keyframes load-big {\n 0% {\n scale: 1;\n background-color: rgba(0, 0, 0, 0);\n }\n\n 74% {\n scale: 1;\n background-color: rgba(0, 0, 0, 0);\n }\n\n 75% {\n scale: 1;\n background-color: darkcyan;\n }\n\n 100% {\n scale: 0.5;\n background-color: darkcyan;\n }\n}"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"469a9e","snapshot":null,"tags":null,"title":"loader by kerolos23","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":83,"cssLen":891,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n display: inline-block;\n position: relative;\n width: 80px;\n height: 80px;\n}\n\n.loader div {\n position: absolute;\n top: 33px;\n width: 13px;\n height: 13px;\n border-radius: 50%;\n background: #c517f0;\n animation-timing-function: cubic-bezier(0, 1, 1, 0);\n}\n\n.loader div:nth-child(1) {\n left: 8px;\n animation: flip1 0.6s infinite;\n}\n\n.loader div:nth-child(2) {\n left: 8px;\n animation: flip2 0.6s infinite;\n}\n\n.loader div:nth-child(3) {\n left: 32px;\n animation: flip2 0.6s infinite;\n}\n\n.loader div:nth-child(4) {\n left: 56px;\n animation: flip3 0.6s infinite;\n}\n\n@keyframes flip1 {\n 0% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes flip3 {\n 0% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes flip2 {\n 0% {\n transform: translate(0, 0);\n }\n\n 100% {\n transform: translate(24px, 0);\n }\n}\n"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"81a6cd","snapshot":null,"tags":null,"title":"loader by jack0237","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":158,"cssLen":591,"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}\n\n.loader .dot {\n height: 20px;\n width: 20px;\n border-radius: 50%;\n border: 2px solid #e8e8e8;\n background: #16b0c1;\n animation: jump 0.8s ease-in-out infinite alternate;\n}\n\n@keyframes jump {\n 100% {\n background: #661e92;\n transform: translateZ(-3rem) scale(1.9);\n }\n}\n\n.loader .dot:nth-child(1) {\n animation-delay: 0.1s;\n}\n\n.loader .dot:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.loader .dot:nth-child(3) {\n animation-delay: 0.3s;\n}\n\n.loader .dot:nth-child(4) {\n animation-delay: 0.4s;\n}\n\n.loader .dot:nth-child(5) {\n animation-delay: 0.5s;\n}\n"},{"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}"}]}},"actionData":null,"errors":null}