{"loaderData":{"0":null,"0-3":{"total":7413,"projects":[{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"27fc02","snapshot":null,"tags":null,"title":"loader by SmookyDev","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":855,"cssLen":2447,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n\n","css":".absolute{position:absolute}.relative{position:relative}.z-40{z-index:40}.z-\\[60\\]{z-index:60}.flex{display:flex}.aspect-square{aspect-ratio:1 / 1}.w-32{width:8rem}.w-\\[85\\%\\]{width:85%}@keyframes spin{to{transform:rotate(360deg)}}.animate-\\[spin_3s_linear_infinite\\]{animation:spin 3s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.animate-\\[spin_5s_linear_infinite\\]{animation:spin 5s linear infinite}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-full{border-radius:9999px}.bg-\\[conic-gradient\\(\\#34d399_0deg\\2c \\#34d399_180deg\\2c transparent_180deg\\2c transparent_360deg\\)\\]{background-image:conic-gradient(#34d399 0deg,#34d399 180deg,transparent 180deg,transparent 360deg)}.bg-\\[conic-gradient\\(white_0deg\\2c white_300deg\\2c transparent_270deg\\2c transparent_360deg\\)\\]{background-image:conic-gradient(white 0deg,white 300deg,transparent 270deg,transparent 360deg)}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:z-\\[80\\]::before{content:var(--tw-content);z-index:80}.before\\:aspect-square::before{content:var(--tw-content);aspect-ratio:1 / 1}.before\\:w-\\[60\\%\\]::before{content:var(--tw-content);width:60%}@keyframes spin{to{content:var(--tw-content);transform:rotate(360deg)}}.before\\:animate-\\[spin_2s_linear_infinite\\]::before{content:var(--tw-content);animation:spin 2s linear infinite}.before\\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\\:bg-\\[conic-gradient\\(white_0deg\\2c white_270deg\\2c transparent_180deg\\2c transparent_360deg\\)\\]::before{content:var(--tw-content);background-image:conic-gradient(white 0deg,white 270deg,transparent 180deg,transparent 360deg)}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:z-\\[60\\]::after{content:var(--tw-content);z-index:60}.after\\:aspect-square::after{content:var(--tw-content);aspect-ratio:1 / 1}.after\\:w-3\\/4::after{content:var(--tw-content);width:75%}@keyframes spin{to{content:var(--tw-content);transform:rotate(360deg)}}.after\\:animate-\\[spin_3s_linear_infinite\\]::after{content:var(--tw-content);animation:spin 3s linear infinite}.after\\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\\:bg-\\[conic-gradient\\(\\#065f46_0deg\\2c \\#065f46_180deg\\2c transparent_180deg\\2c transparent_360deg\\)\\]::after{content:var(--tw-content);background-image:conic-gradient(#065f46 0deg,#065f46 180deg,transparent 180deg,transparent 360deg)}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"876f74","snapshot":null,"tags":null,"title":"loader by Satwinder04","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":350,"cssLen":1005,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader3 {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.bars {\n width: 10px;\n height: 20px;\n margin: 0 2px;\n border-radius: 4px;\n animation: loader3 3s ease-in-out infinite;\n}\n\n.bar1 {\n background-color: #4285F4;\n animation-delay: -0.8s;\n}\n\n.bar2 {\n background-color: #4285F4;\n animation-delay: -0.7s;\n}\n\n.bar3 {\n background-color: #4285F4;\n animation-delay: -0.6s;\n}\n\n.bar4 {\n background-color: #4285F4;\n animation-delay: -0.5s;\n}\n\n.bar5 {\n background-color: #4285F4;\n animation-delay: -0.4s;\n}\n\n.bar6 {\n background-color: #4285F4;\n animation-delay: -0.3s;\n}\n\n.bar7 {\n background-color: #4285F4;\n animation-delay: -0.2s;\n}\n\n.bar8 {\n background-color: #4285F4;\n animation-delay: -0.1s;\n}\n\n.bar9 {\n background-color: #4285F4;\n animation-delay: 0s;\n}\n\n.bar10 {\n background-color: #4285F4;\n animation-delay: 0.1s;\n}\n\n@keyframes loader3 {\n 0% {\n transform: scale(1);\n }\n\n 20% {\n transform: scale(1, 2.32);\n }\n\n 40% {\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"e019ab","snapshot":null,"tags":null,"title":"loader by mrhyddenn","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":57,"cssLen":982,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%,-50%);\n overflow: hidden;\n height: 80px;\n width: 80px;\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px rgb(25, 116, 253);\n border-radius: 50%;\n}\n\n.waves {\n position: relative;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background: rgb(30, 146, 255);\n box-shadow: inset 0 0 50px rgb(0,0,0,.3);\n}\n\n.waves::before,\n.waves::after {\n content: '';\n position: absolute;\n width: 200%;\n height: 200%;\n top: 0;\n left: 50%;\n transform: translate(-50%, -75%);\n background: #000;\n}\n\n.waves::before {\n border-radius: 45%;\n background: rgb(248, 248, 248);\n animation: wave91234 5s linear infinite;\n}\n\n.waves::after {\n border-radius: 40%;\n background: rgb(255,255,255,.5);\n animation: wave91234 10s linear infinite;\n}\n\n@keyframes wave91234 {\n 0% {\n transform: translate(-50%, -75%) rotate(0deg);\n }\n\n 100% {\n transform: translate(-50%, -75%) rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"631e5f","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1162,"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 height: 200px;\n width: 200px;\n border-bottom: 3px solid #ff3d00;\n box-sizing: border-box;\n animation: drawLine 4s linear infinite;\n}\n\n.loader:before {\n content: \"\";\n position: absolute;\n left: calc(100% + 14px);\n bottom: -6px;\n width: 16px;\n height: 100px;\n border-radius: 20px 20px 50px 50px;\n background-repeat: no-repeat;\n background-image: linear-gradient(#ff3d00 6px, transparent 0),\n linear-gradient(45deg, rgba(0, 0, 0, 0.02) 49%, white 51%),\n linear-gradient(315deg, rgba(0, 0, 0, 0.02) 49%, white 51%),\n linear-gradient( to bottom, #ffffff 10%, #ff3d00 10%, #ff3d00 90%, #ffffff 90% );\n background-size: 3px 3px, 8px 8px, 8px 8px, 16px 88px;\n background-position: center bottom, left 88px, right 88px, left top;\n transform: rotate(25deg);\n animation: pencilRot 4s linear infinite;\n}\n\n@keyframes drawLine {\n 0%, 100% {\n width: 0px\n }\n\n 45%, 55% {\n width: 200px\n }\n}\n\n@keyframes pencilRot {\n 0%, 45% {\n bottom: -6px;\n left: calc(100% + 14px);\n transform: rotate(25deg);\n }\n\n 55%,\n 100% {\n bottom: -12px;\n left: calc(100% + 16px);\n transform: rotate(220deg);\n }\n}"},{"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}"}]}},"actionData":null,"errors":null}