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

\n","css":".Buttons {\n color: #000;\n width: 6px;\n aspect-ratio: 1;\n border-radius: 50%;\n animation: l37-1 0.75s infinite linear alternate, l37-2 1.5s infinite linear;\n}\n@keyframes l37-1 {\n 0%,\n 20% {\n box-shadow: 30px 0 0 3px, 10px 0 0 3px, -10px 0 0 3px, -30px 0 0 3px;\n }\n 60%,\n 100% {\n box-shadow: 12px 0 0 3px, 14px 0 0 6px, -14px 0 0 6px, -12px 0 0 3px;\n }\n}\n\n@keyframes l37-2 {\n 0%,\n 25% {\n transform: rotate(0);\n }\n 50%,\n 100% {\n transform: rotate(0.5turn);\n }\n}\n"},{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"91c7ac","snapshot":null,"tags":null,"title":"loader by csemszepp","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":120,"cssLen":3793,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\r\n\t

\n\t\t

\t\n\t

","css":"@-webkit-keyframes sphere1Move {\n 0% {\n width: 50px;\n height: 50px;\n left: 116px;\n top: 116px;\n z-index: 0;\n }\n\n 10% {\n width: 40px;\n height: 40px;\n }\n\n 20% {\n width: 30px;\n height: 30px;\n }\n\n 30% {\n width: 40px;\n height: 40px;\n }\n\n 45% {\n left: 15px;\n }\n\n 49% {\n z-index: 0;\n }\n\n 50% {\n width: 50px;\n height: 50px;\n left: 20px;\n top: 116px;\n z-index: 10;\n }\n\t/*55%{left:15px;}*/\n 60% {\n width: 60px;\n height: 60px;\n }\n\n 80% {\n width: 70px;\n height: 70px;\n }\n\n 90% {\n width: 60px;\n height: 60px;\n }\n\n 99% {\n z-index: 10;\n }\n\n 100% {\n width: 50px;\n height: 50px;\n left: 116px;\n top: 116px;\n z-index: 0;\n }\n}\n\n@keyframes sphere1Move {\n 0% {\n width: 50px;\n height: 50px;\n left: 116px;\n top: 116px;\n z-index: 0;\n }\n\n 10% {\n width: 40px;\n height: 40px;\n }\n\n 20% {\n width: 30px;\n height: 30px;\n }\n\n 30% {\n width: 40px;\n height: 40px;\n }\n\n 45% {\n left: 15px;\n }\n\n 49% {\n z-index: 0;\n }\n\n 50% {\n width: 50px;\n height: 50px;\n left: 20px;\n top: 116px;\n z-index: 10;\n }\n/*\t55%{left:15px;}*/\n 60% {\n width: 60px;\n height: 60px;\n }\n\n 80% {\n width: 70px;\n height: 70px;\n }\n\n 90% {\n width: 60px;\n height: 60px;\n }\n\n 99% {\n z-index: 10;\n }\n\n 100% {\n width: 50px;\n height: 50px;\n left: 116px;\n top: 116px;\n z-index: 0;\n }\n}\n\n@-webkit-keyframes sphere2Move {\n 0% {\n width: 50px;\n height: 50px;\n left: 116px;\n top: 116px;\n z-index: 0;\n }\n\n 10% {\n width: 40px;\n height: 40px;\n }\n\n 20% {\n width: 30px;\n height: 30px;\n }\n\n 30% {\n width: 40px;\n height: 40px;\n }\n\n 45% {\n left: 217px;\n }\n\n 49% {\n z-index: 0;\n }\n\n 50% {\n width: 50px;\n height: 50px;\n left: 222px;\n top: 116px;\n z-index: 10;\n }\n\t/*55%{left:15px;}*/\n 60% {\n width: 60px;\n height: 60px;\n }\n\n 80% {\n width: 70px;\n height: 70px;\n }\n\n 90% {\n width: 60px;\n height: 60px;\n }\n\n 99% {\n z-index: 10;\n }\n\n 100% {\n width: 50px;\n height: 50px;\n left: 116px;\n top: 116px;\n z-index: 0;\n }\n}\n\n@keyframes sphere2Move {\n 0% {\n width: 50px;\n height: 50px;\n left: 116px;\n top: 116px;\n z-index: 0;\n }\n\n 10% {\n width: 40px;\n height: 40px;\n }\n\n 20% {\n width: 30px;\n height: 30px;\n }\n\n 30% {\n width: 40px;\n height: 40px;\n }\n\n 45% {\n left: 217px;\n }\n\n 49% {\n z-index: 0;\n }\n\n 50% {\n width: 50px;\n height: 50px;\n left: 222px;\n top: 116px;\n z-index: 10;\n }\n\t/*55%{left:15px;}*/\n 60% {\n width: 60px;\n height: 60px;\n }\n\n 80% {\n width: 70px;\n height: 70px;\n }\n\n 90% {\n width: 60px;\n height: 60px;\n }\n\n 99% {\n z-index: 10;\n }\n\n 100% {\n width: 50px;\n height: 50px;\n left: 116px;\n top: 116px;\n z-index: 0;\n }\n}\n\n.wrapper {\n width: 300px;\n height: 300px;\n\t/*border:1px solid red;*/\n margin: 0 auto;\n margin-top: 5%;\n position: relative;\n}\n\n.hoop {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background: transparent;\n box-shadow: 0 0 0 6px #96281B, 0 0 0 26px #D64541;\n position: absolute;\n left: 100px;\n top: 100px;\n z-index: 5;\n}\n\n.sphere1 {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background: #22A7F0;\n position: absolute;\n left: 116px;\n top: 116px;\n box-shadow: -7px -7px 0 #1E8BC3 inset;\n -webkit-animation: sphere1Move 1.2s linear infinite;\n animation: sphere1Move 1.2s linear infinite;\n}\n\n.sphere2 {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background: #22A7F0;\n position: absolute;\n left: 116px;\n top: 116px;\n box-shadow: -7px -7px 0 #1E8BC3 inset;\n -webkit-animation: sphere2Move 1.2s linear 0.6s infinite;\n animation: sphere2Move 1.2s linear 0.6s infinite;\n}"},{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"9742d6","snapshot":null,"tags":null,"title":"loader by dylanharriscameron","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":986,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loaderBar {\n width: calc(160px / 0.707);\n height: 10px;\n background: #F9F9F9;\n border-radius: 10px;\n border: 1px solid #006DFE;\n position: relative;\n overflow: hidden;\n}\n\n.loaderBar::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n border-radius: 5px;\n background: repeating-linear-gradient(45deg, #0031F2 0 30px, #006DFE 0 40px) right/200% 100%;\n animation: fillProgress 6s ease-in-out infinite, lightEffect 1s infinite linear;\n animation-fill-mode: forwards;\n}\n\n@keyframes fillProgress {\n 0% {\n width: 0;\n }\n\n 33% {\n width: 33.333%;\n }\n\n 66% {\n width: 66.67%;\n }\n\n 100% {\n width: 100%;\n }\n}\n\n@keyframes lightEffect {\n 0%, 20%, 40%, 60%, 80%, 100% {\n background: repeating-linear-gradient(45deg, #0031F2 0 30px, #006DFE 0 40px) right/200% 100%;\n }\n\n 10%, 30%, 50%, 70%, 90% {\n background: repeating-linear-gradient(45deg, #0031F2 0 30px, #006DFE 0 40px, rgba(255, 255, 255, 0.3) 0 40px) right/200% 100%;\n }\n}"},{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"c40d31","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1434,"cssLen":820,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":"#pen1 {\n animation: pen1 2s infinite ease;\n}\n\n#pen2 {\n animation: pen2 2s infinite ease;\n}\n\n#pen3 {\n animation: pen3 2s infinite ease;\n}\n\n#loader {\n animation: loaderColor 5s infinite ease;\n}\n\n@keyframes pen1 {\n 0% {\n transform: translateY(0px);\n }\n\n 15% {\n transform: translateY(-10px);\n }\n\n 30% {\n transform: translateY(0px);\n }\n}\n\n@keyframes pen2 {\n 30% {\n transform: translateY(0px);\n }\n\n 45% {\n transform: translateY(-10px);\n }\n\n 60% {\n transform: translateY(0px);\n }\n}\n\n@keyframes pen3 {\n 60% {\n transform: translateY(0px);\n }\n\n 75% {\n transform: translateY(-10px);\n }\n\n 90% {\n transform: translateY(0px);\n }\n}\n\n@keyframes loaderColor {\n 0% {\n fill: #513B56;\n }\n\n 33% {\n fill: #348AA7;\n }\n\n 66% {\n fill: #5DD39E;\n }\n\n 100% {\n fill: #513B56;\n }\n}"},{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"a97019","snapshot":null,"tags":null,"title":"loader by Javierrocadev","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":316,"cssLen":658,"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.h-4 {\n height: 1rem\n}\n\n.w-4 {\n width: 1rem\n}\n\n@keyframes bounce {\n 0%, 100% {\n transform: translateY(-25%);\n animation-timing-function: cubic-bezier(0.8,0,1,1)\n }\n\n 50% {\n transform: none;\n animation-timing-function: cubic-bezier(0,0,0.2,1)\n }\n}\n\n.animate-bounce {\n animation: bounce 1s infinite\n}\n\n.flex-row {\n flex-direction: row\n}\n\n.gap-2 {\n gap: 0.5rem\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.bg-blue-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(29 78 216 / var(--tw-bg-opacity))\n}\n\n.\\[animation-delay\\:\\.3s\\] {\n animation-delay: .3s\n}\n\n.\\[animation-delay\\:\\.7s\\] {\n animation-delay: .7s\n}"},{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"4bf937","snapshot":null,"tags":null,"title":"loader by youranonone10","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":235,"cssLen":4818,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n ","css":".holder {\n margin: 12rem auto 0;\n width: 150px;\n height: 400px;\n position: relative;\n}\n\n.holder *, .holder *:before, .holder *:after {\n position: absolute;\n content: \"\";\n}\n\n.candle {\n bottom: 0;\n width: 150px;\n height: 300px;\n border-radius: 150px / 40px;\n -webkit-box-shadow: inset 20px -30px 50px 0 rgba(0, 0, 0, 0.4), inset -20px 0 50px 0 rgba(0, 0, 0, 0.4);\n box-shadow: inset 20px -30px 50px 0 rgba(0, 0, 0, 0.4), inset -20px 0 50px 0 rgba(0, 0, 0, 0.4);\n background: #190f02;\n background: -webkit-gradient(linear, left top, left bottom, from(#e48825), color-stop(#e78e0e), color-stop(#833c03), color-stop(50%, #4c1a03), to(#1c0900));\n background: linear-gradient(#e48825, #e78e0e, #833c03, #4c1a03 50%, #1c0900);\n}\n\n.candle:before {\n width: 100%;\n height: 40px;\n border-radius: 50%;\n border: 2px solid #d47401;\n background: #b86409;\n background: radial-gradient(#ffef80, #b86409 60%);\n background: radial-gradient(#eaa121, #8e4901 45%, #b86409 80%);\n}\n\n.candle:after {\n width: 34px;\n height: 10px;\n left: 50%;\n -webkit-transform: translateX(-50%);\n -ms-transform: translateX(-50%);\n transform: translateX(-50%);\n border-radius: 50%;\n top: 14px;\n -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);\n box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);\n background: radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%);\n}\n\n.thread {\n width: 6px;\n height: 36px;\n top: -17px;\n left: 50%;\n z-index: 1;\n border-radius: 40% 40% 0 0;\n -webkit-transform: translateX(-50%);\n -ms-transform: translateX(-50%);\n transform: translateX(-50%);\n background: #121212;\n background: -webkit-gradient(linear, left top, left bottom, from(#d6994a), color-stop(#4b232c), color-stop(#121212), color-stop(black), color-stop(90%, #e8bb31));\n background: linear-gradient(#d6994a, #4b232c, #121212, black, #e8bb31 90%);\n}\n\n.flame {\n width: 24px;\n height: 120px;\n left: 50%;\n -webkit-transform-origin: 50% 100%;\n -ms-transform-origin: 50% 100%;\n transform-origin: 50% 100%;\n -webkit-transform: translateX(-50%);\n -ms-transform: translateX(-50%);\n transform: translateX(-50%);\n bottom: 100%;\n border-radius: 50% 50% 20% 20%;\n background: rgba(255, 255, 255, 1);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, white), to(transparent));\n background: linear-gradient(white 80%, transparent);\n -webkit-animation: moveFlame 6s linear infinite, enlargeFlame 5s linear infinite;\n animation: moveFlame 6s linear infinite, enlargeFlame 5s linear infinite;\n}\n\n.flame:before {\n width: 100%;\n height: 100%;\n border-radius: 50% 50% 20% 20%;\n -webkit-box-shadow: 0 0 15px 0 rgba(247, 93, 0, .4), 0 -6px 4px 0 rgba(247, 128, 0, .7);\n box-shadow: 0 0 15px 0 rgba(247, 93, 0, .4), 0 -6px 4px 0 rgba(247, 128, 0, .7);\n}\n\n@-webkit-keyframes moveFlame {\n 0%, 100% {\n -webkit-transform: translateX(-50%) rotate(-2deg);\n transform: translateX(-50%) rotate(-2deg);\n }\n\n 50% {\n -webkit-transform: translateX(-50%) rotate(2deg);\n transform: translateX(-50%) rotate(2deg);\n }\n}\n\n@keyframes moveFlame {\n 0%, 100% {\n -webkit-transform: translateX(-50%) rotate(-2deg);\n transform: translateX(-50%) rotate(-2deg);\n }\n\n 50% {\n -webkit-transform: translateX(-50%) rotate(2deg);\n transform: translateX(-50%) rotate(2deg);\n }\n}\n\n@-webkit-keyframes enlargeFlame {\n 0%, 100% {\n height: 120px;\n }\n\n 50% {\n height: 140px;\n }\n}\n\n@keyframes enlargeFlame {\n 0%, 100% {\n height: 120px;\n }\n\n 50% {\n height: 140px;\n }\n}\n\n.glow {\n width: 26px;\n height: 60px;\n border-radius: 50% 50% 35% 35%;\n left: 50%;\n top: -48px;\n -webkit-transform: translateX(-50%);\n -ms-transform: translateX(-50%);\n transform: translateX(-50%);\n background: rgba(0, 133, 255, .7);\n -webkit-box-shadow: 0 -40px 30px 0 #dc8a0c, 0 40px 50px 0 #dc8a0c, inset 3px 0 2px 0 rgba(0, 133, 255, .6), inset -3px 0 2px 0 rgba(0, 133, 255, .6);\n box-shadow: 0 -40px 30px 0 #dc8a0c, 0 40px 50px 0 #dc8a0c, inset 3px 0 2px 0 rgba(0, 133, 255, .6), inset -3px 0 2px 0 rgba(0, 133, 255, .6);\n}\n\n.glow:before {\n width: 70%;\n height: 60%;\n left: 50%;\n -webkit-transform: translateX(-50%);\n -ms-transform: translateX(-50%);\n transform: translateX(-50%);\n bottom: 0;\n border-radius: 50%;\n background: rgba(0, 0, 0, 0.35);\n}\n\n.blinking-glow {\n width: 100px;\n height: 180px;\n left: 50%;\n top: -55%;\n -webkit-transform: translateX(-50%);\n -ms-transform: translateX(-50%);\n transform: translateX(-50%);\n border-radius: 50%;\n background: #ff6000;\n -webkit-filter: blur(50px);\n -moz-filter: blur(60px);\n -o-filter: blur(60px);\n -ms-filter: blur(60px);\n filter: blur(60px);\n -webkit-animation: blinkIt .1s infinite;\n animation: blinkIt .1s infinite;\n}\n\n@-webkit-keyframes blinkIt {\n 50% {\n opacity: .8;\n }\n}\n\n@keyframes blinkIt {\n 50% {\n opacity: .8;\n }\n}\n\n\n"},{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"129de2","snapshot":null,"tags":null,"title":"loader by catraco","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":728,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".spinner {\n --size: 30px;\n --first-clr: #005bba;\n --second-clr: #fed500;\n width: 100px;\n height: 100px;\n position: relative;\n}\n\n.spinner::before,\n.spinner::after {\n content: \"\";\n width: var(--size);\n height: var(--size);\n border: 6px solid var(--first-clr);\n position: absolute;\n top: 50%;\n left: calc(var(--size));\n transform: translate(-50%, -50%);\n animation: kf-spin 1s linear infinite;\n border-radius: 50% 80% 50% 70%;\n box-sizing: border-box;\n}\n\n.spinner::after {\n top: 50%;\n left: calc(var(--size) * 2);\n border: 6px solid var(--second-clr);\n animation: kf-spin 1s linear infinite reverse;\n}\n\n@keyframes kf-spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"57f8cd","snapshot":null,"tags":null,"title":"loader by G4b413l","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":1063,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".momentum {\n --uib-size: 40px;\n --uib-speed: 1s;\n --uib-color: rgb(221, 255, 242);\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--uib-size);\n width: var(--uib-size);\n animation: rotate01561 var(--uib-speed) linear infinite;\n}\n\n.momentum::before,\n.momentum::after {\n content: '';\n height: 25%;\n width: 25%;\n border-radius: 50%;\n background-color: var(--uib-color);\n}\n\n.momentum::before {\n animation: wobble290123 calc(var(--uib-speed) * 1.25) ease-in-out infinite;\n}\n\n.momentum::after {\n animation: wobble9123 calc(var(--uib-speed) * 1.25) ease-in-out infinite;\n}\n\n.momentum::before {\n margin-right: 10%;\n}\n\n@keyframes wobble9123 {\n 0%,\n 100% {\n transform: translateX(0);\n }\n\n 50% {\n transform: translateX(calc(var(--uib-size) * 0.2)) scale(1.1);\n }\n}\n\n@keyframes wobble290123 {\n 0%,\n 100% {\n transform: translateX(0);\n }\n\n 50% {\n transform: translateX(calc(var(--uib-size) * -0.2)) scale(1.1);\n }\n}\n\n@keyframes rotate01561 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"18bb78","snapshot":null,"tags":null,"title":"loader by TemplateVentures","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":90,"cssLen":862,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Please wait...\n

\n","css":".loader {\n width: 350px;\n height: 180px;\n border-radius: 10px;\n background: #fff;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-evenly;\n padding: 30px;\n box-shadow: 2px 2px 10px -5px lightgrey;\n}\n.loading {\n width: 100%;\n height: 10px;\n background: lightgrey;\n border-radius: 10px;\n position: relative;\n overflow: hidden;\n}\n.loading::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 50%;\n height: 10px;\n background: #002;\n border-radius: 10px;\n z-index: 1;\n animation: loading 0.6s alternate infinite;\n}\nlabel {\n color: #002;\n font-size: 18px;\n animation: bit 0.6s alternate infinite;\n}\n\n@keyframes bit {\n from {\n opacity: 0.3;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes loading {\n 0% {\n left: -25%;\n }\n 100% {\n left: 70%;\n }\n 0% {\n left: -25%;\n }\n}\n"},{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"2bac69","snapshot":null,"tags":null,"title":"loader by MikeAndrewDesigner","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1612,"cssLen":455,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n\n\n

Creator Points

\n","css":".svglogo {\n color: #fff;\n animation: rotate 7s linear infinite;\n background: linear-gradient(144deg,#af40ff,#5b42f3 50%,#00ddeb);\n border-radius: 50%;\n padding: 1.2em;\n width: 95px;\n margin: 0 auto;\n display: block;\n}\n\n.text {\n font-size: 1.4em;\n color: rgb(129, 120, 120);\n text-align: center;\n margin-top: 1em;\n font-weight: 500;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"9f81d3","snapshot":null,"tags":null,"title":"loader by elijahgummer","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":57,"cssLen":310,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".container {\n width: 50px;\n height: 50px;\n}\n\n.container .boxes {\n width: 50px;\n height: 50px;\n fill: none;\n stroke-width: 50px;\n stroke: #9b59b6;\n stroke-dasharray: 50;\n stroke-dashoffset: 50%;\n animation: animate 2s linear infinite;\n}\n\n@keyframes animate {\n to {\n stroke-dashoffset: 250%;\n }\n}\n"},{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"a52c1e","snapshot":null,"tags":null,"title":"loader by PriyanshuGupta28","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":184,"cssLen":1140,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n flex-direction: row;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.circle {\n width: 20px;\n height: 20px;\n background-color: #8BC6EC;\n background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);\n border-radius: 50%;\n margin-right: 1rem;\n animation: pulse 1.2s ease-in-out infinite;\n}\n\n.circle:nth-child(2) {\n animation-delay: 0.2s;\n background-color: #4158D0;\n background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);\n}\n\n.circle:nth-child(3) {\n animation-delay: 0.4s;\n background-color: #0093E9;\n background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);\n}\n\n.circle:nth-child(4) {\n animation-delay: 0.6s;\n background-color: #8EC5FC;\n background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);\n}\n\n.circle:nth-child(5) {\n animation-delay: 0.8s;\n background-color: #00DBDE;\n background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(0.8);\n opacity: 0.7;\n }\n\n 50% {\n transform: scale(1);\n opacity: 1;\n }\n\n 100% {\n transform: scale(0.8);\n opacity: 0.7;\n }\n}"}]}},"actionData":null,"errors":null}