{"loaderData":{"0":null,"0-3":{"total":7413,"projects":[{"created":"2024-01-22T16:54:15.000Z","isPrivate":0,"projectId":"0052a4","snapshot":null,"tags":null,"title":"loader by gharsh11032000","updated":"2024-01-22T16:54:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":62,"cssLen":633,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n","css":".loader {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 8em;\n height: 2em;\n}\n\n.slider {\n position: absolute;\n inset: 0;\n background: #0974f1;\n border-radius: 50px;\n box-shadow: 0 0px 20px rgba(9, 117, 241, 0.4);\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n left: 0.3em;\n bottom: 0.3em;\n background-color: white;\n border-radius: 50px;\n animation: move 1.5s cubic-bezier(0.23, 1, 0.320, 1) infinite alternate;\n}\n\n@keyframes move {\n 0% {\n transform: translateX(0em) rotate(0deg);\n }\n\n 100% {\n transform: translateX(6em) rotate(270deg);\n }\n}"},{"created":"2024-01-22T16:54:15.000Z","isPrivate":0,"projectId":"e504a3","snapshot":null,"tags":null,"title":"loader by JaydipPrajapati1910","updated":"2024-01-22T16:54:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":191,"cssLen":1025,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner {\n position: absolute;\n width: 128px;\n height: 128px;\n top: calc(50% - 64px);\n left: calc(50% - 64px);\n transform: perspective(206px) rotateX(45deg);\n}\n\n.outer {\n box-sizing: border-box;\n animation: spin 3s linear infinite;\n height: 100%;\n}\n\n.inner {\n position: absolute;\n border-radius: 50%;\n width: 64px;\n height: 64px;\n}\n\n.tl {\n top: 0;\n left: 0;\n border-top: 8px solid red;\n border-left: 10px solid red;\n animation: spin 1s ease-in-out infinite;\n}\n\n.tr {\n top: 0;\n right: 0;\n border-top: 8px solid #0575E6;\n border-right: 10px solid #0575E6;\n animation: spin 1s ease-in-out infinite;\n}\n\n.br {\n bottom: 0;\n right: 0;\n border-bottom: 8px solid #00F260;\n border-right: 10px solid #00F260;\n animation: spin 1s ease-in-out infinite;\n}\n\n.bl {\n bottom: 0;\n left: 0;\n border-bottom: 8px solid #e9e93e;\n border-left: 10x solid #e9e93e;\n animation: spin 1s ease-in-out infinite;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:15.000Z","isPrivate":0,"projectId":"4732ba","snapshot":null,"tags":null,"title":"loader by doniaskima","updated":"2024-01-22T16:54:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":762,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"/* HTML:

*/\n.loader {\n width: 100px;\n height: 45px;\n position: relative;\n}\n\n.loader:before,\n.loader:after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: #000;\n box-shadow: 0 0 0 50px;\n clip-path: polygon(-50px -20px,10% -12px,20% 0,calc(50% - 15px) 0,calc(50% - 10px) -20px,calc(50% - 8px) -15px,calc(50% + 8px) -15px,calc(50% + 10px) -20px,calc(50% + 15px) 0,80% 0,90% -12px,calc(100% + 50px) -20px,100% 80%,calc(100% + 10px) calc(100% + 10px),60% 100%,50% calc(100% + 15px),40% 100%,-10px calc(100% + 10px),0 80%);\n}\n\n.loader:after {\n animation: l9 1s infinite;\n transform: perspective(300px) translateZ(0px)\n}\n\n@keyframes l9 {\n to {\n transform: perspective(300px) translateZ(100px);\n opacity: 0\n }\n}"},{"created":"2024-01-22T16:54:15.000Z","isPrivate":0,"projectId":"efd0d6","snapshot":null,"tags":null,"title":"loader by BridgerSilk","updated":"2024-01-22T16:54:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":404,"cssLen":7535,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".banter-loader {\n position: absolute;\n left: 50%;\n top: 50%;\n width: 72px;\n height: 72px;\n margin-left: -36px;\n margin-top: -36px;\n}\n\n.banter-loader__box {\n float: left;\n position: relative;\n width: 20px;\n height: 20px;\n margin-right: 6px;\n}\n\n.banter-loader__box:before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background: rgb(81, 228, 220);\n border-radius: 6px;\n transform: rotate(45deg);\n opacity: 70%;\n}\n\n.banter-loader__box:nth-child(3n) {\n margin-right: 0;\n margin-bottom: 6px;\n}\n\n.banter-loader__box:nth-child(1):before,\n.banter-loader__box:nth-child(4):before {\n margin-left: 26px;\n}\n\n.banter-loader__box:nth-child(3):before {\n margin-top: 52px;\n}\n\n.banter-loader__box:last-child {\n margin-bottom: 0;\n}\n\n@keyframes moveBox-1 {\n 9.0909090909% {\n transform: translate(-26px, 0);\n }\n\n 18.1818181818% {\n transform: translate(0px, 0);\n }\n\n 27.2727272727% {\n transform: translate(0px, 0);\n }\n\n 36.3636363636% {\n transform: translate(26px, 0);\n }\n\n 45.4545454545% {\n transform: translate(26px, 26px);\n }\n\n 54.5454545455% {\n transform: translate(26px, 26px);\n }\n\n 63.6363636364% {\n transform: translate(26px, 26px);\n }\n\n 72.7272727273% {\n transform: translate(26px, 0px);\n }\n\n 81.8181818182% {\n transform: translate(0px, 0px);\n }\n\n 90.9090909091% {\n transform: translate(-26px, 0px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(1) {\n animation: moveBox-1 4s infinite;\n}\n\n@keyframes moveBox-2 {\n 9.0909090909% {\n transform: translate(0, 0);\n }\n\n 18.1818181818% {\n transform: translate(26px, 0);\n }\n\n 27.2727272727% {\n transform: translate(0px, 0);\n }\n\n 36.3636363636% {\n transform: translate(26px, 0);\n }\n\n 45.4545454545% {\n transform: translate(26px, 26px);\n }\n\n 54.5454545455% {\n transform: translate(26px, 26px);\n }\n\n 63.6363636364% {\n transform: translate(26px, 26px);\n }\n\n 72.7272727273% {\n transform: translate(26px, 26px);\n }\n\n 81.8181818182% {\n transform: translate(0px, 26px);\n }\n\n 90.9090909091% {\n transform: translate(0px, 26px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(2) {\n animation: moveBox-2 4s infinite;\n}\n\n@keyframes moveBox-3 {\n 9.0909090909% {\n transform: translate(-26px, 0);\n }\n\n 18.1818181818% {\n transform: translate(-26px, 0);\n }\n\n 27.2727272727% {\n transform: translate(0px, 0);\n }\n\n 36.3636363636% {\n transform: translate(-26px, 0);\n }\n\n 45.4545454545% {\n transform: translate(-26px, 0);\n }\n\n 54.5454545455% {\n transform: translate(-26px, 0);\n }\n\n 63.6363636364% {\n transform: translate(-26px, 0);\n }\n\n 72.7272727273% {\n transform: translate(-26px, 0);\n }\n\n 81.8181818182% {\n transform: translate(-26px, -26px);\n }\n\n 90.9090909091% {\n transform: translate(0px, -26px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(3) {\n animation: moveBox-3 4s infinite;\n}\n\n@keyframes moveBox-4 {\n 9.0909090909% {\n transform: translate(-26px, 0);\n }\n\n 18.1818181818% {\n transform: translate(-26px, 0);\n }\n\n 27.2727272727% {\n transform: translate(-26px, -26px);\n }\n\n 36.3636363636% {\n transform: translate(0px, -26px);\n }\n\n 45.4545454545% {\n transform: translate(0px, 0px);\n }\n\n 54.5454545455% {\n transform: translate(0px, -26px);\n }\n\n 63.6363636364% {\n transform: translate(0px, -26px);\n }\n\n 72.7272727273% {\n transform: translate(0px, -26px);\n }\n\n 81.8181818182% {\n transform: translate(-26px, -26px);\n }\n\n 90.9090909091% {\n transform: translate(-26px, 0px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(4) {\n animation: moveBox-4 4s infinite;\n}\n\n@keyframes moveBox-5 {\n 9.0909090909% {\n transform: translate(0, 0);\n }\n\n 18.1818181818% {\n transform: translate(0, 0);\n }\n\n 27.2727272727% {\n transform: translate(0, 0);\n }\n\n 36.3636363636% {\n transform: translate(26px, 0);\n }\n\n 45.4545454545% {\n transform: translate(26px, 0);\n }\n\n 54.5454545455% {\n transform: translate(26px, 0);\n }\n\n 63.6363636364% {\n transform: translate(26px, 0);\n }\n\n 72.7272727273% {\n transform: translate(26px, 0);\n }\n\n 81.8181818182% {\n transform: translate(26px, -26px);\n }\n\n 90.9090909091% {\n transform: translate(0px, -26px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(5) {\n animation: moveBox-5 4s infinite;\n}\n\n@keyframes moveBox-6 {\n 9.0909090909% {\n transform: translate(0, 0);\n }\n\n 18.1818181818% {\n transform: translate(-26px, 0);\n }\n\n 27.2727272727% {\n transform: translate(-26px, 0);\n }\n\n 36.3636363636% {\n transform: translate(0px, 0);\n }\n\n 45.4545454545% {\n transform: translate(0px, 0);\n }\n\n 54.5454545455% {\n transform: translate(0px, 0);\n }\n\n 63.6363636364% {\n transform: translate(0px, 0);\n }\n\n 72.7272727273% {\n transform: translate(0px, 26px);\n }\n\n 81.8181818182% {\n transform: translate(-26px, 26px);\n }\n\n 90.9090909091% {\n transform: translate(-26px, 0px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(6) {\n animation: moveBox-6 4s infinite;\n}\n\n@keyframes moveBox-7 {\n 9.0909090909% {\n transform: translate(26px, 0);\n }\n\n 18.1818181818% {\n transform: translate(26px, 0);\n }\n\n 27.2727272727% {\n transform: translate(26px, 0);\n }\n\n 36.3636363636% {\n transform: translate(0px, 0);\n }\n\n 45.4545454545% {\n transform: translate(0px, -26px);\n }\n\n 54.5454545455% {\n transform: translate(26px, -26px);\n }\n\n 63.6363636364% {\n transform: translate(0px, -26px);\n }\n\n 72.7272727273% {\n transform: translate(0px, -26px);\n }\n\n 81.8181818182% {\n transform: translate(0px, 0px);\n }\n\n 90.9090909091% {\n transform: translate(26px, 0px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(7) {\n animation: moveBox-7 4s infinite;\n}\n\n@keyframes moveBox-8 {\n 9.0909090909% {\n transform: translate(0, 0);\n }\n\n 18.1818181818% {\n transform: translate(-26px, 0);\n }\n\n 27.2727272727% {\n transform: translate(-26px, -26px);\n }\n\n 36.3636363636% {\n transform: translate(0px, -26px);\n }\n\n 45.4545454545% {\n transform: translate(0px, -26px);\n }\n\n 54.5454545455% {\n transform: translate(0px, -26px);\n }\n\n 63.6363636364% {\n transform: translate(0px, -26px);\n }\n\n 72.7272727273% {\n transform: translate(0px, -26px);\n }\n\n 81.8181818182% {\n transform: translate(26px, -26px);\n }\n\n 90.9090909091% {\n transform: translate(26px, 0px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(8) {\n animation: moveBox-8 4s infinite;\n}\n\n@keyframes moveBox-9 {\n 9.0909090909% {\n transform: translate(-26px, 0);\n }\n\n 18.1818181818% {\n transform: translate(-26px, 0);\n }\n\n 27.2727272727% {\n transform: translate(0px, 0);\n }\n\n 36.3636363636% {\n transform: translate(-26px, 0);\n }\n\n 45.4545454545% {\n transform: translate(0px, 0);\n }\n\n 54.5454545455% {\n transform: translate(0px, 0);\n }\n\n 63.6363636364% {\n transform: translate(-26px, 0);\n }\n\n 72.7272727273% {\n transform: translate(-26px, 0);\n }\n\n 81.8181818182% {\n transform: translate(-52px, 0);\n }\n\n 90.9090909091% {\n transform: translate(-26px, 0);\n }\n\n 100% {\n transform: translate(0px, 0);\n }\n}\n\n.banter-loader__box:nth-child(9) {\n animation: moveBox-9 4s infinite;\n}\n"},{"created":"2024-01-22T16:54:15.000Z","isPrivate":0,"projectId":"5cac69","snapshot":null,"tags":null,"title":"loader by preshpi","updated":"2024-01-22T16:54:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":508,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".spinner {\n width: 46px;\n height: 46px;\n display: grid;\n animation: spinner-plncf9 3s infinite;\n}\n\n.spinner::before,\n.spinner::after {\n content: \"\";\n grid-area: 1/1;\n border: 9px solid;\n border-radius: 50%;\n border-color: #474bff #474bff #0000 #0000;\n mix-blend-mode: darken;\n animation: spinner-plncf9 1s infinite linear;\n}\n\n.spinner::after {\n border-color: #0000 #0000 #dbdcef #dbdcef;\n animation-direction: reverse;\n}\n\n@keyframes spinner-plncf9 {\n 100% {\n transform: rotate(1turn);\n }\n}\n"},{"created":"2024-01-22T16:54:15.000Z","isPrivate":0,"projectId":"afd345","snapshot":null,"tags":null,"title":"loader by Mike11jr","updated":"2024-01-22T16:54:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":107,"cssLen":544,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader-wrapper {\n width: 60px;\n height: 60px;\n}\n\n.loader {\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n border: 10px solid #162534;\n border-top-color: #4bc8eb;\n border-bottom-color: #f13a8f;\n border-radius: 50%;\n animation: rotate0925 5s linear infinite;\n}\n\n.loader-inner {\n border-top-color: #36f372;\n border-bottom-color: #fff;\n animation-duration: 2.5s;\n}\n\n@keyframes rotate0925 {\n 0% {\n transform: scale(1) rotate(360deg);\n }\n\n 50% {\n transform: scale(.8) rotate(-360deg);\n }\n\n 100% {\n transform: scale(1) rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:15.000Z","isPrivate":0,"projectId":"d182b3","snapshot":null,"tags":null,"title":"loader by FWDJc","updated":"2024-01-22T16:54:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":728,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 7em;\n height: 5em;\n position: relative;\n animation: beat 1s infinite;\n}\n\n.loader::before,\n.loader::after {\n content: \"\";\n position: absolute;\n top: 0;\n width: 50px;\n height: 80px;\n border-radius: 5em 5em 0 0;\n animation: coldblue 1s infinite;\n}\n\n.loader::before {\n left: 50px;\n transform: rotate(-45deg);\n transform-origin: 0 100%;\n}\n\n.loader::after {\n left: 0;\n transform: rotate(45deg);\n transform-origin: 100% 100%;\n}\n\n@keyframes beat {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.2);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes coldblue {\n 0%, 100% {\n background-color: rgb(255, 255, 255);\n }\n\n 50% {\n background-color: rgb(198, 23, 23);\n }\n}"},{"created":"2024-01-22T16:54:15.000Z","isPrivate":0,"projectId":"42d70e","snapshot":null,"tags":null,"title":"loader by timlmit","updated":"2024-01-22T16:54:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":163,"cssLen":1554,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".lds-spinner {\n color: official;\n display: inline-block;\n position: relative;\n width: 80px;\n height: 80px;\n}\n\n.lds-spinner div {\n transform-origin: 40px 40px;\n animation: lds-spinner 1.2s linear infinite;\n}\n\n.lds-spinner div:after {\n content: \" \";\n display: block;\n position: absolute;\n top: 3px;\n left: 37px;\n width: 6px;\n height: 18px;\n border-radius: 20%;\n background: #fff;\n}\n\n.lds-spinner div:nth-child(1) {\n transform: rotate(0deg);\n animation-delay: -1.1s;\n}\n\n.lds-spinner div:nth-child(2) {\n transform: rotate(30deg);\n animation-delay: -1s;\n}\n\n.lds-spinner div:nth-child(3) {\n transform: rotate(60deg);\n animation-delay: -0.9s;\n}\n\n.lds-spinner div:nth-child(4) {\n transform: rotate(90deg);\n animation-delay: -0.8s;\n}\n\n.lds-spinner div:nth-child(5) {\n transform: rotate(120deg);\n animation-delay: -0.7s;\n}\n\n.lds-spinner div:nth-child(6) {\n transform: rotate(150deg);\n animation-delay: -0.6s;\n}\n\n.lds-spinner div:nth-child(7) {\n transform: rotate(180deg);\n animation-delay: -0.5s;\n}\n\n.lds-spinner div:nth-child(8) {\n transform: rotate(210deg);\n animation-delay: -0.4s;\n}\n\n.lds-spinner div:nth-child(9) {\n transform: rotate(240deg);\n animation-delay: -0.3s;\n}\n\n.lds-spinner div:nth-child(10) {\n transform: rotate(270deg);\n animation-delay: -0.2s;\n}\n\n.lds-spinner div:nth-child(11) {\n transform: rotate(300deg);\n animation-delay: -0.1s;\n}\n\n.lds-spinner div:nth-child(12) {\n transform: rotate(330deg);\n animation-delay: 0s;\n}\n\n@keyframes lds-spinner {\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n}\n"},{"created":"2024-01-22T16:54:15.000Z","isPrivate":0,"projectId":"0b6fde","snapshot":null,"tags":null,"title":"loader by carlosepcc","updated":"2024-01-22T16:54:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":158,"cssLen":683,"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-gray-500 {\n --tw-border-opacity: 1;\n border-color: rgb(107 114 128 / var(--tw-border-opacity))\n}\n\n.bg-gray-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(209 213 219 / 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:54:14.000Z","isPrivate":0,"projectId":"e7d8e6","snapshot":null,"tags":null,"title":"loader by FWDJc","updated":"2024-01-22T16:54:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":145,"cssLen":1074,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".eye-lid {\n background-color: rgb(0, 0, 0);\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n box-shadow: 0 9px 0 2px rgba(0, 0, 0, 0.2);\n width: 150px;\n height: 150px;\n}\n\n.eye {\n background-color: #ffbc03;\n border-radius: 50%;\n transform: translate3d(0, 0, 0) rotate(90deg);\n width: 120px;\n height: 120px;\n animation: eye 5s infinite;\n}\n\n@keyframes eye {\n 12%,\n 25% {\n width: 100px;\n height: 110px;\n }\n\n 37%, \n 50% {\n width: 60px;\n height: 130px;\n }\n\n 63%, \n 75% {\n width: 100px;\n height: 103px;\n }\n\n 87% {\n width: 100px;\n height: 100px;\n }\n}\n\n.cornea {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: rgb(0, 0, 0);\n border-radius: 50%;\n width: 50px;\n height: 50px;\n animation: eye-color 5s infinite;\n}\n\n@keyframes eye-color {\n 63%, 75% {\n background-color: rgb(8, 20, 96);\n }\n}\n\n.white-pupil {\n position: absolute;\n top: 9%;\n left: 10%;\n border-radius: 50%;\n background-color: #ffbc03;\n width: 20px;\n height: 20px;\n}"},{"created":"2024-01-22T16:54:14.000Z","isPrivate":0,"projectId":"56cd2a","snapshot":null,"tags":null,"title":"loader by themrsami","updated":"2024-01-22T16:54:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":398,"cssLen":855,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".ml-3 {\n margin-left: 0.75rem\n}\n\n.flex {\n display: flex\n}\n\n.h-10 {\n height: 2.5rem\n}\n\n.h-screen {\n height: 100vh\n}\n\n.w-10 {\n width: 2.5rem\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-b-2 {\n border-bottom-width: 2px\n}\n\n.border-t-2 {\n border-top-width: 2px\n}\n\n.border-blue-500 {\n --tw-border-opacity: 1;\n border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n\n.border-purple-500 {\n --tw-border-opacity: 1;\n border-color: rgb(168 85 247 / var(--tw-border-opacity))\n}\n\n.border-red-500 {\n --tw-border-opacity: 1;\n border-color: rgb(239 68 68 / var(--tw-border-opacity))\n}\n\n.ease-linear {\n transition-timing-function: linear\n}"},{"created":"2024-01-22T16:54:14.000Z","isPrivate":0,"projectId":"c83df4","snapshot":null,"tags":null,"title":"loader by satyamchaudharydev","updated":"2024-01-22T16:54:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":76,"cssLen":621,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

","css":".spinner {\n --clr: rgb(0, 113, 128);\n --gap: 6px;\n /* gap between each circle */\n width: 100px;\n height: 100px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: var(--gap);\n}\n\n.spinner span {\n width: 20px;\n height: 20px;\n border-radius: 100%;\n background-color: var(--clr);\n opacity: 0;\n}\n\n.spinner span:nth-child(1) {\n animation: fade 1s ease-in-out infinite;\n}\n\n.spinner span:nth-child(2) {\n animation: fade 1s ease-in-out 0.33s infinite;\n}\n\n.spinner span:nth-child(3) {\n animation: fade 1s ease-in-out 0.66s infinite;\n}\n\n@keyframes fade {\n 0%, 100% {\n opacity: 1;\n }\n\n 60% {\n opacity: 0;\n }\n}\n"}]}},"actionData":null,"errors":null}