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

\n","css":".loader {\n /* background-color: blue; */\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n}\n\n.loader-text {\n font-size: 24px;\n color: rgb(0, 0, 0);\n margin-bottom: 20px;\n align-self: center;\n}\n\n.loader-bar {\n width: 30%;\n height: 10px;\n border-radius: 5px;\n background-color: rgb(0, 0, 0);\n animation: loader-bar-animation 2s ease-in-out infinite;\n}\n\n@keyframes loader-bar-animation {\n 0% {\n /* transform: translateX(-100%) rotate(270deg); */\n transform: translateX(-100%);\n }\n\n 50% {\n /* transform: translateX(100%) rotate(-90deg); */\n transform: translateX(100%);\n }\n\n 100% {\n /* transform: translateX(-100%) rotate(270deg); */\n transform: translateX(-100%);\n }\n}"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"d7c5f4","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":682,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 84px;\n height: 84px;\n position: relative;\n overflow: hidden;\n}\n\n.loader:before , .loader:after {\n content: \"\";\n position: absolute;\n left: 50%;\n bottom: 0;\n width: 64px;\n height: 64px;\n border-radius: 50%;\n background: yellow;\n transform: translate(-50% , 100%) scale(0);\n animation: push_4051 2s infinite ease-in;\n}\n\n.loader:after {\n animation-delay: 1s;\n}\n\n@keyframes push_4051 {\n 0% {\n transform: translate(-50% , 100%) scale(1);\n }\n\n 15% , 25% {\n transform: translate(-50% , 50%) scale(1);\n }\n\n 50% , 75% {\n transform: translate(-50%, -30%) scale(0.5);\n }\n\n 80%, 100% {\n transform: translate(-50%, -50%) scale(0);\n }\n}\n "},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"58aa7b","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":1299,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".loader {\n width: 106px;\n height: 56px;\n display: block;\n margin: 30px auto;\n background-image: linear-gradient(#e1e1e1 50px, transparent 0), linear-gradient(#e1e1e1 50px, transparent 0), linear-gradient(#e1e1e1 50px, transparent 0), linear-gradient(#e1e1e1 50px, transparent 0), radial-gradient(circle 14px, #e1e1e1 100%, transparent 0);\n background-size: 48px 15px , 15px 35px, 15px 35px, 25px 15px, 28px 28px;\n background-position: 25px 5px, 58px 20px, 25px 17px, 2px 37px, 76px 0px;\n background-repeat: no-repeat;\n position: relative;\n transform: rotate(-45deg);\n box-sizing: border-box;\n}\n\n.loader::after,\n.loader::before {\n content: '';\n position: absolute;\n width: 56px;\n height: 56px;\n border: 6px solid #e1e1e1;\n border-radius: 50%;\n left: -45px;\n top: -10px;\n background-repeat: no-repeat;\n background-image: linear-gradient(#e1e1e1 64px, transparent 0), linear-gradient(#e1e1e1 66px, transparent 0), radial-gradient(circle 4px, #e1e1e1 100%, transparent 0);\n background-size: 40px 1px , 1px 40px, 8px 8px;\n background-position: center center;\n box-sizing: border-box;\n animation: bike 0.3s linear infinite;\n}\n\n.loader::before {\n left: 25px;\n top: 60px;\n}\n\n@keyframes bike {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n} "},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"a56e46","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":64,"cssLen":1137,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".triangle {\n background-color: transparent;\n height: 0px;\n width: 0px;\n border-style: solid;\n border-width: 50px 50px 50px 50px;\n border-radius: 2px;\n border-color: #00ff83 #00e676 #00cc69 #00e676;\n animation: animtrgl 3s infinite ease;\n}\n\n.text {\n font-family: 'Staatliches', cursive;\n color: white;\n font-size: 25px;\n width: 250px;\n text-align: center;\n display: block;\n height: 50px;\n position: absolute;\n animation: textload 3s infinite ease;\n text-shadow: 0 0 4px black;\n}\n\n@keyframes textload {\n 0% {\n top: calc(50% + 100px);\n }\n\n 25% {\n top: calc(50% + 85px);\n }\n\n 50% {\n top: calc(50% + 100px);\n }\n\n 75% {\n top: calc(50% + 85px);\n }\n\n 100% {\n top: calc(50% + 100px);\n }\n}\n\n@keyframes animtrgl {\n 0% {\n border-width: 50px 75px 50px 25px;\n transform: scale(2);\n }\n\n 25% {\n border-width: 25px 50px 75px 50px;\n transform: scale(1.75);\n }\n\n 50% {\n border-width: 50px 25px 50px 75px;\n transform: scale(2);\n }\n\n 75% {\n border-width: 75px 50px 25px 50px;\n transform: scale(1.75);\n }\n\n 100% {\n border-width: 50px 75px 50px 25px;\n transform: scale(2);\n }\n}"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"8095b0","snapshot":null,"tags":null,"title":"loader by shadowmurphy","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":55,"cssLen":796,"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 justify-content: flex-start;\n align-items: center;\n width: 200px;\n height: 15px;\n background-color: rgb(2, 2, 17);\n border-radius: 10px;\n overflow: hidden;\n position: relative;\n margin-top: 15px;\n}\n\n.shape {\n width: 50px;\n height: 15px;\n background-image: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB);\n border-radius: 25px;\n position: absolute;\n animation: slide 1.9s linear infinite;\n background-size: 200%;\n}\n\n@keyframes slide {\n 0% {\n left: 0;\n }\n\n 50% {\n left: calc(100% - 50px);\n }\n\n 100% {\n left: 0;\n }\n}\n\n@keyframes gradientChange {\n 0%, 100% {\n background-image: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB);\n }\n\n 50% {\n background-image: linear-gradient(144deg, #00DDEB, #5B42F3 50%, #AF40FF);\n }\n}"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"02573a","snapshot":null,"tags":null,"title":"loader by LeonKohli","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":115,"cssLen":446,"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 justify-content: center;\n align-items: center;\n height: 100%;\n}\n\n.bubble {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-image: linear-gradient(to right, #ff6b81, #ff9a44);\n margin: 0 5px;\n animation: bubbleAnimation 1.5s ease-in-out infinite;\n}\n\n@keyframes bubbleAnimation {\n 0%,\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n 50% {\n transform: scale(2);\n opacity: 0.5;\n }\n}\n"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"0a2e05","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":747,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n transform: translateZ(1px);\n}\n\n.loader:after {\n content: '$';\n display: inline-block;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n text-align: center;\n line-height: 40px;\n font-size: 32px;\n font-weight: bold;\n background: #FFD700;\n color: #DAA520;\n border: 4px double;\n box-sizing: border-box;\n box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .1);\n animation: coin-flip 4s cubic-bezier(0, 0.2, 0.8, 1) infinite;\n}\n\n@keyframes coin-flip {\n 0%, 100% {\n animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);\n }\n\n 0% {\n transform: rotateY(0deg);\n }\n\n 50% {\n transform: rotateY(1800deg);\n animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);\n }\n\n 100% {\n transform: rotateY(3600deg);\n }\n}\n "},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"733d32","snapshot":null,"tags":null,"title":"loader by elijahgummer","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":57,"cssLen":310,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".container {\n width: 50px;\n height: 50px;\n}\n\n.container .boxes {\n width: 50px;\n height: 50px;\n fill: none;\n stroke-width: 50px;\n stroke: #ff5733;\n stroke-dasharray: 50;\n stroke-dashoffset: 50%;\n animation: animate 2s linear infinite;\n}\n\n@keyframes animate {\n to {\n stroke-dashoffset: 250%;\n }\n}\n"},{"created":"2024-01-22T16:54:16.000Z","isPrivate":0,"projectId":"ce1211","snapshot":null,"tags":null,"title":"loader by SelfMadeSystem","updated":"2024-01-22T16:54:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":389,"cssLen":1237,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* Google flip animation thing */\n\n#a {\n transform-origin: center;\n animation: a 2s step-end infinite;\n}\n\n@keyframes a {\n 0% {\n transform: rotate(90deg);\n }\n\n 25% {\n transform: rotate(180deg);\n }\n\n 50% {\n transform: rotate(270deg);\n }\n\n 75% {\n transform: rotate(360deg);\n }\n}\n\n#b {\n animation: b1 1s linear infinite, b2 2s step-end infinite;\n animation-delay: var(--delay, 0s);\n}\n\n@keyframes b1 {\n 0%,\n 100% {\n d: path(\"M 0 12 a 12 12 0 0 1 24 0 a 12 12 0 0 0 -24 0\");\n }\n\n 25%,\n 75% {\n d: path(\"M 0 12 a 12 12 0 0 1 24 0 a 12 0 0 0 0 -24 0\");\n }\n}\n\n@keyframes b2 {\n 0% {\n fill: hsl(var(--c1), 100%, 43%);\n }\n\n 50% {\n fill: hsl(var(--c2), 100%, 43%);\n }\n}\n\n#c {\n animation: c1 1s linear infinite, c2 2s linear infinite;\n animation-delay: var(--delay, 0s);\n}\n\n@keyframes c1 {\n 0%,\n 25%,\n 75%,\n 100% {\n d: path(\"M 0 12 h 24 a 12 0 0 0 1 -24 0\");\n }\n\n 50% {\n d: path(\"M 0 12 h 24 a 12 12 0 0 1 -24 0\");\n }\n}\n\n@keyframes c2 {\n 0%,\n 25% {\n fill: hsl(var(--c1), 100%, 43%);\n }\n\n 12.5%,\n 37.5% {\n fill: hsl(var(--c1), 100%, 25%);\n }\n\n 50%,\n 75% {\n fill: hsl(var(--c2), 100%, 43%);\n }\n\n 62.5%,\n 87.5% {\n fill: hsl(var(--c2), 100%, 25%);\n }\n}"},{"created":"2024-01-22T16:54:16.000Z","isPrivate":0,"projectId":"2dea3c","snapshot":null,"tags":null,"title":"loader by VashonG","updated":"2024-01-22T16:54:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4635,"cssLen":834,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".star {\n margin: auto;\n width: 16em;\n height: 16em;\n}\n.star__stroke {\n --dur: 2s;\n animation: stroke1 var(--dur) linear infinite;\n}\n.star__stroke--2 {\n animation-name: stroke2;\n animation-delay: calc(var(--dur) / -2);\n}\n.star__stroke--3 {\n animation-name: stroke3;\n animation-direction: reverse;\n}\n.star__stroke--4 {\n animation-name: stroke4;\n animation-delay: calc(var(--dur) / -2);\n animation-direction: reverse;\n}\n\n@keyframes stroke1 {\n from {\n stroke-dashoffset: 0;\n }\n to {\n stroke-dashoffset: 124;\n }\n}\n@keyframes stroke2 {\n from {\n stroke-dashoffset: 0;\n }\n to {\n stroke-dashoffset: 248;\n }\n}\n@keyframes stroke3 {\n from {\n stroke-dashoffset: 0;\n }\n to {\n stroke-dashoffset: 372;\n }\n}\n@keyframes stroke4 {\n from {\n stroke-dashoffset: 0;\n }\n to {\n stroke-dashoffset: 496;\n }\n}\n"},{"created":"2024-01-22T16:54:16.000Z","isPrivate":0,"projectId":"9f01c8","snapshot":null,"tags":null,"title":"loader by Iliasman2","updated":"2024-01-22T16:54:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":649,"cssLen":1540,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n","css":".lamp {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n height: 30em;\n min-height: 300px;\n width: 13em;\n min-width: calc(300px * 3 / 7);\n background: #2b4353;\n clip-path: polygon(33% 0, 0 70%, 22% 88%, 0 100%, 100% 100%, 78% 88%, 100% 70%, 67% 0);\n}\n\n.glass {\n background: #b6e1e0;\n width: 100%;\n height: 60%;\n position: absolute;\n bottom: 30%;\n overflow: hidden;\n}\n\n.lava {\n filter: url(\"#goo\");\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n}\n\n.blob {\n border-radius: 50%;\n background: #e8630a;\n position: absolute;\n}\n\n.blob.top {\n width: 100%;\n height: 4%;\n top: -3.7%;\n left: 0;\n}\n\n.blob.bottom {\n width: 100%;\n height: 4%;\n bottom: -3%;\n left: 0;\n}\n\n.blob:nth-child(1) {\n width: calc(15% * 1.4);\n height: 15%;\n left: 45%;\n bottom: -15%;\n animation: blob-one_2 ease-in-out 7s infinite;\n}\n\n.blob:nth-child(2) {\n width: calc(22% * 1.4);\n height: 22%;\n right: 14%;\n bottom: -15%;\n animation: blob-two_2 ease-in-out 11s infinite;\n}\n\n.blob:nth-child(3) {\n width: calc(32% * 1.4);\n height: 32%;\n bottom: -15%;\n left: 14%;\n animation: blob-three_2 ease-in-out 16s infinite;\n}\n\n@keyframes blob-one_2 {\n 0%, 100% {\n transform: translatey(0);\n }\n\n 50% {\n transform: translatey(-700%);\n }\n}\n\n@keyframes blob-two_2 {\n 0%, 100% {\n transform: translatey(0);\n }\n\n 50% {\n transform: translatey(-420%);\n }\n}\n\n@keyframes blob-three_2 {\n 0%, 100% {\n transform: translatey(0);\n }\n\n 50% {\n transform: translatey(-305%);\n }\n}"},{"created":"2024-01-22T16:54:16.000Z","isPrivate":0,"projectId":"8f6524","snapshot":null,"tags":null,"title":"loader by elijahgummer","updated":"2024-01-22T16:54:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":57,"cssLen":310,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".container {\n width: 50px;\n height: 50px;\n}\n\n.container .boxes {\n width: 50px;\n height: 50px;\n fill: none;\n stroke-width: 50px;\n stroke: #43cb85;\n stroke-dasharray: 50;\n stroke-dashoffset: 50%;\n animation: animate 2s linear infinite;\n}\n\n@keyframes animate {\n to {\n stroke-dashoffset: 250%;\n }\n}\n"}]}},"actionData":null,"errors":null}