{"loaderData":{"0":null,"0-3":{"total":7313,"projects":[{"created":"2024-01-22T16:54:18.000Z","isPrivate":0,"projectId":"04894e","snapshot":null,"tags":null,"title":"loader by G4b413l","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":424,"cssLen":1019,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".jelly {\n --uib-size: 40px;\n --uib-speed: .8s;\n --uib-color: #2c2b2b;\n position: relative;\n height: calc(var(--uib-size) / 2);\n width: var(--uib-size);\n filter: url('#uib-jelly-ooze');\n animation: rotate72317 calc(var(--uib-speed) * 2) linear infinite;\n}\n\n.jelly::before,\n.jelly::after {\n content: '';\n position: absolute;\n top: 0%;\n left: 25%;\n width: 50%;\n height: 100%;\n background: var(--uib-color);\n border-radius: 100%;\n}\n\n.jelly::before {\n animation: shift-left var(--uib-speed) ease infinite;\n}\n\n.jelly::after {\n animation: shift-right var(--uib-speed) ease infinite;\n}\n\n.jelly-maker {\n width: 0;\n height: 0;\n position: absolute;\n}\n\n@keyframes rotate72317 {\n 0%,\n 49.999%,\n 100% {\n transform: none;\n }\n\n 50%,\n 99.999% {\n transform: rotate(90deg);\n }\n}\n\n@keyframes shift-left {\n 0%,\n 100% {\n transform: translateX(0%);\n }\n\n 50% {\n transform: scale(0.65) translateX(-75%);\n }\n}\n\n@keyframes shift-right {\n 0%,\n 100% {\n transform: translateX(0%);\n }\n\n 50% {\n transform: scale(0.65) translateX(75%);\n }\n}\n"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"abbf5b","snapshot":null,"tags":null,"title":"loader by WerlynRodriguez","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2265,"cssLen":1543,"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

","css":"/* Butterfly loader created by WerlynDev in Uiverse.io*/\n\n.loader {\n --sizeLoader: 60px;\n --sizeLoaderHalf: calc(var(--sizeLoader) / 2);\n --stepBtf: calc(var(--sizeLoader) / 10);\n display: flex;\n position: relative;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: var(--sizeLoader);\n height: var(--sizeLoader);\n}\n\n.loader:hover {\n cursor: progress;\n}\n\n.loader[anim1] {\n animation: anim1 0.3s alternate ease-in-out infinite;\n}\n\n.loader:not([anim1]) {\n right: var(--sizeLoaderHalf);\n transform-origin: center right;\n animation: moveAround 2s linear infinite;\n}\n\n.loader[showShadow] {\n filter: drop-shadow(0 10px 10px #060606de);\n}\n\n.loader svg:nth-child(1) {\n position: relative;\n height: 100%;\n left: 2%;\n transform-origin: center right;\n animation: wing 0.5s ease-in-out infinite;\n}\n\n.loader svg:nth-child(2) {\n height: 50%;\n}\n\n.loader svg:nth-child(3) {\n position: relative;\n height: 100%;\n left: -2%;\n transform-origin: center left;\n animation: wing 0.5s ease-in-out infinite;\n}\n\n@keyframes wing {\n 0% {\n transform: rotateY(0deg);\n }\n\n 50% {\n transform: rotateY(60deg);\n }\n\n 100% {\n transform: rotateY(0deg);\n }\n}\n\n@keyframes moveAround {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes anim1 {\n from {\n transform: translateY(0px);\n }\n\n to {\n transform: translateY(var(--stepBtf));\n }\n}\n\n/* @media (prefers-color-scheme: dark) {\n .loader[showShadow]{\n filter: drop-shadow(0 10px 10px #dbdbdbde);\n }\n} */"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"c8443d","snapshot":null,"tags":null,"title":"loader by forgingdestiny","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":115,"cssLen":1047,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"/* Container for the loader */\n.loader {\n position: relative;\n width: 10em;\n height: 10em;\n}\n/* Track elements */\n.track, .inner-track {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n box-shadow: inset -0.1em -0.1em 0.2em #d1d1d1, inset 0.1em 0.1em 0.2em #ffffff;\n}\n\n.inner-track {\n width: 80%;\n height: 80%;\n top: 10%;\n left: 10%;\n border: 2em solid #f0f0f0;\n}\n/* Orb element */\n.orb {\n position: absolute;\n width: 1.5em;\n height: 1.5em;\n top: 50%;\n left: 50%;\n background-color: #c0cfda;\n border-radius: 50%;\n animation: spin 1.5s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);\n background: radial-gradient(circle at 30% 30%, #ffffff, #ccc);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n/* Animations */\n@keyframes spin {\n 0% {\n transform: translate(-50%, -50%) rotate(90deg) translate(3em) rotate(-90deg);\n }\n\n 100% {\n transform: translate(-50%, -50%) rotate(450deg) translate(3em) rotate(-450deg);\n }\n}\n\n"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"eae6af","snapshot":null,"tags":null,"title":"loader by Ali-Tahmazi99","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":82,"cssLen":717,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loading {\n width: 60px;\n height: 60px;\n position: relative;\n}\n\n.d1 ,\n.d2 {\n border: 5px solid #64dfdf;\n border-radius: 50px;\n}\n\n.loading .d1 {\n width: 55px;\n height: 55px;\n position: absolute;\n top: -9px;\n border-left-color: transparent;\n border-right-color: transparent;\n animation: load161 1s linear infinite;\n}\n\n.loading .d2 {\n width: 40px;\n height: 40px;\n border-top-color: transparent;\n border-bottom-color: transparent;\n margin: 7.5px;\n animation: load2812 2s linear infinite;\n}\n\n@keyframes load161 {\n 0% {\n transform: rotate(0);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes load2812 {\n 0% {\n transform: rotate(0);\n }\n\n 100% {\n transform: rotate(-360deg);\n }\n}"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"aba8b8","snapshot":null,"tags":null,"title":"loader by Juanes200122","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":149,"cssLen":1731,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".wave-menu {\n border: 4px solid #54dbe5;\n border-radius: 50px;\n width: 200px;\n height: 45px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n margin: 0;\n cursor: pointer;\n transition: ease 0.2s;\n position: relative;\n background: #fff;\n}\n\n.wave-menu li {\n list-style: none;\n height: 30px;\n width: 4px;\n border-radius: 10px;\n background: #54dbe5;\n margin: 0 6px;\n padding: 0;\n animation-name: wave1;\n animation-duration: 0.3s;\n animation-iteration-count: infinite;\n animation-direction: alternate;\n transition: ease 0.2s;\n}\n\n.wave-menu:hover > li {\n background: rgb(255, 255, 255);\n}\n\n.wave-menu:hover {\n background: #54dbe5;\n}\n\n.wave-menu li:nth-child(2) {\n animation-name: wave2;\n animation-delay: 0.2s;\n}\n\n.wave-menu li:nth-child(3) {\n animation-name: wave3;\n animation-delay: 0.23s;\n animation-duration: 0.4s;\n}\n\n.wave-menu li:nth-child(4) {\n animation-name: wave4;\n animation-delay: 0.1s;\n animation-duration: 0.3s;\n}\n\n.wave-menu li:nth-child(5) {\n animation-delay: 0.5s;\n}\n\n.wave-menu li:nth-child(6) {\n animation-name: wave2;\n animation-duration: 0.5s;\n}\n\n.wave-menu li:nth-child(8) {\n animation-name: wave4;\n animation-delay: 0.4s;\n animation-duration: 0.25s;\n}\n\n.wave-menu li:nth-child(9) {\n animation-name: wave3;\n animation-delay: 0.15s;\n}\n\n@keyframes wave1 {\n from {\n transform: scaleY(1);\n }\n\n to {\n transform: scaleY(0.5);\n }\n}\n\n@keyframes wave2 {\n from {\n transform: scaleY(0.3);\n }\n\n to {\n transform: scaleY(0.6);\n }\n}\n\n@keyframes wave3 {\n from {\n transform: scaleY(0.6);\n }\n\n to {\n transform: scaleY(0.8);\n }\n}\n\n@keyframes wave4 {\n from {\n transform: scaleY(0.2);\n }\n\n to {\n transform: scaleY(0.5);\n }\n}\n"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"48fd77","snapshot":null,"tags":null,"title":"loader by mrhyddenn","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":135,"cssLen":1485,"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

","css":".loader {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100px;\n height: 100px;\n border-radius: 50%;\n overflow: hidden;\n animation: mac0123 1s linear infinite;\n}\n\n.loader span {\n position: absolute;\n width: 100%;\n height: 100%;\n background: #f00;\n left: 50%;\n border-radius: 50%;\n transform-origin: left;\n}\n\n.loader span:nth-child(1) {\n background: #0fa503;\n transform: rotate(0deg);\n z-index: 2;\n}\n\n.loader span:nth-child(2) {\n background: #ffd203;\n transform: rotate(60deg);\n z-index: 3;\n}\n\n.loader span:nth-child(3) {\n background: #54cd28;\n transform: rotate(120deg);\n z-index: 4;\n}\n\n.loader span:nth-child(4) {\n background: #129cf5;\n transform: rotate(180deg);\n z-index: 5;\n}\n\n.loader span:nth-child(5) {\n background: #bb5ed3;\n transform: rotate(240deg);\n z-index: 6;\n}\n\n.loader span:nth-child(6) {\n background: #ff4f45;\n transform: rotate(300deg);\n z-index: 7;\n overflow: hidden;\n}\n\n.loader span:nth-child(6):before {\n content: '';\n position: absolute;\n top: 45px;\n left: -72px;\n width: 100%;\n height: 100%;\n background: #ffd203;\n border-radius: 50%;\n z-index: 2;\n}\n\n.loader span:nth-child(6):after {\n content: '';\n position: absolute;\n top: 42px;\n left: -23px;\n width: 100%;\n height: 100%;\n background: #fea503;\n border-radius: 50%;\n}\n\n@keyframes mac0123 {\n 0% {\n transform: translate(-50%, -50%) rotate(359deg);\n }\n\n 100% {\n transform: translate(-50%, -50%) rotate(0deg);\n }\n}"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"c6213d","snapshot":null,"tags":null,"title":"loader by VashonG","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1791,"cssLen":662,"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","css":".virtual-card,\n.physical-card,\n.tokenized-card {\n margin: 0 50px;\n}\n\n.plus {\n animation: plus 2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;\n}\n\n.plus-one {\n animation: plus 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;\n}\n\n.plus-two {\n animation: plus 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;\n}\n\n.plus-three {\n animation: plus 3.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;\n}\n\n.plus-four {\n animation: plus 4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;\n}\n\n.plus-five {\n animation: plus 4.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;\n}\n\n@keyframes plus {\n 0% {\n opacity: 1;\n }\n\n 50% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"36d0bd","snapshot":null,"tags":null,"title":"loader by ZacharyCrespin","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":804,"cssLen":3091,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".loader {\n width: 6em;\n height: 6em;\n}\n\n.loader-ring {\n animation: ringA 2s linear infinite;\n}\n\n.loader-ring-a {\n stroke: #9708F4;\n}\n\n.loader-ring-b {\n animation-name: ringB;\n stroke: #5E14E4;\n}\n\n.loader-ring-c {\n animation-name: ringC;\n stroke: #9708F4;\n}\n\n.loader-ring-d {\n animation-name: ringD;\n stroke: #5E14E4;\n}\n\n/* Animations */\n@keyframes ringA {\n from, 4% {\n stroke-dasharray: 0 660;\n stroke-width: 20;\n stroke-dashoffset: -330;\n }\n\n 12% {\n stroke-dasharray: 60 600;\n stroke-width: 30;\n stroke-dashoffset: -335;\n }\n\n 32% {\n stroke-dasharray: 60 600;\n stroke-width: 30;\n stroke-dashoffset: -595;\n }\n\n 40%, 54% {\n stroke-dasharray: 0 660;\n stroke-width: 20;\n stroke-dashoffset: -660;\n }\n\n 62% {\n stroke-dasharray: 60 600;\n stroke-width: 30;\n stroke-dashoffset: -665;\n }\n\n 82% {\n stroke-dasharray: 60 600;\n stroke-width: 30;\n stroke-dashoffset: -925;\n }\n\n 90%, to {\n stroke-dasharray: 0 660;\n stroke-width: 20;\n stroke-dashoffset: -990;\n }\n}\n\n@keyframes ringB {\n from, 12% {\n stroke-dasharray: 0 220;\n stroke-width: 20;\n stroke-dashoffset: -110;\n }\n\n 20% {\n stroke-dasharray: 20 200;\n stroke-width: 30;\n stroke-dashoffset: -115;\n }\n\n 40% {\n stroke-dasharray: 20 200;\n stroke-width: 30;\n stroke-dashoffset: -195;\n }\n\n 48%, 62% {\n stroke-dasharray: 0 220;\n stroke-width: 20;\n stroke-dashoffset: -220;\n }\n\n 70% {\n stroke-dasharray: 20 200;\n stroke-width: 30;\n stroke-dashoffset: -225;\n }\n\n 90% {\n stroke-dasharray: 20 200;\n stroke-width: 30;\n stroke-dashoffset: -305;\n }\n\n 98%, to {\n stroke-dasharray: 0 220;\n stroke-width: 20;\n stroke-dashoffset: -330;\n }\n}\n\n@keyframes ringC {\n from {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: 0;\n }\n\n 8% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -5;\n }\n\n 28% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -175;\n }\n\n 36%, 58% {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: -220;\n }\n\n 66% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -225;\n }\n\n 86% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -395;\n }\n\n 94%, to {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: -440;\n }\n}\n\n@keyframes ringD {\n from, 8% {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: 0;\n }\n\n 16% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -5;\n }\n\n 36% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -175;\n }\n\n 44%, 50% {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: -220;\n }\n\n 58% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -225;\n }\n\n 78% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -395;\n }\n\n 86%, to {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: -440;\n }\n}"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"742164","snapshot":null,"tags":null,"title":"loader by Li-Deheng","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":395,"cssLen":2149,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n display: flex;\n justify-content: center;\n align-items: center;\n --color: hsl(0, 0%, 33%);\n --animation: 2s ease-in-out infinite;\n}\n\n.loader .circle {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 20px;\n height: 20px;\n border: solid 2px var(--color);\n border-radius: 50%;\n margin: 0 10px;\n background-color: transparent;\n animation: circle-keys var(--animation);\n}\n\n.loader .circle .dot {\n position: absolute;\n transform: translate(-50%, -50%);\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background-color: var(--color);\n animation: dot-keys var(--animation);\n}\n\n.loader .circle .outline {\n position: absolute;\n transform: translate(-50%, -50%);\n width: 20px;\n height: 20px;\n border-radius: 50%;\n animation: outline-keys var(--animation);\n}\n\n.circle:nth-child(2) {\n animation-delay: 0.3s;\n}\n\n.circle:nth-child(3) {\n animation-delay: 0.6s;\n}\n\n.circle:nth-child(4) {\n animation-delay: 0.9s;\n}\n\n.circle:nth-child(5) {\n animation-delay: 1.2s;\n}\n\n.circle:nth-child(2) .dot {\n animation-delay: 0.3s;\n}\n\n.circle:nth-child(3) .dot {\n animation-delay: 0.6s;\n}\n\n.circle:nth-child(4) .dot {\n animation-delay: 0.9s;\n}\n\n.circle:nth-child(5) .dot {\n animation-delay: 1.2s;\n}\n\n.circle:nth-child(1) .outline {\n animation-delay: 0.9s;\n}\n\n.circle:nth-child(2) .outline {\n animation-delay: 1.2s;\n}\n\n.circle:nth-child(3) .outline {\n animation-delay: 1.5s;\n}\n\n.circle:nth-child(4) .outline {\n animation-delay: 1.8s;\n}\n\n.circle:nth-child(5) .outline {\n animation-delay: 2.1s;\n}\n\n@keyframes circle-keys {\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n\n 50% {\n transform: scale(1.5);\n opacity: 0.5;\n }\n\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n@keyframes dot-keys {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes outline-keys {\n 0% {\n transform: scale(0);\n outline: solid 20px var(--color);\n outline-offset: 0;\n opacity: 1;\n }\n\n 100% {\n transform: scale(1);\n outline: solid 0 transparent;\n outline-offset: 20px;\n opacity: 0;\n }\n}"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"e9d5fb","snapshot":null,"tags":null,"title":"loader by Nawsome","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1201,"cssLen":83,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n","css":".loader {\n height: 20vh;\n width: 20vh;\n max-height: 480px;\n min-width: 480px;\n}"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"176927","snapshot":null,"tags":null,"title":"loader by csemszepp","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":30,"cssLen":881,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n","css":".loader {\n width: 50px;\n aspect-ratio: 1;\n display: flex;\n color: orange;\n background: linear-gradient(currentColor 0 0) right / 51% 100%,\n linear-gradient(currentColor 0 0) bottom / 100% 51%;\n background-repeat: no-repeat;\n animation: l16-0 2s infinite linear 0.25s;\n}\n\n.loader::before {\n content: \"\";\n width: 50%;\n height: 50%;\n background: currentColor;\n animation: l16-1 0.5s infinite linear;\n}\n\n@keyframes l16-0 {\n 0%,\n 12.49% {\n transform: rotate(0deg);\n }\n\n 12.5%,\n 37.49% {\n transform: rotate(90deg);\n }\n\n 37.5%,\n 62.49% {\n transform: rotate(180deg);\n }\n\n 62.5%,\n 87.49% {\n transform: rotate(270deg);\n }\n\n 87.5%,\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes l16-1 {\n 0% {\n transform: perspective(80px) rotate3d(-1, -1, 0, 0);\n }\n\n 80%,\n 100% {\n transform: perspective(80px) rotate3d(-1, -1, 0, -180deg);\n }\n}\n"},{"created":"2024-01-22T16:54:17.000Z","isPrivate":0,"projectId":"0fa350","snapshot":null,"tags":null,"title":"loader by fanishah","updated":"2024-01-22T16:54:17.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":890,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loading-bar {\n position: relative;\n width: 110px;\n height: 110px;\n background: transparent;\n border: px solid #3c3c3c;\n border-radius: 50%;\n text-align: center;\n line-height: 111px;\n font-family: sans-serif;\n font-size: 15px;\n color: #fff000;\n letter-spacing: 3px;\n text-transform: uppercase;\n text-shadow: 0 0 20px #fff000;\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);\n}\n\n.loading-bar:before {\n content: \"\";\n position: absolute;\n top: -3px;\n left: -3px;\n width: 100%;\n height: 100%;\n border: 3px solid transparent;\n border-top: 5px solid #fff000;\n border-right: 5px solid #fff000;\n border-radius: 50%;\n animation: animateC 2s linear infinite;\n}\n\n@keyframes animateC {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes animate {\n 0% {\n transform: rotate(45deg);\n }\n\n 100% {\n transform: rotate(405deg);\n }\n}\n"}]}},"actionData":null,"errors":null}