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

","css":".loader {\n width: 160px;\n height: 185px;\n position: relative;\n background: #fff;\n border-radius: 100px 100px 0 0;\n}\n\n.loader:after {\n content: \"\";\n position: absolute;\n width: 100px;\n height: 125px;\n left: 50%;\n top: 25px;\n transform: translateX(-50%);\n background-image: radial-gradient(circle, #000 48%, transparent 55%),\n radial-gradient(circle, #000 48%, transparent 55%),\n radial-gradient(circle, #fff 30%, transparent 45%),\n radial-gradient(circle, #000 48%, transparent 51%),\n linear-gradient(#000 20px, transparent 0),\n linear-gradient(#cfecf9 60px, transparent 0),\n radial-gradient(circle, #cfecf9 50%, transparent 51%),\n radial-gradient(circle, #cfecf9 50%, transparent 51%);\n background-repeat: no-repeat;\n background-size: 16px 16px, 16px 16px, 10px 10px, 42px 42px, 12px 3px,\n 50px 25px, 70px 70px, 70px 70px;\n background-position: 25px 10px, 55px 10px, 36px 44px, 50% 30px, 50% 85px,\n 50% 50px, 50% 22px, 50% 45px;\n animation: faceLift 3s linear infinite alternate;\n}\n\n.loader:before {\n content: \"\";\n position: absolute;\n width: 140%;\n height: 125px;\n left: -20%;\n top: 0;\n background-image: radial-gradient(circle, #fff 48%, transparent 50%),\n radial-gradient(circle, #fff 48%, transparent 50%);\n background-repeat: no-repeat;\n background-size: 65px 65px;\n background-position: 0px 12px, 145px 12px;\n animation: earLift 3s linear infinite alternate;\n}\n\n@keyframes faceLift {\n 0% {\n transform: translateX(-60%);\n }\n\n 100% {\n transform: translateX(-30%);\n }\n}\n\n@keyframes earLift {\n 0% {\n transform: translateX(10px);\n }\n\n 100% {\n transform: translateX(0px);\n }\n}\n "},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"9b69a1","snapshot":null,"tags":null,"title":"loader by zebra76966","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":995,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n border-top: 8px solid hotpink;\n border-bottom: 8px solid #f55951;\n border-left: 8px solid #3a9efd;\n border-right: 8px solid #1fff7c;\n border-radius: 100%;\n height: 100px;\n width: 100px;\n animation: looper 5s infinite ease-in-out;\n}\n\n@keyframes looper {\n 0% {\n border-radius: 100% 100% 100% 100%;\n border-color: hotpink #3a9efd #1fff7c #f55951;\n }\n\n 10% {\n border-radius: 0% 100% 0% 0%;\n border-color: #f55951;\n transform: rotate(150deg);\n }\n\n 20% {\n border-radius: 0% 0% 0% 0%;\n border-color: #3a9efd;\n }\n\n 30% {\n border-radius: 0% 0% 0% 0%;\n border-color: #1fff7c;\n }\n\n 40% {\n border-radius: 0% 0% 0% 0%;\n border-color: #3a9efd;\n }\n\n 50% {\n border-radius: 100%;\n border-color: #f55951;\n }\n\n 90% {\n border-radius: 100%;\n transform: rotate(360deg);\n border-style: dashed;\n }\n\n 100% {\n transform: rotate(0deg);\n border-radius: 100% 100% 100% 100%;\n border-color: hotpink #3a9efd #1fff7c #f55951;\n }\n}\n\n\n\n\n"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"a97a3c","snapshot":null,"tags":null,"title":"loader by aadium","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":345,"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 box-shadow: 0px 20px 40px #ff4646, 0px -20px 40px #8949ff, 20px 0px 40px#ff07fb, -20px 0px 40px #ff07fb;\n border-radius: 10em;\n position: relative;\n animation: rotate 1s linear infinite;\n}\n\n@keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"935cf0","snapshot":null,"tags":null,"title":"loader by successfulfadwa","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":745,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 150px;\n height: 150px;\n border-radius: 50%;\n background: hsla(0, 100%, 95%, 1);\n background: linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%);\n background: -moz-linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%);\n background: -webkit-linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%);\n filter: progid: DXImageTransform.Microsoft.gradient( startColorstr=\"#ffe3e3\", endColorstr=\"#FFD5B2\", GradientType=1 );\n box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;\n animation: rotate 2.0s infinite linear;\n}\n\n@keyframes rotate {\n 100% {\n transform: rotate(1turn);\n }\n}\n"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"b0c2bc","snapshot":null,"tags":null,"title":"loader by Satwinder04","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":409,"cssLen":1008,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n position: relative;\n width: 164px;\n height: 100px;\n margin: 50px auto;\n}\n\n.loader div {\n position: absolute;\n width: 10px;\n height: 30px;\n background-color: #ff6a00;\n border-radius: 5px;\n animation: loader_51899 1.5s ease-in-out infinite;\n}\n\n.loader .bar1 {\n left: 0px;\n animation-delay: 0s;\n}\n\n.loader .bar2 {\n left: 20px;\n animation-delay: 0.15s;\n}\n\n.loader .bar3 {\n left: 40px;\n animation-delay: 0.3s;\n}\n\n.loader .bar4 {\n left: 60px;\n animation-delay: 0.45s;\n}\n\n.loader .bar5 {\n left: 80px;\n animation-delay: 0.6s;\n}\n\n.loader .bar6 {\n left: 100px;\n animation-delay: 0.75s;\n}\n\n.loader .bar7 {\n left: 120px;\n animation-delay: 0.9s;\n}\n\n.loader .bar8 {\n left: 140px;\n animation-delay: 1.05s;\n}\n\n.loader .bar9 {\n left: 160px;\n animation-delay: 1.2s;\n}\n\n@keyframes loader_51899 {\n 0% {\n height: 30px;\n transform: translate(0, 0);\n }\n\n 50% {\n height: 70px;\n transform: translate(0, 35px);\n }\n\n 100% {\n height: 30px;\n transform: translate(0, 0);\n }\n}"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"6cc4da","snapshot":null,"tags":null,"title":"loader by JaydipPrajapati1910","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":969,"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: #999;\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: rgb(61, 106, 255);\n position: absolute;\n top: 0;\n left: 0;\n border-radius: 4px;\n animation: jump7456 0.5s linear infinite;\n}\n\n@keyframes jump7456 {\n 15% {\n border-bottom-right-radius: 3px;\n }\n\n 25% {\n transform: translateY(9px) rotate(22.5deg);\n }\n\n 50% {\n transform: translateY(18px) scale(1, .9) rotate(45deg);\n border-bottom-right-radius: 40px;\n }\n\n 75% {\n transform: translateY(9px) rotate(67.5deg);\n }\n\n 100% {\n transform: translateY(0) rotate(90deg);\n }\n}\n\n@keyframes shadow324 {\n\n 0%,\n 100% {\n transform: scale(1, 1);\n }\n\n 50% {\n transform: scale(1.2, 1);\n }\n}"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"51a14b","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":838,"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 display: flex;\n transform-origin: 50% 125%;\n animation: mov-y 1s infinite linear;\n}\n\n.loader:before,\n .loader:after {\n content: \"\";\n flex: 1;\n background: #fff;\n transform-origin: 0% 100%;\n animation: rtr-x 1s infinite linear;\n}\n\n.loader:before {\n transform-origin: 100% 100%;\n animation-name: rtr-rx;\n}\n\n@keyframes mov-y {\n 0%,25% {\n transform: translateY(0) scaleY(1)\n }\n\n 49% {\n transform: translateY(-75%) scaleY(1)\n }\n\n 50% {\n transform: translateY(-75%) scaleY(-1)\n }\n\n 75%,100% {\n transform: translateY(-150%) scaleY(-1)\n }\n}\n\n@keyframes rtr-x {\n 25%,75% {\n transform: rotate(0deg)\n }\n\n 50% {\n transform: rotate(90deg)\n }\n}\n\n@keyframes rtr-rx {\n 25%,75% {\n transform: rotate(0deg)\n }\n\n 50% {\n transform: rotate(-90deg)\n }\n}\n "},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"a1a7da","snapshot":null,"tags":null,"title":"loader by fanishah","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1623,"cssLen":2153,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".loader {\n width: 8em;\n height: 8em;\n}\n\n.loader__eye1,\n .loader__eye2,\n .loader__mouth1,\n .loader__mouth2 {\n animation: eye1 3s ease-in-out infinite;\n}\n\n.loader__eye1,\n .loader__eye2 {\n transform-origin: 64px 64px;\n}\n\n.loader__eye2 {\n animation-name: eye2;\n}\n\n.loader__mouth1 {\n animation-name: mouth1;\n}\n\n.loader__mouth2 {\n animation-name: mouth2;\n visibility: hidden;\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --bg: hsl(var(--hue), 90%, 10%);\n --fg: hsl(var(--hue), 90%, 90%);\n }\n}\n\n@keyframes eye1 {\n from {\n transform: rotate(-260deg) translate(0, -56px);\n }\n\n 50%,\n 60% {\n animation-timing-function: cubic-bezier(0.17, 0, 0.58, 1);\n transform: rotate(-40deg) translate(0, -56px) scale(1);\n }\n\n to {\n transform: rotate(225deg) translate(0, -56px) scale(0.35);\n }\n}\n\n@keyframes eye2 {\n from {\n transform: rotate(-260deg) translate(0, -56px);\n }\n\n 50% {\n transform: rotate(40deg) translate(0, -56px) rotate(-40deg) scale(1);\n }\n\n 52.5% {\n transform: rotate(40deg) translate(0, -56px) rotate(-40deg) scale(1, 0);\n }\n\n 55%,\n 70% {\n animation-timing-function: cubic-bezier(0, 0, 0.28, 1);\n transform: rotate(40deg) translate(0, -56px) rotate(-40deg) scale(1);\n }\n\n to {\n transform: rotate(150deg) translate(0, -56px) scale(0.4);\n }\n}\n\n@keyframes eyeBlink {\n from,\n 25%,\n 75%,\n to {\n transform: scaleY(1);\n }\n\n 50% {\n transform: scaleY(0);\n }\n}\n\n@keyframes mouth1 {\n from {\n animation-timing-function: ease-in;\n stroke-dasharray: 0 351.86;\n stroke-dashoffset: 0;\n }\n\n 25% {\n animation-timing-function: ease-out;\n stroke-dasharray: 175.93 351.86;\n stroke-dashoffset: 0;\n }\n\n 50% {\n animation-timing-function: steps(1, start);\n stroke-dasharray: 175.93 351.86;\n stroke-dashoffset: -175.93;\n visibility: visible;\n }\n\n 75%,\n to {\n visibility: hidden;\n }\n}\n\n@keyframes mouth2 {\n from {\n animation-timing-function: steps(1, end);\n visibility: hidden;\n }\n\n 50% {\n animation-timing-function: ease-in-out;\n visibility: visible;\n stroke-dashoffset: 0;\n }\n\n to {\n stroke-dashoffset: -351.86;\n }\n}\n\n"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"0ce804","snapshot":null,"tags":null,"title":"loader by Juanes200122","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":301,"cssLen":2105,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n

","css":".cube-loader {\n position: relative;\n /* u can choose any size */\n width: 75px;\n height: 75px;\n transform-style: preserve-3d;\n transform: rotateX(-30deg);\n animation: animate 4s linear infinite;\n}\n\n@keyframes animate {\n 0% {\n transform: rotateX(-30deg) rotateY(0);\n }\n\n 100% {\n transform: rotateX(-30deg) rotateY(360deg);\n }\n}\n\n.cube-loader .cube-wrapper {\n position: absolute;\n width: 100%;\n height: 100%;\n /* top: 0;\n left: 0; */\n transform-style: preserve-3d;\n}\n\n.cube-loader .cube-wrapper .cube-span {\n position: absolute;\n width: 100%;\n height: 100%;\n /* top: 0;\n left: 0; */\n /* width 75px / 2 = 37.5px */\n transform: rotateY(calc(90deg * var(--i))) translateZ(37.5px);\n background: linear-gradient(\n to bottom,\n hsl(176.89, 99.07%, 58.04%) 100%,\n hsl(176.89, 99.07%, 58.04%) 100%,\n hsl(176.89, 99.07%, 58.04%) 100%,\n hsl(176.89, 99.07%, 58.04%) 100%,\n hsl(176.89, 99.07%, 58.04%) 100%,\n hsl(176.89, 99.07%, 58.04%) 100%,\n hsl(176.89, 99.07%, 58.04%) 100%,\n hsl(176.89, 99.07%, 58.04%) 100%,\n hsl(176.89, 99.07%, 58.04%) 100%,\n hsl(176.89, 99.07%, 58.04%) 100%,\n hsl(176.89, 99.07%, 58.04%) 100%,\n hsl(176.89, 99.07%, 58.04%) 100%,\n hsl(176.89, 99.07%, 58.04%) 100%,\n hsl(176.89, 99.07%, 58.04%) 100%,\n hsl(176.89, 99.07%, 58.04%) 100%,\n hsl(176.89, 99.07%, 58.04%) 100%\n );\n}\n\n.cube-top {\n position: absolute;\n width: 75px;\n height: 75px;\n background: hsl(176.89, 99.07%, 58.04%) 100%;\n /* width 75px / 2 = 37.5px */\n transform: rotateX(90deg) translateZ(37.5px);\n transform-style: preserve-3d;\n}\n\n.cube-top::before {\n content: '';\n position: absolute;\n /* u can choose any size */\n width: 75px;\n height: 75px;\n background: hsl(176.61, 42.28%, 40.7%) 19.6%;\n transform: translateZ(-90px);\n filter: blur(10px);\n box-shadow: 0 0 10px #323232,\n 0 0 20px hsl(176.61, 42.28%, 40.7%) 19.6%,\n 0 0 30px #323232,\n 0 0 40px hsl(176.61, 42.28%, 40.7%) 19.6%;\n}\n "},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"2bd198","snapshot":null,"tags":null,"title":"loader by NlghtM4re","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":165,"cssLen":2109,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".container {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n}\n\n.dash {\n margin: 0 15px;\n width: 35px;\n height: 15px;\n border-radius: 8px;\n background: rgb(82, 159, 246);\n box-shadow: rgb(82, 159, 246) 0 0 15px 0;\n}\n\n.first {\n margin-right: -18px;\n transform-origin: center left;\n animation: spin 3s linear infinite;\n}\n\n.seconde {\n transform-origin: center right;\n animation: spin2 3s linear infinite;\n animation-delay: .2s;\n}\n\n.third {\n transform-origin: center right;\n animation: spin3 3s linear infinite;\n animation-delay: .3s;\n}\n\n.fourth {\n transform-origin: center right;\n animation: spin4 3s linear infinite;\n animation-delay: .4s;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 25% {\n transform: rotate(360deg);\n }\n\n 30% {\n transform: rotate(370deg);\n }\n\n 35% {\n transform: rotate(360deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes spin2 {\n 0% {\n transform: rotate(0deg);\n }\n\n 20% {\n transform: rotate(0deg);\n }\n\n 30% {\n transform: rotate(-180deg);\n }\n\n 35% {\n transform: rotate(-190deg);\n }\n\n 40% {\n transform: rotate(-180deg);\n }\n\n 78% {\n transform: rotate(-180deg);\n }\n\n 95% {\n transform: rotate(-360deg);\n }\n\n 98% {\n transform: rotate(-370deg);\n }\n\n 100% {\n transform: rotate(-360deg);\n }\n}\n\n@keyframes spin3 {\n 0% {\n transform: rotate(0deg);\n }\n\n 27% {\n transform: rotate(0deg);\n }\n\n 40% {\n transform: rotate(180deg);\n }\n\n 45% {\n transform: rotate(190deg);\n }\n\n 50% {\n transform: rotate(180deg);\n }\n\n 62% {\n transform: rotate(180deg);\n }\n\n 75% {\n transform: rotate(360deg);\n }\n\n 80% {\n transform: rotate(370deg);\n }\n\n 85% {\n transform: rotate(360deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes spin4 {\n 0% {\n transform: rotate(0deg);\n }\n\n 38% {\n transform: rotate(0deg);\n }\n\n 60% {\n transform: rotate(-360deg);\n }\n\n 65% {\n transform: rotate(-370deg);\n }\n\n 75% {\n transform: rotate(-360deg);\n }\n\n 100% {\n transform: rotate(-360deg);\n }\n}"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"ac49d0","snapshot":null,"tags":null,"title":"loader by bernethe","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":535,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 2rem;\n height: 2rem;\n clear: both;\n margin: 1rem auto;\n border-radius: 50%;\n border-left: 0 #000 solid;\n border-right: 0 #000 solid;\n animation: spSphere 1s infinite linear;\n}\n\n@keyframes spSphere {\n 0% {\n border-left: 0 #000 solid;\n border-right: 0 #000 solid;\n }\n\n 33% {\n border-left: 2rem #000 solid;\n border-right: 0 #000 solid;\n }\n\n 34% {\n border-left: 0 #000 solid;\n border-right: 2rem #000 solid;\n }\n\n 66% {\n border-left: 0 #000 solid;\n border-right: 0 #000 solid;\n }\n}\n"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"debb9c","snapshot":null,"tags":null,"title":"loader by Yaya12085","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1136,"cssLen":347,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Loading...\n

","css":".loader {\n display: flex;\n align-items: center;\n}\n\n.icon {\n height: 1.5rem;\n width: 1.5rem;\n animation: spin 1s linear infinite;\n stroke: rgba(107, 114, 128, 1);\n}\n\n.loading-text {\n font-size: 0.75rem;\n line-height: 1rem;\n font-weight: 500;\n color: rgba(107, 114, 128, 1);\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}"}]}},"actionData":null,"errors":null}