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

\n","css":".loader {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n perspective: 800px;\n}\n\n.loader-cube {\n width: 100px;\n height: 100px;\n position: relative;\n transform-style: preserve-3d;\n transform-origin: 50% 50%;\n animation: rotate 4s infinite linear;\n}\n\n.loader-cube:before,\n.loader-cube:after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: transparent;\n}\n\n.loader-cube:before {\n transform: rotateX(90deg) translateZ(50px);\n}\n\n.loader-cube:after {\n transform: rotateY(90deg) translateZ(50px);\n}\n\n.loader-cube .face {\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgb(252, 248, 248);\n opacity: 0.8;\n border: 2px solid rgb(252, 250, 250);\n}\n\n.loader-cube .face:nth-child(1) {\n transform: rotateY(0deg) translateZ(50px);\n background-color: #e74c3c;\n}\n\n.loader-cube .face:nth-child(2) {\n transform: rotateX(90deg) translateZ(50px);\n background-color: #3498db;\n}\n\n.loader-cube .face:nth-child(3) {\n transform: rotateY(180deg) translateZ(50px);\n background-color: #2ecc71;\n}\n\n.loader-cube .face:nth-child(4) {\n transform: rotateX(-90deg) translateZ(50px);\n background-color: #f1c40f;\n}\n\n.loader-cube .face:nth-child(5) {\n transform: rotateY(90deg) translateZ(50px);\n background-color: #9b59b6;\n}\n\n.loader-cube .face:nth-child(6) {\n transform: rotateY(0deg) translateZ(-50px);\n background-color: #1abc9c;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotateY(0deg) rotateX(0deg);\n }\n\n 100% {\n transform: rotateY(1turn) rotateX(1turn);\n }\n}\n"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"28d6c4","snapshot":null,"tags":null,"title":"loader by Akshdeep74644","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":113,"cssLen":1183,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Loading.....\n \n

","css":".loader {\n position: relative;\n}\n\n.box-1 {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n height: 150px;\n width: 150px;\n background-color: #FFFFFF;\n background-image: linear-gradient(135deg, #FFFFFF 0%, #6284FF 34%, #FF0000 100%);\n border-radius: 50%;\n animation: rotate 3s linear infinite;\n box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.box-1::before {\n content: '';\n position: absolute;\n inset: 15px;\n background: #f5f5f5;\n border-radius: 50%;\n box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;\n}\n\n.loader span {\n text-align: center;\n position: absolute;\n top: 65px;\n left: 25px;\n color: black;\n font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;\n letter-spacing: 2px;\n font-weight: 800;\n font-size: 1rem;\n animation: text-animate412 3s linear infinite;\n}\n\n@keyframes text-animate412 {\n\n 10% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"2380ac","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":972,"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: block;\n margin: 20px auto;\n box-sizing: border-box;\n position: relative;\n}\n\n.loader::after {\n content: '';\n width: 48px;\n height: 48px;\n left: 0;\n bottom: 0;\n position: absolute;\n border-radius: 50% 50% 0;\n border: 15px solid red;\n transform: rotate(45deg) translate(0, 0);\n box-sizing: border-box;\n animation: animMarker 0.4s ease-in-out infinite alternate;\n}\n\n.loader::before {\n content: '';\n box-sizing: border-box;\n position: absolute;\n left: 0;\n right: 0;\n margin: auto;\n top: 150%;\n width: 24px;\n height: 4px;\n border-radius: 50%;\n background: rgba(0, 0, 0, 0.2);\n animation: animShadow 0.4s ease-in-out infinite alternate;\n}\n\n@keyframes animMarker {\n 0% {\n transform: rotate(45deg) translate(5px, 5px);\n }\n\n 100% {\n transform: rotate(45deg) translate(-5px, -5px);\n }\n}\n\n@keyframes animShadow {\n 0% {\n transform: scale(0.5);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n "},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"b6bf34","snapshot":null,"tags":null,"title":"loader by JaydipPrajapati1910","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1096,"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 display: grid;\n color: hsl(204, 86%, 69%);\n}\n\n.loader:before,\n.loader:after {\n content: \"\";\n grid-area: 1/1;\n --c1: linear-gradient(90deg,rgb(247, 247, 247) calc(100%/3),currentColor 0 calc(2*100%/3),rgb(247, 247, 247) 0);\n --c2: linear-gradient( 0deg,rgb(247, 247, 247) calc(100%/3),currentColor 0 calc(2*100%/3),rgb(247, 247, 247) 0);\n background: var(--c1),\n var(--c2),\n var(--c1),\n var(--c2);\n background-size: 300% 8px,8px 300%;\n background-repeat: no-repeat;\n animation: l1 1s infinite linear;\n}\n\n.loader:after {\n margin: 10px;\n transform: scaleX(-1);\n animation-delay: -.25s;\n}\n\n@keyframes l1 {\n 0% {\n background-position: 50% 0,100% 100%,0 100%,0 0\n }\n\n 25% {\n background-position: 0 0,100% 50% ,0 100%,0 0\n }\n\n 50% {\n background-position: 0 0,100% 0 ,50% 100%,0 0\n }\n\n 75% {\n background-position: 0 0,100% 0 ,100% 100%,0 50%\n }\n\n 75.01% {\n background-position: 100% 0,100% 0 ,100% 100%,0 50%\n }\n\n 100% {\n background-position: 50% 0,100% 0 ,100% 100%,0 100%\n }\n}\n \n"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"cb798b","snapshot":null,"tags":null,"title":"loader by carlosepcc","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":163,"cssLen":684,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

€

","css":".flex {\n display: flex\n}\n\n.aspect-square {\n aspect-ratio: 1 / 1\n}\n\n.w-8 {\n width: 2rem\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg)\n }\n}\n\n.animate-spin {\n animation: spin 1s linear infinite\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-center {\n justify-content: center\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.border-t-2 {\n border-top-width: 2px\n}\n\n.border-yellow-500 {\n --tw-border-opacity: 1;\n border-color: rgb(234 179 8 / var(--tw-border-opacity))\n}\n\n.bg-yellow-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(253 224 71 / var(--tw-bg-opacity))\n}\n\n.text-yellow-700 {\n --tw-text-opacity: 1;\n color: rgb(161 98 7 / var(--tw-text-opacity))\n}"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"ba51d6","snapshot":null,"tags":null,"title":"loader by DevPTG","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":109,"cssLen":1283,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"@keyframes spin {\n from {\n transform: rotate(0);\n }\n\n to {\n transform: rotate(359deg);\n }\n}\n\n@keyframes spin3D {\n from {\n transform: rotate3d(.5,.5,.5, 360deg);\n }\n\n to {\n transform: rotate3d(0deg);\n }\n}\n\n@keyframes configure-clockwise {\n 0% {\n transform: rotate(0);\n }\n\n 25% {\n transform: rotate(90deg);\n }\n\n 50% {\n transform: rotate(180deg);\n }\n\n 75% {\n transform: rotate(270deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes configure-xclockwise {\n 0% {\n transform: rotate(45deg);\n }\n\n 25% {\n transform: rotate(-45deg);\n }\n\n 50% {\n transform: rotate(-135deg);\n }\n\n 75% {\n transform: rotate(-225deg);\n }\n\n 100% {\n transform: rotate(-315deg);\n }\n}\n\n@keyframes pulse {\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n to {\n opacity: .25;\n transform: scale(.75);\n }\n}\n\n.circle-border {\n width: 150px;\n height: 150px;\n padding: 3px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n background: rgb(63,249,220);\n background: linear-gradient(0deg, rgba(63,249,220,0.1) 33%, rgb(5, 255, 138) 100%);\n animation: spin .8s linear 0s infinite;\n}\n\n.circle-core {\n width: 100%;\n height: 100%;\n background-color: #04090e00;\n border-radius: 50%;\n}\n"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"fc0924","snapshot":null,"tags":null,"title":"loader by dimasptrautmaa","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":241,"cssLen":1399,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"#page {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n#container {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n}\n\n#h3 {\n color: white;\n}\n\n#ring {\n width: 190px;\n height: 190px;\n border: 1px solid transparent;\n border-radius: 50%;\n position: absolute;\n}\n\n#ring:nth-child(1) {\n border-bottom: 8px solid rgb(255, 141, 249);\n animation: rotate1 2s linear infinite;\n}\n\n@keyframes rotate1 {\n from {\n transform: rotateX(50deg) rotateZ(110deg);\n }\n\n to {\n transform: rotateX(50deg) rotateZ(470deg);\n }\n}\n\n#ring:nth-child(2) {\n border-bottom: 8px solid rgb(255,65,106);\n animation: rotate2 2s linear infinite;\n}\n\n@keyframes rotate2 {\n from {\n transform: rotateX(20deg) rotateY(50deg) rotateZ(20deg);\n }\n\n to {\n transform: rotateX(20deg) rotateY(50deg) rotateZ(380deg);\n }\n}\n\n#ring:nth-child(3) {\n border-bottom: 8px solid rgb(0,255,255);\n animation: rotate3 2s linear infinite;\n}\n\n@keyframes rotate3 {\n from {\n transform: rotateX(40deg) rotateY(130deg) rotateZ(450deg);\n }\n\n to {\n transform: rotateX(40deg) rotateY(130deg) rotateZ(90deg);\n }\n}\n\n#ring:nth-child(4) {\n border-bottom: 8px solid rgb(252, 183, 55);\n animation: rotate4 2s linear infinite;\n}\n\n@keyframes rotate4 {\n from {\n transform: rotateX(70deg) rotateZ(270deg);\n }\n\n to {\n transform: rotateX(70deg) rotateZ(630deg);\n }\n}"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"3407ff","snapshot":null,"tags":null,"title":"loader by gagan-gv","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":422,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 60px;\n height: 60px;\n background: #4285f4;\n border-radius: 10%;\n animation: dice3 7s ease-in-out infinite;\n filter: drop-shadow(2px 3px 40px #444);\n}\n\n@keyframes dice3 {\n from, to {\n transform: translateX(-50px) rotateX(0deg);\n }\n\n 25% {\n background: #db4437;\n }\n\n 50% {\n background: #f4b400;\n transform: translateX(50px) rotate(360deg);\n }\n\n 75% {\n background: #0f9d58;\n }\n}"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"8adcec","snapshot":null,"tags":null,"title":"loader by JaydipPrajapati1910","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":917,"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: 80px;\n border: 4px solid #00F45B;\n border-right-color: transparent;\n padding: 6px;\n background: repeating-linear-gradient(90deg,#00F45B 0 20px,#0000 0 30px) \n left/0% 100% no-repeat content-box content-box;\n position: relative;\n animation: p5 2s infinite steps(6);\n}\n\n.loader::before {\n content: \"\";\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: 100%;\n width: 20px;\n background: linear-gradient(\n #0000 calc(50% - 14px),#00F45B 0 calc(50% - 10px),\n #0000 0 calc(50% + 10px),#00F45B 0 calc(50% + 14px),#0000 0) left /100% 100%,\n linear-gradient(#00F45B calc(50% - 10px),#0000 0 calc(50% + 10px),#00F45B 0) left /4px 100%,\n linear-gradient(#0000 calc(50% - 10px),#00F45B 0 calc(50% + 10px),#0000 0) right/4px 100%;\n background-repeat: no-repeat;\n}\n\n@keyframes p5 {\n 100% {\n background-size: 120% 100%\n }\n}\n \n"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"f375d9","snapshot":null,"tags":null,"title":"loader by S4tyendra","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":149,"cssLen":1624,"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":".container {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.container .preloader {\n animation: rotate 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;\n}\n\n@keyframes rotate {\n 50% {\n transform: rotate(360deg);\n }\n\n 100% {\n transform: rotate(720deg);\n }\n}\n\n.preloader span {\n --c: #3f9bf2;\n position: absolute;\n display: block;\n height: 64px;\n width: 64px;\n background: var(--c);\n border: 1px solid var(--c);\n border-radius: 100%;\n}\n\n.preloader span:nth-child(1) {\n transform: translate(-28px, -28px);\n animation: shape_1 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;\n}\n\n@keyframes shape_1 {\n 60% {\n transform: scale(0.4);\n }\n}\n\n.preloader span:nth-child(2) {\n transform: translate(28px, -28px);\n animation: shape_2 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;\n}\n\n@keyframes shape_2 {\n 40% {\n transform: scale(0.4);\n }\n}\n\n.preloader span:nth-child(3) {\n position: relative;\n border-radius: 0px;\n transform: scale(0.98) rotate(-45deg);\n animation: shape_3 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;\n}\n\n@keyframes shape_3 {\n 50% {\n border-radius: 100%;\n transform: scale(0.5) rotate(-45deg);\n }\n\n 100% {\n transform: scale(0.98) rotate(-45deg);\n }\n}\n\n.shadow {\n position: relative;\n top: 30px;\n left: 50%;\n transform: translateX(-50%);\n display: block;\n height: 16px;\n width: 64px;\n border-radius: 50%;\n background-color: #d9d9d9;\n border: 1px solid #d9d9d9;\n animation: shadow 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;\n}\n\n@keyframes shadow {\n 50% {\n transform: translateX(-50%) scale(0.5);\n border-color: #f2f2f2;\n }\n}\n"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"380469","snapshot":null,"tags":null,"title":"loader by Deri-Kurniawan","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":530,"cssLen":555,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n\n","css":".flex{display:flex}.h-32{height:8rem}.h-4{height:1rem}.h-64{height:16rem}.w-2\\/4{width:50%}.w-4\\/5{width:80%}.w-56{width:14rem}.w-full{width:100%}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.flex-col{flex-direction:column}.gap-2{gap:0.5rem}.gap-4{gap:1rem}.rounded-md{border-radius:0.375rem}.rounded-xl{border-radius:0.75rem}.bg-neutral-300{--tw-bg-opacity:1;background-color:rgb(212 212 212 / var(--tw-bg-opacity))}.bg-neutral-400\\/50{background-color:rgb(163 163 163 / 0.5)}.p-4{padding:1rem}"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"09ec5d","snapshot":null,"tags":null,"title":"loader by Pradeepsaranbishnoi","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":85,"cssLen":1286,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"@keyframes pound {\n to {\n transform: scale(1.2);\n box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.65), 2px 6px 12px 0 rgba(0, 0, 0, 0.5), 3px 8px 15px 0 rgba(0, 0, 0, 0.45)\n }\n}\n\nul.loader {\n display: block;\n position: relative;\n width: 5em;\n}\n\n.loader li {\n list-style: none;\n display: block;\n float: left;\n width: 0.5em;\n height: 3em;\n margin: 0 0.5em 0 0;\n background: #635863;\n background: -moz-linear-gradient(top, #635863 0%, #3d353b 100%);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#635863), color-stop(100%,#3d353b));\n background: -webkit-linear-gradient(top, #635863 0%,#3d353b 100%);\n background: -o-linear-gradient(top, #635863 0%,#3d353b 100%);\n background: -ms-linear-gradient(top, #635863 0%,#3d353b 100%);\n background: linear-gradient(to bottom, #635863 0%,#3d353b 100%);\n box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.0), 1px 1px 1px 0 rgba(0, 0, 0, 0.0), 1px 1px 1px 0 rgba(0, 0, 0, 0.0);\n animation: pound .7s ease-in-out infinite alternate;\n animation-delay: 0.05s;\n transform-origin: center;\n}\n\n.loader li:nth-child(2) {\n animation-delay: 0.20s;\n}\n\n.loader li:nth-child(3) {\n animation-delay: 0.35s;\n}\n\n.loader li:nth-child(4) {\n animation-delay: 0.50s;\n}\n\n.loader li:nth-child(5) {\n animation-delay: 0.65s;\n}\n"}]}},"actionData":null,"errors":null}