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

","css":".mover {\n background: rgba(248, 25, 25, 0.979);\n height: 10px;\n width: 80px;\n border-radius: 10px;\n position: relative;\n animation: mover5 2s ease-in-out infinite;\n}\n\n.mover::before,\n.mover::after {\n content: '';\n position: absolute;\n height: 10px;\n border-radius: 10px;\n left: 20px;\n animation: mover5 2s ease-in-out infinite;\n}\n\n.mover::before {\n background: rgb(201, 1, 1);\n top: 20px;\n width: 50px;\n}\n\n.mover::after {\n background: rgb(255, 116, 106);\n top: -20px;\n width: 60px;\n}\n\n@keyframes mover5 {\n 0% {\n transform: translateX(30px) scale(1);\n }\n\n 50% {\n transform: translateX(-30px) scale(1.1);\n }\n\n 100% {\n transform: translateX(30px) scale(1);\n }\n}"},{"created":"2024-01-22T16:54:15.000Z","isPrivate":0,"projectId":"49ce86","snapshot":null,"tags":null,"title":"loader by Ratinax","updated":"2024-01-22T16:54:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":146,"cssLen":1503,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".loader {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: not-allowed;\n scale: 0.7;\n}\n\n.central {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 10em;\n height: 10em;\n border-radius: 50%;\n box-shadow: 0.5em 1em 1em blue,\n -0.5em 0.5em 1em lime,\n 0.5em -0.5em 1em cyan,\n -0.5em -0.5em 1em yellow;\n}\n\n.external-shadow {\n width: 10em;\n height: 10em;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n box-shadow: 0.5em 0.5em 3em blue,\n -0.5em 0.5em 3em lime,\n 0.5em -0.5em 3em cyan,\n -0.5em -0.5em 3em yellow;\n z-index: 999;\n animation: rotate 3s linear infinite;\n background-color: #212121;\n}\n\n.intern {\n position: absolute;\n color: white;\n z-index: 9999;\n}\n\n.intern::before {\n content: \"100%\";\n animation: percent 2s ease-in-out infinite;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(180deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes percent {\n 0% {\n content: '0%';\n }\n\n 25% {\n content: '25%';\n }\n\n 33% {\n content: '33%';\n }\n\n 42% {\n content: '42%';\n }\n\n 51% {\n content: '51%';\n }\n\n 67% {\n content: '67%';\n }\n\n 74% {\n content: '74%';\n }\n\n 75% {\n content: '75%';\n }\n\n 86% {\n content: '86%';\n }\n\n 95% {\n content: '95%';\n }\n\n 98% {\n content: '98%';\n }\n\n 99% {\n content: '99%';\n }\n}"},{"created":"2024-01-22T16:54:15.000Z","isPrivate":0,"projectId":"7bbf2b","snapshot":null,"tags":null,"title":"loader by Zadrus","updated":"2024-01-22T16:54:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":126,"cssLen":650,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loading {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.diamond {\n width: 50px;\n height: 50px;\n background-color: orange;\n clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);\n margin: 5px;\n opacity: 0;\n animation: fade-in-out 1.5s ease-in-out infinite;\n}\n\n.diamond.middle {\n transform: rotateY(180deg);\n}\n\n@keyframes fade-in-out {\n 0%,\n 100% {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n}\n\n.diamond {\n background: linear-gradient(45deg, #ffba00, #ff6c00);\n}\n\n.diamond:nth-child(1) {\n animation-delay: 0s;\n}\n\n.diamond.middle {\n animation-delay: 0.5s;\n}\n\n.diamond:nth-child(3) {\n animation-delay: 1s;\n}\n"},{"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}"}]}},"actionData":null,"errors":null}