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

","css":".loader {\n width: 12em;\n height: 1em;\n border-radius: 8px;\n background-color: #47a7ff44;\n}\n\n.loader div {\n height: 100%;\n width: 100%;\n border-radius: 8px;\n background-color: #47a7ff;\n animation: width7435 5s linear infinite;\n transition: all;\n}\n\n@keyframes width7435 {\n from {\n /*width: 0;*/\n transform: scaleX(0);\n }\n\n to {\n transform: scaleX(1);\n }\n}"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"fa0fe0","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":691,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner {\n box-shadow: 0 0 0 7px #42a5f5, inset 0 0 0 1px #42a5f5;\n position: relative;\n height: 50px;\n width: 230px;\n border-radius: 8px;\n overflow: hidden;\n animation: rotate_5132 6s linear infinite;\n}\n\n.spinner:before {\n display: block;\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n background-color: #42a5f5;\n animation: load_5123 6s linear infinite;\n}\n\n@keyframes rotate_5132 {\n 0%,\n 42% {\n transform: rotate(0deg);\n }\n\n 48%,\n 92% {\n transform: rotate(180deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes load_5123 {\n 0% {\n width: 0;\n }\n\n 40%,\n 50% {\n width: 100%;\n }\n\n 90%,\n 100% {\n width: 0;\n }\n}\n"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"323ec8","snapshot":null,"tags":null,"title":"loader by jeremyssocial","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":165,"cssLen":1032,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".cube-loader {\n position: relative;\n width: 40px;\n height: 40px;\n margin: auto;\n}\n\n.cube {\n position: absolute;\n width: 50%;\n height: 50%;\n background-color: #333;\n border: 2px solid #fff;\n animation: foldCube 2.4s infinite linear;\n}\n\n/* Individual cube positioning */\n.cube1 {\n top: 0;\n left: 0;\n transform-origin: 100% 100%;\n}\n.cube2 {\n top: 0;\n right: 0;\n transform-origin: 0 100%;\n}\n.cube3 {\n bottom: 0;\n right: 0;\n transform-origin: 0 0;\n}\n.cube4 {\n bottom: 0;\n left: 0;\n transform-origin: 100% 0;\n}\n\n/* Keyframes for the folding animation */\n@keyframes foldCube {\n 0%,\n 10% {\n transform: perspective(140px) rotateX(-180deg);\n opacity: 0;\n }\n 25%,\n 75% {\n transform: perspective(140px) rotateX(0deg);\n opacity: 1;\n }\n 90%,\n 100% {\n transform: perspective(140px) rotateY(180deg);\n opacity: 0;\n }\n}\n\n/* Animation delay for each cube */\n.cube1 {\n animation-delay: 0.3s;\n}\n.cube2 {\n animation-delay: 0.6s;\n}\n.cube3 {\n animation-delay: 0.9s;\n}\n.cube4 {\n animation-delay: 1.2s;\n}\n"},{"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}"}]}},"actionData":null,"errors":null}