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

","css":".loader {\n height: 20px;\n width: 20px;\n border-radius: 50%;\n background-color: #69ffa8;\n animation: 1.5s pulse infinite ease-in-out;\n}\n\n@keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 #69ffa8;\n }\n\n 100% {\n box-shadow: 0 0 0 14px #69ffa800;\n }\n}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"b7b4a7","snapshot":null,"tags":null,"title":"loader by KhaledMatalkah","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":1215,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n width: 100px;\n height: 100px;\n border: 8px solid #ffcc00;\n border-radius: 50%;\n border-top-color: transparent;\n position: relative;\n animation: loaderAnimation 1.5s linear infinite;\n}\n\n.loader::before,\n.loader::after {\n content: '';\n position: absolute;\n height: 20px;\n width: 20px;\n left: 50%;\n top: 50%;\n background-color: #ffcc00;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n}\n\n.loader::before {\n animation: loaderAnimationBefore 1s linear infinite;\n}\n\n.loader::after {\n animation: loaderAnimationAfter 1s linear infinite;\n}\n\n@keyframes loaderAnimation {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes loaderAnimationBefore {\n 0% {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n\n 50% {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0);\n }\n\n 100% {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n}\n\n@keyframes loaderAnimationAfter {\n 0% {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0);\n }\n\n 50% {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n\n 100% {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0);\n }\n}\n"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"d039e4","snapshot":null,"tags":null,"title":"loader by JaydipPrajapati1910","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":545,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".loader {\n display: block;\n --height-of-loader: 4px;\n --loader-color: blueviolet;\n width: 130px;\n height: var(--height-of-loader);\n border-radius: 30px;\n background-color: rgba(0,0,0,0.2);\n position: relative;\n}\n\n.loader::before {\n content: \"\";\n position: absolute;\n background: var(--loader-color);\n top: 0;\n left: 0;\n width: 0%;\n height: 100%;\n border-radius: 30px;\n animation: moving 1s ease-in-out infinite;\n ;\n}\n\n@keyframes moving {\n 50% {\n width: 100%;\n }\n\n 100% {\n width: 0;\n right: 0;\n left: unset;\n }\n}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"e0e263","snapshot":null,"tags":null,"title":"loader by PriyanshuGupta28","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":295,"cssLen":794,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader-container {\n perspective: 800px;\n}\n\n.loader {\n position: relative;\n width: 80px;\n height: 80px;\n transform-style: preserve-3d;\n animation: spin 3s linear infinite;\n}\n\n.face {\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: #2196F3;\n border: 2px solid #1976D2;\n}\n\n.front {\n transform: translateZ(40px);\n}\n\n.back {\n transform: rotateY(180deg) translateZ(40px);\n}\n\n.left {\n transform: rotateY(-90deg) translateZ(40px);\n}\n\n.right {\n transform: rotateY(90deg) translateZ(40px);\n}\n\n.top {\n transform: rotateX(90deg) translateZ(40px);\n}\n\n.bottom {\n transform: rotateX(-90deg) translateZ(40px);\n}\n\n@keyframes spin {\n 0% {\n transform: rotateX(0) rotateY(0) rotateZ(0);\n }\n\n 100% {\n transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"6c1394","snapshot":null,"tags":null,"title":"loader by ShYnGySYes","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":102,"cssLen":1112,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n","css":".spinner {\n width: 44px;\n height: 44px;\n animation: spinner-y0fdc1 2s infinite ease;\n transform-style: preserve-3d;\n}\n\n.spinner > div {\n background-color: rgb(255, 254, 254);\n height: 100%;\n position: absolute;\n width: 100%;\n border: 2px solid #ff0000;\n}\n\n.spinner div:nth-of-type(1) {\n transform: translateZ(-22px) rotateY(180deg);\n}\n\n.spinner div:nth-of-type(2) {\n transform: rotateY(-270deg) translateX(50%);\n transform-origin: top right;\n}\n\n.spinner div:nth-of-type(3) {\n transform: rotateY(270deg) translateX(-50%);\n transform-origin: center left;\n}\n\n.spinner div:nth-of-type(4) {\n transform: rotateX(90deg) translateY(-50%);\n transform-origin: top center;\n}\n\n.spinner div:nth-of-type(5) {\n transform: rotateX(-90deg) translateY(50%);\n transform-origin: bottom center;\n}\n\n.spinner div:nth-of-type(6) {\n transform: translateZ(22px);\n}\n\n@keyframes spinner-y0fdc1 {\n 0% {\n transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);\n }\n\n 50% {\n transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);\n }\n\n 100% {\n transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);\n }\n}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"87f6ba","snapshot":null,"tags":null,"title":"loader by adamgiebl","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":949,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n width: 64px;\n height: 64px;\n position: relative;\n background: #FFF;\n border-radius: 4px;\n overflow: hidden;\n}\n\n.loader:before {\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 40px;\n height: 40px;\n transform: rotate(45deg) translate(30%, 40%);\n background: #933c3c;\n box-shadow: 32px -34px 0 5px #650a0a;\n animation: slide 2s infinite ease-in-out alternate;\n}\n\n.loader:after {\n content: \"\";\n position: absolute;\n left: 10px;\n top: 10px;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #650a0a;\n transform: rotate(0deg);\n transform-origin: 35px 145px;\n animation: rotate 2s infinite ease-in-out;\n}\n\n@keyframes slide {\n 0% , 100% {\n bottom: -35px\n }\n\n 25% , 75% {\n bottom: -2px\n }\n\n 20% , 80% {\n bottom: 2px\n }\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(-15deg)\n }\n\n 25% , 75% {\n transform: rotate(0deg)\n }\n\n 100% {\n transform: rotate(25deg)\n }\n}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"4c2be5","snapshot":null,"tags":null,"title":"loader by coding-masala","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":319,"cssLen":843,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loading-spinner {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 8em;\n}\n\n.loading-spinner-inner {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.loading-spinner-circle {\n width: 1em;\n height: 1em;\n border-radius: 50%;\n background-color: #db9334;\n margin: 0 5px;\n animation: loading-spinner 1s ease-in-out infinite;\n}\n\n.loading-spinner-circle:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.loading-spinner-circle:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n.loading-spinner-circle:nth-child(4) {\n animation-delay: 0.6s;\n}\n\n.loading-spinner-circle:nth-child(5) {\n animation-delay: 0.8s;\n}\n\n@keyframes loading-spinner {\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n\n 20% {\n transform: scale(1.5);\n opacity: 0.5;\n }\n\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n}\n"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"22a52c","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1257,"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: 78px;\n height: 78px;\n border-radius: 50%;\n background: #fff;\n border: 8px solid #131a1d;\n overflow: hidden;\n box-sizing: border-box;\n}\n\n.loader::after {\n content: '';\n position: absolute;\n left: 0;\n top: -50%;\n width: 100%;\n height: 100%;\n background: #263238;\n z-index: 5;\n border-bottom: 8px solid #131a1d;\n box-sizing: border-box;\n animation: eyeShade 3s infinite;\n}\n\n.loader::before {\n content: '';\n position: absolute;\n left: 20px;\n bottom: 15px;\n width: 32px;\n z-index: 2;\n height: 32px;\n background: #111;\n border-radius: 50%;\n animation: eyeMove 3s infinite;\n}\n\n@keyframes eyeShade {\n 0% {\n transform: translateY(0)\n }\n\n 20% {\n transform: translateY(5px)\n }\n\n 40% , 50% {\n transform: translateY(-5px)\n }\n\n 60% {\n transform: translateY( -8px)\n }\n\n 75% {\n transform: translateY( 5px)\n }\n\n 100% {\n transform: translateY(10px)\n }\n}\n\n@keyframes eyeMove {\n 0% {\n transform: translate(0 , 0)\n }\n\n 20% {\n transform: translate(0px , 5px)\n }\n\n 40% , 50% {\n transform: translate(0px , -5px)\n }\n\n 60% {\n transform: translate(-10px , -5px)\n }\n\n 75% {\n transform: translate(-20px , 5px)\n }\n\n 100% {\n transform: translate(0 , 10px)\n }\n}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"3e4175","snapshot":null,"tags":null,"title":"loader by SelfMadeSystem","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":9668,"cssLen":452,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".loader {\n width: 12em;\n height: 12em;\n}\n\n.loader path {\n stroke: #000;\n stroke-width: 0.6px;\n animation: dashArray 4s ease-in-out infinite,\n dashOffset 4s linear infinite;\n}\n\n@keyframes dashArray {\n 0% {\n stroke-dasharray: 0 1 359 0;\n }\n\n 50% {\n stroke-dasharray: 0 359 1 0;\n }\n\n 100% {\n stroke-dasharray: 359 1 0 0;\n }\n}\n\n@keyframes dashOffset {\n 0% {\n stroke-dashoffset: 365;\n }\n\n 100% {\n stroke-dashoffset: 5;\n }\n}\n"},{"created":"2024-01-22T16:54:18.000Z","isPrivate":0,"projectId":"82db6a","snapshot":null,"tags":null,"title":"loader by AbanoubMagdy1","updated":"2024-01-22T16:54:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":829,"cssLen":436,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".loader {\n --dim: 6rem;\n background-color: #ED8A19;\n width: var(--dim);\n height: var(--dim);\n border-radius: 50%;\n display: grid;\n place-items: center;\n animation: spin_412 5s infinite;\n}\n\n.loader .loader-svg {\n transform: translateY(-2px) scale(.7);\n}\n\n@keyframes spin_412 {\n 0% {\n transform: rotate(0) scale(1);\n }\n\n 50% {\n transform: rotate(720deg) scale(1.3);\n }\n\n 100% {\n transform: rotate(0) scale(1);\n }\n}"},{"created":"2024-01-22T16:54:18.000Z","isPrivate":0,"projectId":"310bd4","snapshot":null,"tags":null,"title":"loader by VashonG","updated":"2024-01-22T16:54:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":62,"cssLen":1088,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n --hue: 210;\n --size: 100px;\n --border: 10px;\n --speed: 1s;\n --blur: var(--border);\n}\n\n.loader {\n width: var(--border);\n aspect-ratio: 1;\n background: white;\n border-radius: 50%;\n position: absolute;\n --y: calc((var(--size) * -0.5) + (var(--border) * 0.5));\n transform: rotate(0deg) translateY(var(--y));\n animation: spin var(--speed) infinite linear;\n}\n\n.loader::before {\n content: \"\";\n position: absolute;\n inset: calc(var(--border) * -0.5);\n border-radius: 50%;\n background: white;\n filter: blur(var(--blur));\n z-index: -1;\n}\n\n.loader::after {\n content: \"\";\n width: var(--size);\n aspect-ratio: 1;\n position: absolute;\n top: 0%;\n left: 50%;\n translate: -50% 0;\n background: conic-gradient(\n white,\n hsl(var(--hue), 100%, 70%),\n hsl(var(--hue), 100%, 10%),\n transparent 65%\n );\n border-radius: 50%;\n mask: radial-gradient(\n transparent calc(((var(--size) * 0.5) - var(--border)) - 1px),\n white calc((var(--size) * 0.5) - var(--border))\n );\n}\n\n@keyframes spin {\n to {\n transform: rotate(-360deg) translateY(var(--y));\n }\n}\n"},{"created":"2024-01-22T16:54:18.000Z","isPrivate":0,"projectId":"8b0dcc","snapshot":null,"tags":null,"title":"loader by forgingdestiny","updated":"2024-01-22T16:54:18.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":237,"cssLen":761,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"/* Container for the loader */\n.loader {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 10em;\n}\n\n/* Circle elements */\n.circle {\n width: 1em;\n height: 1em;\n margin: 0 0.25em;\n border-radius: 50%;\n background-color: #a8d5e2;\n animation: wave 1.5s infinite ease-in-out;\n transition: background-color 0.3s ease;\n}\n\n/* Animation */\n@keyframes wave {\n 0%, 100% {\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(-1em);\n }\n}\n\n/* Delay for each circle */\n.circle:nth-child(1) {\n animation-delay: 0s;\n}\n\n.circle:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.circle:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n.circle:nth-child(4) {\n animation-delay: 0.6s;\n}\n\n.circle:nth-child(5) {\n animation-delay: 0.8s;\n}\n "}]}},"actionData":null,"errors":null}