{"loaderData":{"0":null,"0-3":{"total":7413,"projects":[{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"80ffbf","snapshot":null,"tags":null,"title":"loader by mobinkakei","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":136,"cssLen":592,"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 position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.loader_cube {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 30px;\n}\n\n.loader_cube--glowing {\n z-index: 2;\n background-color: rgba(255, 255, 255, 0.2);\n border: 2px solid rgba(255, 255, 255, 0.3);\n}\n\n.loader_cube--color {\n z-index: 1;\n filter: blur(2px);\n background: linear-gradient(135deg, #1afbf0, #da00ff);\n animation: loadtwo 2.5s ease-in-out infinite;\n}\n\n@keyframes loadtwo {\n 50% {\n transform: rotate(-80deg);\n }\n}"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"f693ba","snapshot":null,"tags":null,"title":"loader by mrhyddenn","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":241,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n border: 3px solid rgb(255,255,255,.2);\n border-top-color: transparent;\n animation: rot1 1.2s linear infinite;\n}\n\n@keyframes rot1 {\n to {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"78b91e","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":752,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n display: block;\n position: relative;\n height: 32px;\n width: 140px;\n border: 3px solid #fff;\n border-radius: 20px;\n box-sizing: border-box;\n animation: balancing 2s linear infinite alternate;\n transform-origin: center center;\n}\n\n.loader:before {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n width: 52px;\n height: 26px;\n border-radius: 20px;\n background: gold;\n animation: ballbns 2s linear infinite alternate;\n}\n\n@keyframes ballbns {\n 0% {\n left: 0;\n transform: translateX(0%);\n }\n\n 100% {\n left: 100%;\n transform: translateX(-100%);\n }\n}\n\n@keyframes balancing {\n 0% {\n transform: rotate(-25deg);\n }\n\n 50% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(25deg);\n }\n}\n "},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"7c94ff","snapshot":null,"tags":null,"title":"loader by Nawsome","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":560,"cssLen":599,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".loading {\n width: 124px;\n height: 124px;\n}\n\n.loading svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.circle {\n transform: rotate(-90deg);\n transform-origin: center;\n stroke-dasharray: 380;\n stroke-dashoffset: 380;\n animation: circle_4 2s ease-in-out forwards;\n}\n\n.check {\n stroke-dasharray: 45;\n stroke-dashoffset: 45;\n animation: check_4 0.2s 2s ease-in-out forwards;\n}\n\n@keyframes circle_4 {\n 0% {\n stroke-dashoffset: 380;\n }\n\n 100% {\n stroke-dashoffset: 0;\n }\n}\n\n@keyframes check_4 {\n 0% {\n stroke-dashoffset: 45;\n }\n\n 100% {\n stroke-dashoffset: 90;\n }\n}"},{"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}"}]}},"actionData":null,"errors":null}