{"loaderData":{"0":null,"0-3":{"total":7314,"projects":[{"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"},{"created":"2024-01-22T16:54:14.000Z","isPrivate":0,"projectId":"4b3e1b","snapshot":null,"tags":null,"title":"loader by isfan4ik","updated":"2024-01-22T16:54:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":958,"cssLen":4458,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\r\n\n

\n \n

\n\n","css":".loader {\n}\n\n.container {\n width: 300px;\n height: 280px;\n position: absolute;\n top: calc(50% - 140px);\n left: calc(50% - 150px);\n}\n\n.coffee-header {\n width: 100%;\n height: 80px;\n position: absolute;\n top: 0;\n left: 0;\n background-color: #ddcfcc;\n border-radius: 10px;\n}\n\n.coffee-header__buttons {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 25px;\n background-color: #282323;\n border-radius: 50%;\n}\n\n.coffee-header__buttons::after {\n content: \"\";\n width: 8px;\n height: 8px;\n position: absolute;\n bottom: -8px;\n left: calc(50% - 4px);\n background-color: #615e5e;\n}\n\n.coffee-header__button-one {\n left: 15px;\n}\n\n.coffee-header__button-two {\n left: 50px;\n}\n\n.coffee-header__display {\n width: 50px;\n height: 50px;\n position: absolute;\n top: calc(50% - 25px);\n left: calc(50% - 25px);\n border-radius: 50%;\n background-color: #9acfc5;\n border: 5px solid #43beae;\n box-sizing: border-box;\n}\n\n.coffee-header__details {\n width: 8px;\n height: 20px;\n position: absolute;\n top: 10px;\n right: 10px;\n background-color: #9b9091;\n box-shadow: -12px 0 0 #9b9091, -24px 0 0 #9b9091;\n}\n\n.coffee-medium {\n width: 90%;\n height: 160px;\n position: absolute;\n top: 80px;\n left: calc(50% - 45%);\n background-color: #bcb0af;\n}\n\n.coffee-medium:before {\n content: \"\";\n width: 90%;\n height: 100px;\n background-color: #776f6e;\n position: absolute;\n bottom: 0;\n left: calc(50% - 45%);\n border-radius: 20px 20px 0 0;\n}\n\n.coffe-medium__exit {\n width: 60px;\n height: 20px;\n position: absolute;\n top: 0;\n left: calc(50% - 30px);\n background-color: #231f20;\n}\n\n.coffe-medium__exit::before {\n content: \"\";\n width: 50px;\n height: 20px;\n border-radius: 0 0 50% 50%;\n position: absolute;\n bottom: -20px;\n left: calc(50% - 25px);\n background-color: #231f20;\n}\n\n.coffe-medium__exit::after {\n content: \"\";\n width: 10px;\n height: 10px;\n position: absolute;\n bottom: -30px;\n left: calc(50% - 5px);\n background-color: #231f20;\n}\n\n.coffee-medium__arm {\n width: 70px;\n height: 20px;\n position: absolute;\n top: 15px;\n right: 25px;\n background-color: #231f20;\n}\n\n.coffee-medium__arm::before {\n content: \"\";\n width: 15px;\n height: 5px;\n position: absolute;\n top: 7px;\n left: -15px;\n background-color: #9e9495;\n}\n\n.coffee-medium__cup {\n width: 80px;\n height: 47px;\n position: absolute;\n bottom: 0;\n left: calc(50% - 40px);\n background-color: #FFF;\n border-radius: 0 0 70px 70px / 0 0 110px 110px;\n}\n\n.coffee-medium__cup::after {\n content: \"\";\n width: 20px;\n height: 20px;\n position: absolute;\n top: 6px;\n right: -13px;\n border: 5px solid #FFF;\n border-radius: 50%;\n}\n\n@keyframes liquid {\n 0% {\n height: 0px;\n opacity: 1;\n }\n\n 5% {\n height: 0px;\n opacity: 1;\n }\n\n 20% {\n height: 62px;\n opacity: 1;\n }\n\n 95% {\n height: 62px;\n opacity: 1;\n }\n\n 100% {\n height: 62px;\n opacity: 0;\n }\n}\n\n.coffee-medium__liquid {\n width: 6px;\n height: 63px;\n opacity: 0;\n position: absolute;\n top: 50px;\n left: calc(50% - 3px);\n background-color: #74372b;\n animation: liquid 4s 4s linear infinite;\n}\n\n.coffee-medium__smoke {\n width: 8px;\n height: 20px;\n position: absolute;\n border-radius: 5px;\n background-color: #b3aeae;\n}\n\n@keyframes smokeOne {\n 0% {\n bottom: 20px;\n opacity: 0;\n }\n\n 40% {\n bottom: 50px;\n opacity: .5;\n }\n\n 80% {\n bottom: 80px;\n opacity: .3;\n }\n\n 100% {\n bottom: 80px;\n opacity: 0;\n }\n}\n\n@keyframes smokeTwo {\n 0% {\n bottom: 40px;\n opacity: 0;\n }\n\n 40% {\n bottom: 70px;\n opacity: .5;\n }\n\n 80% {\n bottom: 80px;\n opacity: .3;\n }\n\n 100% {\n bottom: 80px;\n opacity: 0;\n }\n}\n\n.coffee-medium__smoke-one {\n opacity: 0;\n bottom: 50px;\n left: 102px;\n animation: smokeOne 3s 4s linear infinite;\n}\n\n.coffee-medium__smoke-two {\n opacity: 0;\n bottom: 70px;\n left: 118px;\n animation: smokeTwo 3s 5s linear infinite;\n}\n\n.coffee-medium__smoke-three {\n opacity: 0;\n bottom: 65px;\n right: 118px;\n animation: smokeTwo 3s 6s linear infinite;\n}\n\n.coffee-medium__smoke-for {\n opacity: 0;\n bottom: 50px;\n right: 102px;\n animation: smokeOne 3s 5s linear infinite;\n}\n\n.coffee-footer {\n width: 95%;\n height: 15px;\n position: absolute;\n bottom: 25px;\n left: calc(50% - 47.5%);\n background-color: #41bdad;\n border-radius: 10px;\n}\n\n.coffee-footer::after {\n content: \"\";\n width: 106%;\n height: 26px;\n position: absolute;\n bottom: -25px;\n left: -8px;\n background-color: #000;\n}\n \n}"},{"created":"2024-01-22T16:54:14.000Z","isPrivate":0,"projectId":"eff9d6","snapshot":null,"tags":null,"title":"loader by ClawHack1","updated":"2024-01-22T16:54:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":362,"cssLen":1347,"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 width: 80px;\n height: 80px;\n position: relative;\n}\n\n.loader:before {\n content: \"\";\n position: absolute;\n top: -10px;\n left: -10px;\n right: -10px;\n bottom: -10px;\n border-radius: 50%;\n}\n\n.loader-inner {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n}\n\n.loader-block {\n display: inline-block;\n width: 10px;\n height: 10px;\n margin: 2px;\n background-color: #fff;\n box-shadow: 0 0 20px #fff;\n animation: loader_562 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n}\n\n.loader-block:nth-child(1) {\n animation-delay: 0.1s;\n}\n\n.loader-block:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.loader-block:nth-child(3) {\n animation-delay: 0.3s;\n}\n\n.loader-block:nth-child(4) {\n animation-delay: 0.4s;\n}\n\n.loader-block:nth-child(5) {\n animation-delay: 0.5s;\n}\n\n.loader-block:nth-child(6) {\n animation-delay: 0.6s;\n}\n\n.loader-block:nth-child(7) {\n animation-delay: 0.7s;\n}\n\n.loader-block:nth-child(8) {\n animation-delay: 0.8s;\n}\n\n@keyframes loader_562 {\n 0% {\n transform: scale(1);\n box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);\n }\n\n 20% {\n transform: scale(1, 2.5);\n box-shadow: 0 0 50px rgba(255, 255, 255, 0.7);\n }\n\n 40% {\n transform: scale(1);\n box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);\n }\n}\n"},{"created":"2024-01-22T16:54:14.000Z","isPrivate":0,"projectId":"51df5a","snapshot":null,"tags":null,"title":"loader by catraco","updated":"2024-01-22T16:54:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":91,"cssLen":687,"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":".loader {\n --color: #a5a5b0;\n --size: 30px;\n width: var(--size);\n height: var(--size);\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 2px;\n}\n\n.loader span {\n width: 100%;\n height: 100%;\n background-color: var(--color);\n animation: keyframes-blink .5s alternate infinite linear;\n}\n\n.loader span:nth-child(1) {\n animation-delay: 0ms;\n}\n\n.loader span:nth-child(2) {\n animation-delay: 150ms;\n}\n\n.loader span:nth-child(3) {\n animation-delay: 150ms;\n}\n\n.loader span:nth-child(4) {\n animation-delay: 280ms;\n}\n\n@keyframes keyframes-blink {\n 0% {\n opacity: 0.5;\n transform: scale(0.5) rotate(20deg);\n }\n\n 50% {\n opacity: 1;\n transform: scale(1);\n }\n}"}]}},"actionData":null,"errors":null}