{"loaderData":{"0":null,"0-3":{"total":7427,"projects":[{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"173d2a","snapshot":null,"tags":null,"title":"loader by zanina-yassine","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2014,"cssLen":9251,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\nLoading Page.. Please Wait!\n

","css":".master-container {\n margin: 0;\n padding: 20px 40px;\n background-color: #131516;\n display: grid;\n border-radius: 13px;\n border: 1px solid #2c2d2e;\n transform: scale(0.7);\n}\n\n.container {\n width: 300px;\n height: 300px;\n position: relative;\n margin: auto;\n border-radius: 50%;\n border: 2px solid white;\n overflow: hidden;\n}\n\n.crescent {\n position: relative;\n height: 50px;\n width: 50px;\n border-radius: 50%;\n left: calc(50% - 25px);\n top: 12px;\n overflow: hidden;\n animation: rotate 3s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.crescent span:nth-child(2) {\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n box-shadow: inset 0 0 0 2px white;\n border-radius: 50%;\n}\n\n.crescent span:nth-child(1) {\n background-color: #131516;\n position: absolute;\n left: 40%;\n display: block;\n width: calc(70% - 6px);\n height: calc(70% - 6px);\n box-shadow: inset 0 0 0 2px white;\n border-radius: 50%;\n z-index: 9;\n}\n\n.star {\n position: absolute;\n overflow: hidden;\n border-radius: 50%;\n height: 20px;\n width: 20px;\n}\n\n.star span:nth-child(1)::before {\n content: \"\";\n border: 2px solid white;\n height: 50%;\n width: 50%;\n border-top-color: transparent;\n border-left-color: transparent;\n border-radius: 0% 0% 100% 10%;\n display: block;\n left: -3px;\n top: -3px;\n position: absolute;\n}\n\n.star span:nth-child(1)::after {\n content: \"\";\n border: 2px solid white;\n height: 50%;\n width: 50%;\n border-bottom-color: transparent;\n border-left-color: transparent;\n border-radius: 0% 100% 0% 0%;\n display: block;\n left: -3px;\n bottom: -3px;\n position: absolute;\n}\n\n.star span:nth-child(2)::before {\n content: \"\";\n border: 2px solid white;\n height: 50%;\n width: 50%;\n border-top-color: transparent;\n border-right-color: transparent;\n border-radius: 0% 0% 0% 100%;\n display: block;\n right: -3px;\n top: -3px;\n position: absolute;\n}\n\n.star span:nth-child(2)::after {\n content: \"\";\n border: 2px solid white;\n height: 50%;\n width: 50%;\n border-bottom-color: transparent;\n border-right-color: transparent;\n border-radius: 100% 0% 0% 0%;\n display: block;\n right: -3px;\n bottom: -3px;\n position: absolute;\n}\n\n.small-star {\n position: absolute;\n overflow: hidden;\n border-radius: 50%;\n height: 12px;\n width: 12px;\n}\n\n.small-star span:nth-child(1)::before {\n content: \"\";\n border: 1.5px solid white;\n height: 50%;\n width: 50%;\n border-top-color: transparent;\n border-left-color: transparent;\n border-radius: 0% 0% 100% 10%;\n display: block;\n left: -2px;\n top: -2px;\n position: absolute;\n}\n\n.small-star span:nth-child(1)::after {\n content: \"\";\n border: 1.5px solid white;\n height: 50%;\n width: 50%;\n border-bottom-color: transparent;\n border-left-color: transparent;\n border-radius: 0% 100% 0% 0%;\n display: block;\n left: -2px;\n bottom: -2px;\n position: absolute;\n}\n\n.small-star span:nth-child(2)::before {\n content: \"\";\n border: 1.5px solid white;\n height: 50%;\n width: 50%;\n border-top-color: transparent;\n border-right-color: transparent;\n border-radius: 0% 0% 0% 100%;\n display: block;\n right: -2px;\n top: -2px;\n position: absolute;\n}\n\n.small-star span:nth-child(2)::after {\n content: \"\";\n border: 1.5px solid white;\n height: 50%;\n width: 50%;\n border-bottom-color: transparent;\n border-right-color: transparent;\n border-radius: 100% 0% 0% 0%;\n display: block;\n right: -2px;\n bottom: -2px;\n position: absolute;\n}\n\n.s1 {\n left: 60px;\n top: 50px;\n animation: glow 1.1s 0.9s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.s2 {\n right: 35px;\n bottom: 155px;\n animation: glow 1.3s 0.5s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.s3 {\n left: calc(50% - 10px);\n top: 75px;\n animation: glow 1.5s 0.3s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.s4 {\n left: 35px;\n bottom: 155px;\n animation: glow 3s 0.7s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.s5 {\n right: 60px;\n top: 50px;\n animation: glow 2s 1.2s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss1 {\n right: 15px;\n bottom: 130px;\n animation: glow 2s 1s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss2 {\n left: 15px;\n bottom: 130px;\n animation: glow 1s 0s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss3 {\n left: 35px;\n bottom: 195px;\n animation: glow 1.9s 0.1s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss4 {\n right: 35px;\n bottom: 195px;\n animation: glow 1.6s 0.9s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss5 {\n left: 100px;\n bottom: 180px;\n animation: glow 1s 0.5s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss6 {\n right: 100px;\n bottom: 180px;\n animation: glow 1.7s 0.6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss7 {\n right: 90px;\n top: 30px;\n animation: glow 0.8s 0.8s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss8 {\n left: 90px;\n top: 30px;\n animation: glow 1.8s 0.3s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.hill {\n display: block;\n width: 140%;\n height: 100%;\n border: 2px solid white;\n border-radius: 50%;\n bottom: -40%;\n position: relative;\n left: -20%;\n background-size: 3%;\n background-repeat: repeat;\n opacity: 0.7;\n}\n\n.fire-pit {\n width: 18px;\n height: 30px;\n position: absolute;\n left: calc(50% - 9px);\n bottom: 25px;\n z-index: 99;\n}\n\n.fire {\n width: 0;\n height: 0;\n border: 9px solid transparent;\n border-bottom: 18px solid #ffffff;\n position: relative;\n top: -9px;\n}\n\n.fire:after {\n content: \"\";\n position: absolute;\n left: -9px;\n top: 18px;\n width: 0;\n height: 0;\n border: 9px solid transparent;\n border-top: 9px solid #ffffff;\n}\n\n.inner-fire {\n width: 0;\n height: 0;\n border: 4.5px solid transparent;\n border-bottom: 9px solid #131516;\n top: 4.5px;\n position: absolute;\n z-index: 9;\n left: -4.5px;\n}\n\n.inner-fire:after {\n content: \"\";\n position: absolute;\n left: -4.5px;\n top: 9px;\n width: 0;\n height: 0;\n border: 4.5px solid transparent;\n border-top: 6px solid #131516;\n}\n\n.log1 {\n background-color: white;\n height: 2px;\n transform: rotate(35deg);\n transform-origin: center;\n position: relative;\n left: -3px;\n bottom: -1.5px;\n}\n\n.log2 {\n background-color: white;\n height: 2px;\n transform: rotate(-35deg);\n transform-origin: center;\n left: 3px;\n position: relative;\n bottom: -0px;\n}\n\n.hut {\n width: 0;\n height: 0;\n border-left: 38px solid transparent;\n border-right: 38px solid transparent;\n border-bottom: 75px solid #131516;\n position: absolute;\n left: calc(50% - 37.6px);\n z-index: 11;\n bottom: 80px;\n transform: scale(1.3);\n}\n\n.hut hr:nth-child(1) {\n height: 0px;\n position: absolute;\n width: 75px;\n bottom: -75px;\n left: calc(50% - 37.6px);\n}\n\n.hut hr:nth-child(2) {\n height: 0px;\n position: absolute;\n width: 96px;\n bottom: -32px;\n left: -32px;\n transform: rotate(63.5deg);\n border: 1px solid white;\n}\n\n.hut hr:nth-child(3) {\n height: 0px;\n position: absolute;\n width: 96px;\n bottom: -32px;\n right: -32px;\n transform: rotate(-63.5deg);\n border: 1px solid white;\n}\n\n.hut hr:nth-child(4) {\n height: 0px;\n position: absolute;\n width: 60px;\n bottom: -60px;\n left: -30px;\n border: 0.5px solid white;\n}\n\n.hut hr:nth-child(5) {\n height: 0px;\n position: absolute;\n width: 55px;\n bottom: -55px;\n left: -27.5px;\n border: 0.5px solid white;\n}\n\n.hut hr:nth-child(6) {\n height: 0px;\n position: absolute;\n width: 50px;\n bottom: -50px;\n left: -25px;\n border: 0.5px solid white;\n}\n\n.doorway {\n width: 0;\n height: 0;\n border-left: 22px solid transparent;\n border-right: 22px solid transparent;\n border-bottom: 42px solid #131516;\n position: relative;\n left: -22px;\n bottom: -32px;\n}\n\n.doorway::before {\n content: \"\";\n border-left: 1px solid white;\n width: 0px;\n height: 48px;\n display: inline-block;\n transform: rotate(-27deg);\n left: 11px;\n position: absolute;\n bottom: -45px;\n}\n\n.doorway::after {\n content: \"\";\n border-left: 1px solid white;\n width: 0px;\n height: 48px;\n display: inline-block;\n transform: rotate(27deg);\n left: -11px;\n position: absolute;\n bottom: -45px;\n}\n\n.doorway > hr.split {\n height: 44px;\n width: 1px;\n position: absolute;\n left: 0px;\n top: 0;\n display: inline-block;\n background-color: white;\n border: 0;\n}\n\n/* Trees */\n.tree {\n position: absolute;\n width: 25px;\n height: 48px;\n z-index: 21;\n transform: scale(1.3);\n}\n\n.tree .trunc {\n height: 48px;\n width: 1px;\n background-color: white;\n left: 12.5px;\n position: absolute;\n margin-top: 1.5px;\n}\n\n.tree .leaves {\n height: 18px;\n width: 18px;\n transform: rotate(45deg);\n border-left: 1.5px solid white;\n border-top: 1.5px solid white;\n border-bottom: 0;\n border-right: 0;\n margin-bottom: -15px;\n margin-top: 5px;\n left: 4px;\n position: relative;\n}\n\n.one {\n left: 30px;\n bottom: 90px;\n}\n\n.two {\n right: 30px;\n bottom: 90px;\n}\n\n.three {\n left: 80px;\n bottom: 115px;\n}\n\n.four {\n right: 80px;\n bottom: 115px;\n}\n\n.loading-text {\n color: white;\n font-family: 'Inter', sans-serif;\n display: block;\n text-align: center;\n padding: 20px 0 0 0;\n opacity: 0.8;\n}\n\n@keyframes glow {\n 0% {\n transform: scale(0);\n }\n\n 50% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0);\n }\n\n 50% {\n transform: rotate(10deg);\n }\n\n 100% {\n transform: rota(0);\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"54abeb","snapshot":null,"tags":null,"title":"loader by csemszepp","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5554,"cssLen":5324,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\n\t\t

\n\t","css":".socket {\n width: 200px;\n height: 200px;\n position: absolute;\n left: 50%;\n margin-left: -100px;\n top: 50%;\n margin-top: -100px;\n}\n\n.hex-brick {\n background: #ABF8FF;\n width: 30px;\n height: 17px;\n position: absolute;\n top: 5px;\n animation-name: fade;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n -webkit-animation-name: fade;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n}\n\n.h2 {\n transform: rotate(60deg);\n -webkit-transform: rotate(60deg);\n}\n\n.h3 {\n transform: rotate(-60deg);\n -webkit-transform: rotate(-60deg);\n}\n\n.gel {\n height: 30px;\n width: 30px;\n transition: all .3s;\n -webkit-transition: all .3s;\n position: absolute;\n top: 50%;\n left: 50%;\n}\n\n.center-gel {\n margin-left: -15px;\n margin-top: -15px;\n animation-name: pulse;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n -webkit-animation-name: pulse;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n}\n\n.c1 {\n margin-left: -47px;\n margin-top: -15px;\n}\n\n.c2 {\n margin-left: -31px;\n margin-top: -43px;\n}\n\n.c3 {\n margin-left: 1px;\n margin-top: -43px;\n}\n\n.c4 {\n margin-left: 17px;\n margin-top: -15px;\n}\n\n.c5 {\n margin-left: -31px;\n margin-top: 13px;\n}\n\n.c6 {\n margin-left: 1px;\n margin-top: 13px;\n}\n\n.c7 {\n margin-left: -63px;\n margin-top: -43px;\n}\n\n.c8 {\n margin-left: 33px;\n margin-top: -43px;\n}\n\n.c9 {\n margin-left: -15px;\n margin-top: 41px;\n}\n\n.c10 {\n margin-left: -63px;\n margin-top: 13px;\n}\n\n.c11 {\n margin-left: 33px;\n margin-top: 13px;\n}\n\n.c12 {\n margin-left: -15px;\n margin-top: -71px;\n}\n\n.c13 {\n margin-left: -47px;\n margin-top: -71px;\n}\n\n.c14 {\n margin-left: 17px;\n margin-top: -71px;\n}\n\n.c15 {\n margin-left: -47px;\n margin-top: 41px;\n}\n\n.c16 {\n margin-left: 17px;\n margin-top: 41px;\n}\n\n.c17 {\n margin-left: -79px;\n margin-top: -15px;\n}\n\n.c18 {\n margin-left: 49px;\n margin-top: -15px;\n}\n\n.c19 {\n margin-left: -63px;\n margin-top: -99px;\n}\n\n.c20 {\n margin-left: 33px;\n margin-top: -99px;\n}\n\n.c21 {\n margin-left: 1px;\n margin-top: -99px;\n}\n\n.c22 {\n margin-left: -31px;\n margin-top: -99px;\n}\n\n.c23 {\n margin-left: -63px;\n margin-top: 69px;\n}\n\n.c24 {\n margin-left: 33px;\n margin-top: 69px;\n}\n\n.c25 {\n margin-left: 1px;\n margin-top: 69px;\n}\n\n.c26 {\n margin-left: -31px;\n margin-top: 69px;\n}\n\n.c27 {\n margin-left: -79px;\n margin-top: -15px;\n}\n\n.c28 {\n margin-left: -95px;\n margin-top: -43px;\n}\n\n.c29 {\n margin-left: -95px;\n margin-top: 13px;\n}\n\n.c30 {\n margin-left: 49px;\n margin-top: 41px;\n}\n\n.c31 {\n margin-left: -79px;\n margin-top: -71px;\n}\n\n.c32 {\n margin-left: -111px;\n margin-top: -15px;\n}\n\n.c33 {\n margin-left: 65px;\n margin-top: -43px;\n}\n\n.c34 {\n margin-left: 65px;\n margin-top: 13px;\n}\n\n.c35 {\n margin-left: -79px;\n margin-top: 41px;\n}\n\n.c36 {\n margin-left: 49px;\n margin-top: -71px;\n}\n\n.c37 {\n margin-left: 81px;\n margin-top: -15px;\n}\n\n.r1 {\n animation-name: pulse;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n animation-delay: .2s;\n -webkit-animation-name: pulse;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n -webkit-animation-delay: .2s;\n}\n\n.r2 {\n animation-name: pulse;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n animation-delay: .4s;\n -webkit-animation-name: pulse;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n -webkit-animation-delay: .4s;\n}\n\n.r3 {\n animation-name: pulse;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n animation-delay: .6s;\n -webkit-animation-name: pulse;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n -webkit-animation-delay: .6s;\n}\n\n.r1 > .hex-brick {\n animation-name: fade;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n animation-delay: .2s;\n -webkit-animation-name: fade;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n -webkit-animation-delay: .2s;\n}\n\n.r2 > .hex-brick {\n animation-name: fade;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n animation-delay: .4s;\n -webkit-animation-name: fade;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n -webkit-animation-delay: .4s;\n}\n\n.r3 > .hex-brick {\n animation-name: fade;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n animation-delay: .6s;\n -webkit-animation-name: fade;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n -webkit-animation-delay: .6s;\n}\n\n@keyframes pulse {\n 0% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n\n 50% {\n -webkit-transform: scale(0.01);\n transform: scale(0.01);\n }\n\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n@keyframes fade {\n 0% {\n background: #ABF8FF;\n }\n\n 50% {\n background: #90BBBF;\n }\n\n 100% {\n background: #ABF8FF;\n }\n}\n\n@-webkit-keyframes pulse {\n 0% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n\n 50% {\n -webkit-transform: scale(0.01);\n transform: scale(0.01);\n }\n\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n@-webkit-keyframes fade {\n 0% {\n background: #ABF8FF;\n }\n\n 50% {\n background: #389CA6;\n }\n\n 100% {\n background: #ABF8FF;\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"48f689","snapshot":null,"tags":null,"title":"loader by Juanes200122","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":539,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n width: 60px;\n aspect-ratio: 2;\n --_g: no-repeat radial-gradient(circle closest-side, #000 90%, #0000);\n background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;\n background-size: calc(100% / 3) 50%;\n animation: l3 1s infinite linear;\n}\n@keyframes l3 {\n 20% {\n background-position: 0% 0%, 50% 50%, 100% 50%;\n }\n 40% {\n background-position: 0% 100%, 50% 0%, 100% 50%;\n }\n 60% {\n background-position: 0% 50%, 50% 100%, 100% 0%;\n }\n 80% {\n background-position: 0% 50%, 50% 50%, 100% 100%;\n }\n}\n"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"2eeadd","snapshot":null,"tags":null,"title":"loader by mrhyddenn","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":96,"cssLen":1587,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader,\n.loader-in {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.loader {\n position: relative;\n border-radius: 50%;\n width: 80px;\n height: 80px;\n background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.001) 0%, rgba(0, 0, 0, 0.4) 50%);\n box-shadow: 0 0 60px 0px rgba(0, 0, 0, 0.3);\n animation: circle41 1.2s infinite alternate;\n}\n\n.loader-in {\n width: 78%;\n height: 78%;\n border-radius: 50%;\n animation: circle 1.2s infinite alternate;\n animation-delay: calc(1.2s / 4);\n}\n\n.loader-in::after {\n content: '';\n width: 100%;\n height: 100%;\n background: linear-gradient(to bottom right, #6E2E8E 0%, #0B9FBD 100%);\n border-radius: 50%;\n animation: rot122 2.4s infinite linear;\n}\n\n.loader-dot {\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 55%;\n height: 55%;\n transform: translate(-50%, -50%);\n border-radius: 50%;\n background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.001) 0%, rgba(0, 0, 0, 0.4) 50%);\n background-size: 120%;\n background-position: center;\n}\n\n.loader-dot::after {\n content: '';\n width: 40%;\n height: 40%;\n border-radius: 50%;\n background-color: rgba(255, 255, 255, 0.8);\n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);\n animation: circle41 1.2s infinite alternate;\n animation-delay: calc(1.2s / 4);\n}\n\n@keyframes rot122 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes circle41 {\n 0% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(1.1);\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"987a67","snapshot":null,"tags":null,"title":"loader by Nawsome","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":606,"cssLen":2646,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t

\n","css":".blobs {\n width: 300px;\n height: 300px;\n position: absolute;\n overflow: hidden;\n border-radius: 70px;\n transform-style: preserve-3d;\n}\n\n.blobs .blob-center {\n transform-style: preserve-3d;\n position: absolute;\n background: #1d1d1d;\n top: 50%;\n left: 50%;\n width: 30px;\n height: 30px;\n transform-origin: left top;\n transform: scale(0.9) translate(-50%, -50%);\n animation: blob-grow_2 linear 3.4s infinite;\n border-radius: 50%;\n box-shadow: 0 -10px 40px -5px #1d1d1d;\n}\n\n.blob {\n position: absolute;\n background: #1d1d1d;\n top: 50%;\n left: 50%;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n animation: blobs_2 ease-out 3.4s infinite;\n transform: scale(0.9) translate(-50%, -50%);\n transform-origin: center top;\n opacity: 0;\n}\n\n.blob:nth-child(1) {\n -webkit-animation-delay: 0.2s;\n animation-delay: 0.2s;\n}\n\n.blob:nth-child(2) {\n -webkit-animation-delay: 0.4s;\n animation-delay: 0.4s;\n}\n\n.blob:nth-child(3) {\n -webkit-animation-delay: 0.6s;\n animation-delay: 0.6s;\n}\n\n.blob:nth-child(4) {\n -webkit-animation-delay: 0.8s;\n animation-delay: 0.8s;\n}\n\n.blob:nth-child(5) {\n -webkit-animation-delay: 1s;\n animation-delay: 1s;\n}\n\n@keyframes blobs_2 {\n 0% {\n opacity: 0;\n transform: scale(0) translate(calc(-330px - 50%), -50%);\n }\n\n 1% {\n opacity: 1;\n }\n\n 35%, 65% {\n opacity: 1;\n transform: scale(0.9) translate(-50%, -50%);\n }\n\n 99% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n transform: scale(0) translate(calc(330px - 50%), -50%);\n }\n}\n\n@keyframes blob-grow_2 {\n 0%, 39% {\n transform: scale(0) translate(-50%, -50%);\n }\n\n 40%, 42% {\n transform: scale(1, 0.9) translate(-50%, -50%);\n }\n\n 43%, 44% {\n transform: scale(1.2, 1.1) translate(-50%, -50%);\n }\n\n 45%, 46% {\n transform: scale(1.3, 1.2) translate(-50%, -50%);\n }\n\n 47%, 48% {\n transform: scale(1.4, 1.3) translate(-50%, -50%);\n }\n\n 52% {\n transform: scale(1.5, 1.4) translate(-50%, -50%);\n }\n\n 54% {\n transform: scale(1.7, 1.6) translate(-50%, -50%);\n }\n\n 58% {\n transform: scale(1.8, 1.7) translate(-50%, -50%);\n }\n\n 68%, 70% {\n transform: scale(1.7, 1.5) translate(-50%, -50%);\n }\n\n 78% {\n transform: scale(1.6, 1.4) translate(-50%, -50%);\n }\n\n 80%, 81% {\n transform: scale(1.5, 1.4) translate(-50%, -50%);\n }\n\n 82%, 83% {\n transform: scale(1.4, 1.3) translate(-50%, -50%);\n }\n\n 84%, 85% {\n transform: scale(1.3, 1.2) translate(-50%, -50%);\n }\n\n 86%, 87% {\n transform: scale(1.2, 1.1) translate(-50%, -50%);\n }\n\n 90%, 91% {\n transform: scale(1, 0.9) translate(-50%, -50%);\n }\n\n 92%, 100% {\n transform: scale(0) translate(-50%, -50%);\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"b77c5e","snapshot":null,"tags":null,"title":"loader by gharsh11032000","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":534,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 5em;\n height: 5em;\n background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );\n animation: spin 3s infinite;\n}\n\n.loader::before {\n content: \"\";\n z-index: -1;\n position: absolute;\n inset: 0;\n background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );\n transform: translate3d(0, 0, 0) scale(0.95);\n filter: blur(20px);\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(-45deg);\n }\n\n 50% {\n transform: rotate(-360deg);\n border-radius: 50%;\n }\n\n 100% {\n transform: rotate(-45deg);\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"f12846","snapshot":null,"tags":null,"title":"loader by JaydipPrajapati1910","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":332,"cssLen":2333,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n\n\n

\n \n \n

\n\n\n

\n \n \n

","css":".container {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.container div {\n position: absolute;\n width: 90px;\n height: 51px;\n}\n\n.container div:nth-of-type(2) {\n transform: rotate(60deg)\n}\n\n.container div:nth-of-type(3) {\n transform: rotate(-60deg)\n}\n\n.container div div {\n width: 100%;\n height: 100%;\n position: relative\n}\n\n.container div div span {\n position: absolute;\n width: 4px;\n height: 0%;\n background: #053146;\n z-index: 999999;\n}\n\n.h1 {\n left: 0;\n animation: load1 7.2s ease infinite;\n}\n\n.h2 {\n right: 0;\n animation: load2 7.2s ease .6s infinite;\n}\n\n.h3 {\n right: 0;\n animation: load3 7.2s ease 1.2s infinite;\n}\n\n.h4 {\n right: 0;\n animation: load4 7.2s ease 1.8s infinite;\n}\n\n.h5 {\n left: 0;\n animation: load5 7.2s ease 2.4s infinite;\n}\n\n.h6 {\n left: 0;\n animation: load6 7.2s ease 3s infinite;\n}\n\n@keyframes load1 {\n 0% {\n bottom: 0;\n height: 0\n }\n\n 6.944444444% {\n bottom: 0;\n height: 100%\n }\n\n 50% {\n top: 0;\n height: 100%\n }\n\n 59.944444433% {\n top: 0;\n height: 0\n }\n/* 91.6666667%{top:0;height:0%;} */\n}\n\n@keyframes load2 {\n 0% {\n top: 0;\n height: 0\n }\n\n 6.944444444% {\n top: 0;\n height: 100%\n }\n\n 50% {\n bottom: 0;\n height: 100%\n }\n\n 59.944444433% {\n bottom: 0;\n height: 0\n }\n/* 91.6666667%{bottom:0;height:0%} */\n}\n\n@keyframes load3 {\n 0% {\n top: 0;\n height: 0\n }\n\n 6.944444444% {\n top: 0;\n height: 100%\n }\n\n 50% {\n bottom: 0;\n height: 100%\n }\n\n 59.94444443% {\n bottom: 0;\n height: 0\n }\n/* 91.6666667%{bottom:0;height:0%;} */\n}\n\n@keyframes load4 {\n 0% {\n top: 0;\n height: 0\n }\n\n 6.944444444% {\n top: 0;\n height: 100%\n }\n\n 50% {\n bottom: 0;\n height: 100%\n }\n\n 59.94444443% {\n bottom: 0;\n height: 0\n }\n/* 91.6666667%{bottom:0;height:0%;} */\n}\n\n@keyframes load5 {\n 0% {\n bottom: 0;\n height: 0\n }\n\n 6.944444444% {\n bottom: 0;\n height: 100%\n }\n\n 50% {\n top: 0;\n height: 100%\n }\n\n 59.94444443% {\n top: 0;\n height: 0\n }\n/* 91.6666667%{top:0;height:0%;} */\n}\n\n@keyframes load6 {\n 0% {\n bottom: 0;\n height: 0\n }\n\n 6.944444444% {\n bottom: 0;\n height: 100%\n }\n\n 50% {\n top: 0;\n height: 100%\n }\n\n 59.94444443% {\n top: 0;\n height: 0\n }\n/* 91.6666667%{top:0;height:0%;} */\n}\n \n"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"dff9ed","snapshot":null,"tags":null,"title":"loader by reveuse12","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":939,"cssLen":3201,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n ","css":".loader {\n display: flex;\n position: relative;\n justify-items: center;\n align-items: center;\n gap: 1rem;\n height: 55px;\n width: 200px;\n overflow: hidden;\n}\n\n.container {\n width: 100%;\n display: flex;\n flex-direction: column;\n height: 200px;\n position: relative;\n align-items: center;\n}\n\n.carousel {\n display: flex;\n gap: 1rem;\n flex-direction: column;\n position: absolute;\n width: 100%;\n transform-origin: center;\n animation-delay: 2s;\n}\n\n.loader .container:nth-child(3) {\n justify-content: flex-start;\n justify-items: flex-start;\n animation: scroll-up 4s infinite ease-in-out;\n animation-delay: 3s;\n}\n\n.loader .container:nth-child(2) {\n justify-content: flex-end;\n justify-items: flex-end;\n animation: scroll-down 4s infinite ease-in-out;\n animation-delay: 3s;\n}\n\n.loader .container:nth-child(1) {\n justify-content: flex-end;\n justify-items: flex-end;\n animation: scroll-down 3s infinite ease-in-out;\n animation-delay: 3s;\n}\n\n.love {\n background: rgb(0, 195, 255);\n display: flex;\n width: 30px;\n height: 30px;\n position: relative;\n align-items: center;\n justify-content: center;\n left: 8px;\n margin: 0.8rem 4px;\n transform: rotate(45deg);\n animation-delay: 2s;\n}\n\n.love::before, .love::after {\n content: '';\n position: absolute;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background: rgb(0, 217, 255);\n}\n\n.love::before {\n left: -16px;\n}\n\n.love::after {\n top: -16px;\n}\n\n.death {\n display: flex;\n width: 100%;\n height: 55px;\n position: relative;\n align-items: center;\n justify-content: center;\n animation: rotation 3s infinite ease-in-out;\n animation-delay: 1s;\n}\n\n.death:after {\n content: '';\n height: 63px;\n position: absolute;\n border-left: 12px solid rgb(30, 184, 255);\n transform: rotate(45deg);\n border-radius: 8px;\n top: -4px;\n}\n\n.death:before {\n content: '';\n height: 60px;\n position: absolute;\n border-left: 12px solid red;\n transform: rotate(-45deg);\n}\n\n.loader:hover {\n animation: none;\n}\n\n.robots {\n display: flex;\n width: 100%;\n height: 55px;\n justify-content: space-between;\n background-color: #05e6ff;\n border-radius: 0 8px 8px;\n padding: 8px;\n animation-delay: 5s;\n}\n\n.robots::after {\n content: '';\n width: 12px;\n height: 12px;\n top: 0;\n left: 0;\n background-color: #f70b0b;\n border-radius: 50%;\n animation-delay: 2s;\n animation: blink 0.5s 2 forwards;\n}\n\n.robots::before {\n content: '';\n width: 12px;\n height: 12px;\n top: 0;\n left: 0;\n background-color: #ff0000;\n border-radius: 50%;\n animation-delay: 2s;\n animation: blink 0.5s 2 forwards;\n}\n\n@keyframes scroll-up {\n 0% {\n transform: translateY(0);\n filter: blur(0);\n }\n\n 30% {\n transform: translateY(-150%);\n filter: blur(10px);\n }\n\n 60% {\n transform: translateY(0);\n filter: blur(0px);\n }\n}\n\n@keyframes scroll-down {\n 0% {\n transform: translateY(0);\n filter: blur(0);\n }\n\n 30% {\n transform: translateY(150%);\n filter: blur(10px);\n }\n\n 60% {\n transform: translateY(0);\n filter: blur(0px);\n }\n}\n\n@keyframes rotation {\n 20%, 100% {\n transform: rotate(180deg);\n }\n}\n\n@keyframes blink {\n 0% {\n height: 0;\n }\n\n 20% {\n height: 12px;\n }\n\n 100% {\n height: 12px;\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"cf13a2","snapshot":null,"tags":null,"title":"loader by dhruv465","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":504,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n border: 16px solid #f3f3f3;\n border-top: 16px solid #3498db;\n border-radius: 50%;\n width: 120px;\n height: 120px;\n animation: spin 2s linear infinite;\n}\n\n/* Add some glow effect */\n.loader::after {\n content: \"\";\n position: absolute;\n top: -5px;\n left: -5px;\n right: -5px;\n bottom: -5px;\n border-radius: 50%;\n box-shadow: inset 0px 0px 20px #3498db;\n}\n\n/* Rotate the circle */\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"26da8e","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":37,"cssLen":605,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Loading\n

","css":".loader {\n font-size: 2rem;\n font-family: sans-serif;\n font-variant: small-caps;\n font-weight: 900;\n background: conic-gradient(\n #dff2ae 0 25%,\n #ff904f 25% 50%,\n #feefe7 50% 75%,\n #ffde2b 75%\n );\n background-size: 200% 200%;\n animation: animateBackground 4.5s ease-in-out infinite;\n color: transparent;\n background-clip: text;\n -webkit-background-clip: text;\n}\n\n@keyframes animateBackground {\n 25% {\n background-position: 0 100%;\n }\n\n 50% {\n background-position: 100% 100%;\n }\n\n 75% {\n background-position: 100% 0%;\n }\n\n 100% {\n background-position: 0 0;\n }\n}\n"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"d30c21","snapshot":null,"tags":null,"title":"loader by uxRakhal","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":126,"cssLen":6868,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".typewriter {\n --blue: #5cbbff;\n --blue-dark: #162d72;\n --key: #fff;\n --paper: #eef0fd;\n --text: #00000049;\n --tool: #ffbb00;\n --duration: 3s;\n position: relative;\n -webkit-animation: bounce05 var(--duration) linear infinite;\n animation: bounce05 var(--duration) linear infinite;\n}\n\n.typewriter .slide {\n width: 92px;\n height: 20px;\n border-radius: 3px;\n margin-left: 14px;\n transform: translateX(14px);\n background: linear-gradient(var(--blue), var(--blue-dark));\n -webkit-animation: slide05 var(--duration) ease infinite;\n animation: slide05 var(--duration) ease infinite;\n}\n\n.typewriter .slide:before,\n.typewriter .slide:after,\n.typewriter .slide i:before {\n content: \"\";\n position: absolute;\n background: var(--tool);\n}\n\n.typewriter .slide:before {\n width: 2px;\n height: 8px;\n top: 6px;\n left: 100%;\n}\n\n.typewriter .slide:after {\n left: 94px;\n top: 3px;\n height: 14px;\n width: 6px;\n border-radius: 3px;\n}\n\n.typewriter .slide i {\n display: block;\n position: absolute;\n right: 100%;\n width: 6px;\n height: 4px;\n top: 4px;\n background: var(--tool);\n}\n\n.typewriter .slide i:before {\n right: 100%;\n top: -2px;\n width: 4px;\n border-radius: 2px;\n height: 14px;\n}\n\n.typewriter .paper {\n position: absolute;\n left: 24px;\n top: -26px;\n width: 40px;\n height: 46px;\n border-radius: 5px;\n background: var(--paper);\n transform: translateY(46px);\n -webkit-animation: paper05 var(--duration) linear infinite;\n animation: paper05 var(--duration) linear infinite;\n}\n\n.typewriter .paper:before {\n content: \"\";\n position: absolute;\n left: 6px;\n right: 6px;\n top: 7px;\n border-radius: 2px;\n height: 4px;\n transform: scaleY(0.8);\n background: var(--text);\n box-shadow: 0 12px 0 var(--text), 0 24px 0 var(--text), 0 36px 0 var(--text);\n}\n\n.typewriter .keyboard {\n width: 120px;\n height: 56px;\n margin-top: -10px;\n z-index: 1;\n position: relative;\n}\n\n.typewriter .keyboard:before,\n.typewriter .keyboard:after {\n content: \"\";\n position: absolute;\n}\n\n.typewriter .keyboard:before {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 7px;\n background: linear-gradient(135deg, var(--blue), var(--blue-dark));\n transform: perspective(10px) rotateX(2deg);\n transform-origin: 50% 100%;\n}\n\n.typewriter .keyboard:after {\n left: 2px;\n top: 25px;\n width: 11px;\n height: 4px;\n border-radius: 2px;\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),\n 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),\n 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),\n 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n -webkit-animation: keyboard05 var(--duration) linear infinite;\n animation: keyboard05 var(--duration) linear infinite;\n}\n\n@keyframes bounce05 {\n 85%,\n 92%,\n 100% {\n transform: translateY(0);\n }\n\n 89% {\n transform: translateY(-4px);\n }\n\n 95% {\n transform: translateY(2px);\n }\n}\n\n@keyframes slide05 {\n 5% {\n transform: translateX(14px);\n }\n\n 15%,\n 30% {\n transform: translateX(6px);\n }\n\n 40%,\n 55% {\n transform: translateX(0);\n }\n\n 65%,\n 70% {\n transform: translateX(-4px);\n }\n\n 80%,\n 89% {\n transform: translateX(-12px);\n }\n\n 100% {\n transform: translateX(14px);\n }\n}\n\n@keyframes paper05 {\n 5% {\n transform: translateY(46px);\n }\n\n 20%,\n 30% {\n transform: translateY(34px);\n }\n\n 40%,\n 55% {\n transform: translateY(22px);\n }\n\n 65%,\n 70% {\n transform: translateY(10px);\n }\n\n 80%,\n 85% {\n transform: translateY(0);\n }\n\n 92%,\n 100% {\n transform: translateY(46px);\n }\n}\n\n@keyframes keyboard05 {\n 5%,\n 12%,\n 21%,\n 30%,\n 39%,\n 48%,\n 57%,\n 66%,\n 75%,\n 84% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),\n 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),\n 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),\n 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 9% {\n box-shadow: 15px 2px 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),\n 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),\n 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),\n 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 18% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),\n 60px 2px 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),\n 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),\n 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 27% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),\n 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),\n 22px 12px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),\n 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 36% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),\n 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),\n 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 12px 0 var(--key),\n 60px 12px 0 var(--key), 68px 12px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 45% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),\n 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 2px 0 var(--key),\n 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),\n 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 54% {\n box-shadow: 15px 0 0 var(--key), 30px 2px 0 var(--key), 45px 0 0 var(--key),\n 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),\n 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),\n 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 63% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),\n 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),\n 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),\n 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 12px 0 var(--key);\n }\n\n 72% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 2px 0 var(--key),\n 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),\n 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),\n 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 81% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),\n 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),\n 22px 10px 0 var(--key), 37px 12px 0 var(--key), 52px 10px 0 var(--key),\n 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n}\n"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"acd71b","snapshot":null,"tags":null,"title":"loader by coding-masala","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":160,"cssLen":361,"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}\n\n.loader-bar {\n width: 4px;\n height: 18px;\n margin: 0 8px;\n border-radius: 4px;\n animation: loading_3194 1s ease-in-out infinite;\n background-color: #333;\n}\n\n@keyframes loading_3194 {\n 0% {\n transform: scale(1);\n }\n\n 20% {\n transform: scaleY(3);\n }\n\n 40% {\n transform: scale(1);\n }\n}\n"}]}},"actionData":null,"errors":null}