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

\n\n

","css":".loader {\n position: absolute;\n}\n\n.cercle {\n position: absolute;\n background: #3f7ee8;\n border-radius: 50%;\n width: 60px;\n height: 60px;\n top: -40px;\n left: -70px;\n animation: move-up6 .4s ease-in infinite alternate-reverse;\n}\n\n.cercle:nth-child(2) {\n width: 25px;\n height: 25px;\n top: -2px;\n left: -5px;\n background: #de4032;\n animation: move-down1 .4s ease-in infinite alternate-reverse;\n}\n\n.cercle:nth-child(3) {\n width: 30px;\n height: 30px;\n top: 35px;\n left: -7px;\n background: #eeb205;\n animation: move-updown1 .4s ease-in infinite alternate-reverse;\n}\n\n.cercle:nth-child(4) {\n width: 12px;\n height: 12px;\n top: -10px;\n left: 25px;\n background: #31aa52;\n animation: move-up6 .4s ease-in infinite alternate-reverse;\n}\n\n@keyframes move-up6 {\n to {\n transform: translateY(-5px);\n }\n}\n\n@keyframes move-down1 {\n to {\n transform: translateY(5px);\n }\n}\n\n@keyframes move-updown1 {\n to {\n transform: translateY(10px);\n }\n\n from {\n transform: translateY(-7px);\n }\n}\n\n\n"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"cced01","snapshot":null,"tags":null,"title":"loader by SouravBandyopadhyay","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":98,"cssLen":881,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n width: 8em;\n height: 4em;\n position: relative;\n margin: 0 auto;\n}\n\n.circle {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n border-radius: 50%;\n border: 0.4em solid transparent;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n}\n\n.outer {\n border-top-color: #ff0080;\n border-right-color: #ffbf00;\n border-bottom-color: #00bfff;\n border-left-color: #80ff00;\n animation-name: rotate-outer;\n}\n\n.inner {\n border-top-color: #80ff00;\n border-right-color: #00bfff;\n border-bottom-color: #ffbf00;\n border-left-color: #ff0080;\n animation-name: rotate-inner;\n}\n\n@keyframes rotate-outer {\n 0% {\n transform: rotate(0);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes rotate-inner {\n 0% {\n transform: rotate(360deg);\n }\n\n 100% {\n transform: rotate(0);\n }\n}\n"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"7dfc32","snapshot":null,"tags":null,"title":"loader by Ratinax","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":119,"cssLen":1051,"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: space-between;\n}\n\n.pac-man {\n width: 5em;\n aspect-ratio: 1;\n border-radius: 50%;\n background: radial-gradient(farthest-side,#000 98%,#0000) 1.7em 0.61em/.8em .8em no-repeat, \n #ffcc00;\n box-shadow: .2em -.6em 1.2em 0em inset rgba(0, 0, 0, 0.7);\n animation: l4 .5s infinite steps(5) alternate;\n z-index: 999;\n}\n\n.point {\n margin-top: 2em;\n position: absolute;\n margin-left: .4em;\n width: 1em;\n height: 1em;\n background-color: #000;\n border-radius: 50%;\n}\n\n.p1 {\n margin-left: 8em;\n animation: moove-p1 2s linear infinite;\n}\n\n.p2 {\n margin-left: 15em;\n animation: moove-p2 2s linear infinite;\n}\n\n@keyframes moove-p1 {\n 0% {\n margin-left: 8em;\n }\n\n 100% {\n margin-left: 0em;\n }\n}\n\n@keyframes moove-p2 {\n 0% {\n margin-left: 16em;\n }\n\n 100% {\n margin-left: 8em;\n }\n}\n\n@keyframes l4 {\n \n 0% {\n clip-path: polygon(50% 50%,100% 0,100% 0,0 0,0 100%,100% 100%,100% 100%)\n }\n\n 100% {\n clip-path: polygon(50% 50%,100% 65%,100% 0,0 0,0 100%,100% 100%,100% 35%)\n }\n}"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"156fbc","snapshot":null,"tags":null,"title":"loader by InfinityLoopGames","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":475,"cssLen":13438,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n --duration: 3s;\n --primary: rgb(56, 56, 56);\n --primary-light: #5c5c5c;\n --primary-rgba: rgba(39, 94, 254, 0);\n width: 200px;\n height: 320px;\n position: relative;\n transform-style: preserve-3d;\n}\n\n@media (max-width: 480px) {\n .loader {\n zoom: 0.44;\n }\n}\n\n.loader:before, .loader:after {\n --r: 20.5deg;\n content: \"\";\n width: 320px;\n height: 140px;\n position: absolute;\n right: 32%;\n bottom: -11px;\n/* change the back groung color on switching from light to dark mood */\n background: #e8e8e8;\n transform: translateZ(200px) rotate(var(--r));\n -webkit-animation: mask var(--duration) linear forwards infinite;\n animation: mask var(--duration) linear forwards infinite;\n}\n\n.loader:after {\n --r: -20.5deg;\n right: auto;\n left: 32%;\n}\n\n.loader .ground {\n position: absolute;\n left: -50px;\n bottom: -120px;\n transform-style: preserve-3d;\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n}\n\n.loader .ground div {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n width: 200px;\n height: 200px;\n background: var(--primary);\n background: linear-gradient(45deg, var(--primary) 0%, var(--primary) 50%, var(--primary-light) 50%, var(--primary-light) 100%);\n transform-style: preserve-3d;\n -webkit-animation: ground var(--duration) linear forwards infinite;\n animation: ground var(--duration) linear forwards infinite;\n}\n\n.loader .ground div:before, .loader .ground div:after {\n --rx: 90deg;\n --ry: 0deg;\n --x: 44px;\n --y: 162px;\n --z: -50px;\n content: \"\";\n width: 156px;\n height: 300px;\n opacity: 0;\n background: linear-gradient(var(--primary), var(--primary-rgba));\n position: absolute;\n transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));\n -webkit-animation: ground-shine var(--duration) linear forwards infinite;\n animation: ground-shine var(--duration) linear forwards infinite;\n}\n\n.loader .ground div:after {\n --rx: 90deg;\n --ry: 90deg;\n --x: 0;\n --y: 177px;\n --z: 150px;\n}\n\n.loader .box {\n --x: 0;\n --y: 0;\n position: absolute;\n -webkit-animation: var(--duration) linear forwards infinite;\n animation: var(--duration) linear forwards infinite;\n transform: translate(var(--x), var(--y));\n}\n\n.loader .box div {\n background-color: var(--primary);\n width: 48px;\n height: 48px;\n position: relative;\n transform-style: preserve-3d;\n -webkit-animation: var(--duration) ease forwards infinite;\n animation: var(--duration) ease forwards infinite;\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n}\n\n.loader .box div:before, .loader .box div:after {\n --rx: 90deg;\n --ry: 0deg;\n --z: 24px;\n --y: -24px;\n --x: 0;\n content: \"\";\n position: absolute;\n background-color: inherit;\n width: inherit;\n height: inherit;\n transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));\n filter: brightness(var(--b, 1.2));\n}\n\n.loader .box div:after {\n --rx: 0deg;\n --ry: 90deg;\n --x: 24px;\n --y: 0;\n --b: 1.4;\n}\n\n.loader .box.box0 {\n --x: -220px;\n --y: -120px;\n left: 58px;\n top: 108px;\n}\n\n.loader .box.box1 {\n --x: -260px;\n --y: 120px;\n left: 25px;\n top: 120px;\n}\n\n.loader .box.box2 {\n --x: 120px;\n --y: -190px;\n left: 58px;\n top: 64px;\n}\n\n.loader .box.box3 {\n --x: 280px;\n --y: -40px;\n left: 91px;\n top: 120px;\n}\n\n.loader .box.box4 {\n --x: 60px;\n --y: 200px;\n left: 58px;\n top: 132px;\n}\n\n.loader .box.box5 {\n --x: -220px;\n --y: -120px;\n left: 25px;\n top: 76px;\n}\n\n.loader .box.box6 {\n --x: -260px;\n --y: 120px;\n left: 91px;\n top: 76px;\n}\n\n.loader .box.box7 {\n --x: -240px;\n --y: 200px;\n left: 58px;\n top: 87px;\n}\n\n.loader .box0 {\n -webkit-animation-name: box-move0;\n animation-name: box-move0;\n}\n\n.loader .box0 div {\n -webkit-animation-name: box-scale0;\n animation-name: box-scale0;\n}\n\n.loader .box1 {\n -webkit-animation-name: box-move1;\n animation-name: box-move1;\n}\n\n.loader .box1 div {\n -webkit-animation-name: box-scale1;\n animation-name: box-scale1;\n}\n\n.loader .box2 {\n -webkit-animation-name: box-move2;\n animation-name: box-move2;\n}\n\n.loader .box2 div {\n -webkit-animation-name: box-scale2;\n animation-name: box-scale2;\n}\n\n.loader .box3 {\n -webkit-animation-name: box-move3;\n animation-name: box-move3;\n}\n\n.loader .box3 div {\n -webkit-animation-name: box-scale3;\n animation-name: box-scale3;\n}\n\n.loader .box4 {\n -webkit-animation-name: box-move4;\n animation-name: box-move4;\n}\n\n.loader .box4 div {\n -webkit-animation-name: box-scale4;\n animation-name: box-scale4;\n}\n\n.loader .box5 {\n -webkit-animation-name: box-move5;\n animation-name: box-move5;\n}\n\n.loader .box5 div {\n -webkit-animation-name: box-scale5;\n animation-name: box-scale5;\n}\n\n.loader .box6 {\n -webkit-animation-name: box-move6;\n animation-name: box-move6;\n}\n\n.loader .box6 div {\n -webkit-animation-name: box-scale6;\n animation-name: box-scale6;\n}\n\n.loader .box7 {\n -webkit-animation-name: box-move7;\n animation-name: box-move7;\n}\n\n.loader .box7 div {\n -webkit-animation-name: box-scale7;\n animation-name: box-scale7;\n}\n\n@-webkit-keyframes box-move0 {\n 12% {\n transform: translate(var(--x), var(--y));\n }\n\n 25%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move0 {\n 12% {\n transform: translate(var(--x), var(--y));\n }\n\n 25%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale0 {\n 6% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 14%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale0 {\n 6% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 14%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move1 {\n 16% {\n transform: translate(var(--x), var(--y));\n }\n\n 29%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move1 {\n 16% {\n transform: translate(var(--x), var(--y));\n }\n\n 29%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale1 {\n 10% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 18%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale1 {\n 10% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 18%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move2 {\n 20% {\n transform: translate(var(--x), var(--y));\n }\n\n 33%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move2 {\n 20% {\n transform: translate(var(--x), var(--y));\n }\n\n 33%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale2 {\n 14% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 22%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale2 {\n 14% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 22%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move3 {\n 24% {\n transform: translate(var(--x), var(--y));\n }\n\n 37%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move3 {\n 24% {\n transform: translate(var(--x), var(--y));\n }\n\n 37%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale3 {\n 18% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 26%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale3 {\n 18% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 26%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move4 {\n 28% {\n transform: translate(var(--x), var(--y));\n }\n\n 41%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move4 {\n 28% {\n transform: translate(var(--x), var(--y));\n }\n\n 41%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale4 {\n 22% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 30%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale4 {\n 22% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 30%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move5 {\n 32% {\n transform: translate(var(--x), var(--y));\n }\n\n 45%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move5 {\n 32% {\n transform: translate(var(--x), var(--y));\n }\n\n 45%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale5 {\n 26% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 34%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale5 {\n 26% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 34%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move6 {\n 36% {\n transform: translate(var(--x), var(--y));\n }\n\n 49%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move6 {\n 36% {\n transform: translate(var(--x), var(--y));\n }\n\n 49%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale6 {\n 30% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 38%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale6 {\n 30% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 38%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move7 {\n 40% {\n transform: translate(var(--x), var(--y));\n }\n\n 53%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move7 {\n 40% {\n transform: translate(var(--x), var(--y));\n }\n\n 53%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale7 {\n 34% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 42%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale7 {\n 34% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 42%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes ground {\n 0%, 65% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n\n 75%, 90% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);\n }\n\n 100% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n}\n\n@keyframes ground {\n 0%, 65% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n\n 75%, 90% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);\n }\n\n 100% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n}\n\n@-webkit-keyframes ground-shine {\n 0%, 70% {\n opacity: 0;\n }\n\n 75%, 87% {\n opacity: 0.2;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes ground-shine {\n 0%, 70% {\n opacity: 0;\n }\n\n 75%, 87% {\n opacity: 0.2;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n@-webkit-keyframes mask {\n 0%, 65% {\n opacity: 0;\n }\n\n 66%, 100% {\n opacity: 1;\n }\n}\n\n@keyframes mask {\n 0%, 65% {\n opacity: 0;\n }\n\n 66%, 100% {\n opacity: 1;\n }\n}\n"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"57ee02","snapshot":null,"tags":null,"title":"loader by Ali-Tahmazi99","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":115,"cssLen":670,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

","css":".loader {\n width: 65px;\n height: 65px;\n border: 8px solid #ee9b00a6;\n border-radius: 50px;\n position: relative;\n}\n\n.loader span {\n display: block;\n background: #ee9b00;\n}\n\n.loader .hour ,\n.loader .min {\n width: 6px;\n height: 22px;\n border-radius: 50px;\n position: absolute;\n top: 24.5px;\n left: 21px;\n animation: load9243 1.2s linear infinite;\n transform-origin: top center;\n}\n\n.loader .min {\n height: 17px;\n animation: load9243 4s linear infinite;\n}\n\n.loader .circel {\n width: 10px;\n height: 10px;\n border-radius: 50px;\n position: absolute;\n top: 19px;\n left: 19px;\n}\n\n@keyframes load9243 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"e9bfb8","snapshot":null,"tags":null,"title":"loader by AqFox","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":112,"cssLen":1567,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner {\n position: relative;\n width: 56px;\n height: 56px;\n animation: spinner-3a5251 1.25s infinite linear;\n}\n\n.spinner div {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-left: 3.6px solid transparent;\n border-right: 3.6px solid transparent;\n border-bottom: 10.8px solid #004dff;\n transform-origin: center 10.8px;\n}\n\n.spinner div:before,\n.spinner div:after {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n display: block;\n border-left: 10.8px solid transparent;\n border-right: 10.8px solid transparent;\n border-bottom: 7.2px solid #004dff;\n}\n\n.spinner div:before {\n transform: translate(-10.8px, 7.2px) rotate(35deg);\n}\n\n.spinner div:after {\n transform: translate(-10.8px, 7.2px) rotate(-35deg);\n}\n\n.spinner div:nth-child(1) {\n transform: translate(-50%, -10.8px) rotate(51.42857deg) translate(0, 320%);\n}\n\n.spinner div:nth-child(2) {\n transform: translate(-50%, -10.8px) rotate(102.85714deg) translate(0, 320%);\n}\n\n.spinner div:nth-child(3) {\n transform: translate(-50%, -10.8px) rotate(154.28571deg) translate(0, 320%);\n}\n\n.spinner div:nth-child(4) {\n transform: translate(-50%, -10.8px) rotate(205.71429deg) translate(0, 320%);\n}\n\n.spinner div:nth-child(5) {\n transform: translate(-50%, -10.8px) rotate(257.14286deg) translate(0, 320%);\n}\n\n.spinner div:nth-child(6) {\n transform: translate(-50%, -10.8px) rotate(308.57143deg) translate(0, 320%);\n}\n\n.spinner div:nth-child(7) {\n transform: translate(-50%, -10.8px) rotate(360deg) translate(0, 320%);\n}\n\n@keyframes spinner-3a5251 {\n to {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"f12129","snapshot":null,"tags":null,"title":"loader by SelfMadeSystem","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":316,"cssLen":821,"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: 12em;\n height: 3em;\n position: relative;\n overflow: hidden;\n border-bottom: 8px solid #000;\n filter: url(#goo);\n}\n\n.loader::before {\n content: '';\n width: 22em;\n height: 18em;\n background: #f00;\n position: absolute;\n border-radius: 50%;\n left: -2em;\n bottom: -18em;\n animation: wee1 2s linear infinite;\n}\n\n.loader::after {\n content: '';\n width: 16em;\n height: 12em;\n background: #0ff;\n position: absolute;\n border-radius: 50%;\n left: -4em;\n bottom: -12em;\n animation: wee2 2s linear infinite 0.75s;\n}\n\n@keyframes wee1 {\n 0% {\n transform: translateX(-10em) rotate(0deg);\n }\n\n 100% {\n transform: translateX(7em) rotate(180deg);\n }\n}\n\n@keyframes wee2 {\n 0% {\n transform: translateX(-8em) rotate(0deg);\n }\n\n 100% {\n transform: translateX(8em) rotate(180deg);\n }\n}"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"23f9e4","snapshot":null,"tags":null,"title":"loader by TheAbieza","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":171,"cssLen":660,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

getting files ready...

","css":".container {\n width: fit-content;\n gap: 10px\n}\n\n.folder {\n width: min-content;\n margin: auto;\n animation: float 2s infinite linear;\n}\n\n.folder .top {\n background-color: #FF8F56;\n width: 60px;\n height: 12px;\n border-top-right-radius: 10px;\n}\n\n.folder .bottom {\n background-color: #FFCE63;\n width: 100px;\n height: 70px;\n box-shadow: 5px 5px 0 0 #283149;\n border-top-right-radius: 8px;\n}\n\n.container .title {\n font-size: .9em;\n color: #283149;\n text-align: center;\n margin-top: 15px;\n}\n\n@keyframes float {\n 0% {\n transform: translatey(0px);\n }\n\n 50% {\n transform: translatey(-25px);\n }\n\n 100% {\n transform: translatey(0px);\n }\n}\n\n"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"2e56a4","snapshot":null,"tags":null,"title":"loader by NlghtM4re","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":348,"cssLen":14825,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"#loader {\n width: 80px;\n height: 40px;\n position: absolute;\n top: 50%;\n left: 50%;\n margin: -20px -40px;\n z-index: 1000;\n}\n\n.lightsaber {\n position: absolute;\n width: 4px;\n height: 12px;\n background-color: #666;\n border-radius: 1px;\n bottom: 0;\n}\n\n.lightsaber.ls-left {\n left: 0;\n}\n\n.lightsaber.ls-right {\n right: 0;\n}\n\n.lightsaber:before {\n position: absolute;\n content: ' ';\n display: block;\n width: 2px;\n height: 25px;\n max-height: 1px;\n left: 1px;\n top: 1px;\n background-color: #fff;\n border-radius: 1px;\n -webkit-transform: rotateZ(180deg);\n transform: rotateZ(180deg);\n -webkit-transform-origin: center top;\n -ms-transform-origin: center top;\n transform-origin: center top;\n}\n\n.lightsaber:after {\n position: absolute;\n content: ' ';\n display: block;\n width: 2px;\n height: 2px;\n left: 1px;\n top: 4px;\n background-color: #fff;\n border-radius: 50%;\n}\n\n.ls-particles {\n position: absolute;\n left: 42px;\n top: 10px;\n width: 1px;\n height: 5px;\n background-color: rgb(51, 51, 51, 0);\n -webkit-transform: rotateZ(0deg);\n transform: rotateZ(0deg);\n}\n\n.lightsaber.ls-green:before {\n -webkit-animation: showlightgreen 2s ease-in-out infinite 1s;\n animation: showlightgreen 2s ease-in-out infinite 1s;\n}\n\n.lightsaber.ls-red:before {\n -webkit-animation: showlightred 2s ease-in-out infinite 1s;\n animation: showlightred 2s ease-in-out infinite 1s;\n}\n\n.lightsaber.ls-left {\n -webkit-animation: fightleft 2s ease-in-out infinite 1s;\n animation: fightleft 2s ease-in-out infinite 1s;\n}\n\n.lightsaber.ls-right {\n -webkit-animation: fightright 2s ease-in-out infinite 1s;\n animation: fightright 2s ease-in-out infinite 1s;\n}\n\n.ls-particles.ls-part-1 {\n -webkit-animation: particles1 2s ease-out infinite 1s;\n animation: particles1 2s ease-out infinite 1s;\n}\n\n.ls-particles.ls-part-2 {\n -webkit-animation: particles2 2s ease-out infinite 1s;\n animation: particles2 2s ease-out infinite 1s;\n}\n\n.ls-particles.ls-part-3 {\n -webkit-animation: particles3 2s ease-out infinite 1s;\n animation: particles3 2s ease-out infinite 1s;\n}\n\n.ls-particles.ls-part-4 {\n -webkit-animation: particles4 2s ease-out infinite 1s;\n animation: particles4 2s ease-out infinite 1s;\n}\n\n.ls-particles.ls-part-5 {\n -webkit-animation: particles5 2s ease-out infinite 1s;\n animation: particles5 2s ease-out infinite 1s;\n}\n\n@-webkit-keyframes showlightgreen {\n 0% {\n max-height: 0;\n box-shadow: 0 0 0 0 #87c054;\n }\n\n 5% {\n box-shadow: 0 0 4px 2px #87c054;\n }\n\n 10% {\n max-height: 22px;\n }\n\n 80% {\n max-height: 22px;\n }\n\n 85% {\n box-shadow: 0 0 4px 2px #87c054;\n }\n\n 100% {\n max-height: 0;\n box-shadow: 0 0 0 0 #87c054;\n }\n}\n\n@-webkit-keyframes showlightred {\n 0% {\n max-height: 0;\n box-shadow: 0 0 0 0 #f06363;\n }\n\n 20% {\n box-shadow: 0 0 4px 2px #f06363;\n }\n\n 25% {\n max-height: 22px;\n }\n\n 80% {\n max-height: 22px;\n }\n\n 85% {\n box-shadow: 0 0 4px 2px #f06363;\n }\n\n 100% {\n max-height: 0;\n box-shadow: 0 0 0 0 #f06363;\n }\n}\n\n@-webkit-keyframes fightleft {\n 0% {\n -webkit-transform: rotateZ(0deg);\n transform: rotateZ(0deg);\n left: 0;\n bottom: 0;\n }\n\n 30% {\n -webkit-transform: rotateZ(0deg);\n transform: rotateZ(0deg);\n bottom: 0;\n }\n\n 40% {\n -webkit-transform: rotateZ(45deg);\n transform: rotateZ(45deg);\n left: 0;\n bottom: 2px;\n }\n\n 45% {\n -webkit-transform: rotateZ(65deg);\n transform: rotateZ(65deg);\n left: 0;\n }\n\n 65% {\n -webkit-transform: rotateZ(410deg);\n transform: rotateZ(410deg);\n left: 30px;\n bottom: 10px;\n }\n\n 95% {\n -webkit-transform: rotateZ(410deg);\n transform: rotateZ(410deg);\n left: 0;\n bottom: 0;\n }\n\n 100% {\n -webkit-transform: rotateZ(360deg);\n transform: rotateZ(360deg);\n left: 0;\n bottom: 0;\n }\n}\n\n@-webkit-keyframes fightright {\n 0% {\n -webkit-transform: rotateZ(0deg);\n transform: rotateZ(0deg);\n right: 0;\n bottom: 0;\n }\n\n 30% {\n -webkit-transform: rotateZ(0deg);\n transform: rotateZ(0deg);\n bottom: 0;\n }\n\n 45% {\n -webkit-transform: rotateZ(-45deg);\n transform: rotateZ(-45deg);\n right: 0;\n bottom: 2px;\n }\n\n 50% {\n -webkit-transform: rotateZ(-65deg);\n transform: rotateZ(-65deg);\n right: 0;\n }\n\n 68% {\n -webkit-transform: rotateZ(-410deg);\n transform: rotateZ(-410deg);\n right: 27px;\n bottom: 13px;\n }\n\n 95% {\n -webkit-transform: rotateZ(-410deg);\n transform: rotateZ(-410deg);\n right: 0;\n bottom: 0;\n }\n\n 100% {\n -webkit-transform: rotateZ(-360deg);\n transform: rotateZ(-360deg);\n right: 0;\n bottom: 0;\n }\n}\n\n@-webkit-keyframes particles1 {\n 0% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(35deg) translateY(0px);\n transform: rotateZ(35deg) translateY(0px);\n }\n\n 63% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(35deg) translateY(0px);\n transform: rotateZ(35deg) translateY(0px);\n }\n\n 64% {\n background-color: rgba(51, 51, 51,1);\n -webkit-transform: rotateZ(35deg) translateY(0px);\n transform: rotateZ(35deg) translateY(0px);\n }\n\n 100% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(35deg) translateY(-30px);\n transform: rotateZ(35deg) translateY(-30px);\n }\n}\n\n@-webkit-keyframes particles2 {\n 0% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-65deg) translateY(0px);\n transform: rotateZ(-65deg) translateY(0px);\n }\n\n 63% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-65deg) translateY(0px);\n transform: rotateZ(-65deg) translateY(0px);\n }\n\n 64% {\n background-color: rgba(51, 51, 51,1);\n -webkit-transform: rotateZ(-65deg) translateY(0px);\n transform: rotateZ(-65deg) translateY(0px);\n }\n\n 95% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-65deg) translateY(-40px);\n transform: rotateZ(-65deg) translateY(-40px);\n }\n\n 100% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-65deg) translateY(-40px);\n transform: rotateZ(-65deg) translateY(-40px);\n }\n}\n\n@-webkit-keyframes particles3 {\n 0% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-75deg) translateY(0px);\n transform: rotateZ(-75deg) translateY(0px);\n }\n\n 63% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-75deg) translateY(0px);\n transform: rotateZ(-75deg) translateY(0px);\n }\n\n 64% {\n background-color: rgba(51, 51, 51,1);\n -webkit-transform: rotateZ(-75deg) translateY(0px);\n transform: rotateZ(-75deg) translateY(0px);\n }\n\n 97% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-75deg) translateY(-35px);\n transform: rotateZ(-75deg) translateY(-35px);\n }\n\n 100% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-75deg) translateY(-35px);\n transform: rotateZ(-75deg) translateY(-35px);\n }\n}\n\n@-webkit-keyframes particles4 {\n 0% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-25deg) translateY(0px);\n transform: rotateZ(-25deg) translateY(0px);\n }\n\n 63% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-25deg) translateY(0px);\n transform: rotateZ(-25deg) translateY(0px);\n }\n\n 64% {\n background-color: rgba(51, 51, 51,1);\n -webkit-transform: rotateZ(-25deg) translateY(0px);\n transform: rotateZ(-25deg) translateY(0px);\n }\n\n 97% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-25deg) translateY(-30px);\n transform: rotateZ(-25deg) translateY(-30px);\n }\n\n 100% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-25deg) translateY(-30px);\n transform: rotateZ(-25deg) translateY(-30px);\n }\n}\n\n@-webkit-keyframes particles5 {\n 0% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(65deg) translateY(0px);\n transform: rotateZ(65deg) translateY(0px);\n }\n\n 63% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(65deg) translateY(0px);\n transform: rotateZ(65deg) translateY(0px);\n }\n\n 64% {\n background-color: rgba(51, 51, 51,1);\n -webkit-transform: rotateZ(65deg) translateY(0px);\n transform: rotateZ(65deg) translateY(0px);\n }\n\n 97% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(65deg) translateY(-35px);\n transform: rotateZ(65deg) translateY(-35px);\n }\n\n 100% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(65deg) translateY(-35px);\n transform: rotateZ(65deg) translateY(-35px);\n }\n}\n\n@keyframes showlightgreen {\n 0% {\n max-height: 0;\n box-shadow: 0 0 0 0 #87c054;\n }\n\n 5% {\n box-shadow: 0 0 4px 2px #87c054;\n }\n\n 10% {\n max-height: 22px;\n }\n\n 80% {\n max-height: 22px;\n }\n\n 85% {\n box-shadow: 0 0 4px 2px #87c054;\n }\n\n 100% {\n max-height: 0;\n box-shadow: 0 0 0 0 #87c054;\n }\n}\n\n@keyframes showlightred {\n 0% {\n max-height: 0;\n box-shadow: 0 0 0 0 #f06363;\n }\n\n 20% {\n box-shadow: 0 0 4px 2px #f06363;\n }\n\n 25% {\n max-height: 22px;\n }\n\n 80% {\n max-height: 22px;\n }\n\n 85% {\n box-shadow: 0 0 4px 2px #f06363;\n }\n\n 100% {\n max-height: 0;\n box-shadow: 0 0 0 0 #f06363;\n }\n}\n\n@keyframes fightleft {\n 0% {\n -webkit-transform: rotateZ(0deg);\n transform: rotateZ(0deg);\n left: 0;\n bottom: 0;\n }\n\n 30% {\n -webkit-transform: rotateZ(0deg);\n transform: rotateZ(0deg);\n bottom: 0;\n }\n\n 40% {\n -webkit-transform: rotateZ(45deg);\n transform: rotateZ(45deg);\n left: 0;\n bottom: 2px;\n }\n\n 45% {\n -webkit-transform: rotateZ(65deg);\n transform: rotateZ(65deg);\n left: 0;\n }\n\n 65% {\n -webkit-transform: rotateZ(410deg);\n transform: rotateZ(410deg);\n left: 30px;\n bottom: 10px;\n }\n\n 95% {\n -webkit-transform: rotateZ(410deg);\n transform: rotateZ(410deg);\n left: 0;\n bottom: 0;\n }\n\n 100% {\n -webkit-transform: rotateZ(360deg);\n transform: rotateZ(360deg);\n left: 0;\n bottom: 0;\n }\n}\n\n@keyframes fightright {\n 0% {\n -webkit-transform: rotateZ(0deg);\n transform: rotateZ(0deg);\n right: 0;\n bottom: 0;\n }\n\n 30% {\n -webkit-transform: rotateZ(0deg);\n transform: rotateZ(0deg);\n bottom: 0;\n }\n\n 45% {\n -webkit-transform: rotateZ(-45deg);\n transform: rotateZ(-45deg);\n right: 0;\n bottom: 2px;\n }\n\n 50% {\n -webkit-transform: rotateZ(-65deg);\n transform: rotateZ(-65deg);\n right: 0;\n }\n\n 68% {\n -webkit-transform: rotateZ(-410deg);\n transform: rotateZ(-410deg);\n right: 27px;\n bottom: 13px;\n }\n\n 95% {\n -webkit-transform: rotateZ(-410deg);\n transform: rotateZ(-410deg);\n right: 0;\n bottom: 0;\n }\n\n 100% {\n -webkit-transform: rotateZ(-360deg);\n transform: rotateZ(-360deg);\n right: 0;\n bottom: 0;\n }\n}\n\n@keyframes particles1 {\n 0% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(35deg) translateY(0px);\n transform: rotateZ(35deg) translateY(0px);\n }\n\n 63% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(35deg) translateY(0px);\n transform: rotateZ(35deg) translateY(0px);\n }\n\n 64% {\n background-color: rgba(51, 51, 51,1);\n -webkit-transform: rotateZ(35deg) translateY(0px);\n transform: rotateZ(35deg) translateY(0px);\n }\n\n 100% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(35deg) translateY(-30px);\n transform: rotateZ(35deg) translateY(-30px);\n }\n}\n\n@keyframes particles2 {\n 0% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-65deg) translateY(0px);\n transform: rotateZ(-65deg) translateY(0px);\n }\n\n 63% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-65deg) translateY(0px);\n transform: rotateZ(-65deg) translateY(0px);\n }\n\n 64% {\n background-color: rgba(51, 51, 51,1);\n -webkit-transform: rotateZ(-65deg) translateY(0px);\n transform: rotateZ(-65deg) translateY(0px);\n }\n\n 95% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-65deg) translateY(-40px);\n transform: rotateZ(-65deg) translateY(-40px);\n }\n\n 100% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-65deg) translateY(-40px);\n transform: rotateZ(-65deg) translateY(-40px);\n }\n}\n\n@keyframes particles3 {\n 0% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-75deg) translateY(0px);\n transform: rotateZ(-75deg) translateY(0px);\n }\n\n 63% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-75deg) translateY(0px);\n transform: rotateZ(-75deg) translateY(0px);\n }\n\n 64% {\n background-color: rgba(51, 51, 51,1);\n -webkit-transform: rotateZ(-75deg) translateY(0px);\n transform: rotateZ(-75deg) translateY(0px);\n }\n\n 97% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-75deg) translateY(-35px);\n transform: rotateZ(-75deg) translateY(-35px);\n }\n\n 100% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-75deg) translateY(-35px);\n transform: rotateZ(-75deg) translateY(-35px);\n }\n}\n\n@keyframes particles4 {\n 0% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-25deg) translateY(0px);\n transform: rotateZ(-25deg) translateY(0px);\n }\n\n 63% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-25deg) translateY(0px);\n transform: rotateZ(-25deg) translateY(0px);\n }\n\n 64% {\n background-color: rgba(51, 51, 51,1);\n -webkit-transform: rotateZ(-25deg) translateY(0px);\n transform: rotateZ(-25deg) translateY(0px);\n }\n\n 97% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-25deg) translateY(-30px);\n transform: rotateZ(-25deg) translateY(-30px);\n }\n\n 100% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-25deg) translateY(-30px);\n transform: rotateZ(-25deg) translateY(-30px);\n }\n}\n\n@keyframes particles5 {\n 0% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(65deg) translateY(0px);\n transform: rotateZ(65deg) translateY(0px);\n }\n\n 63% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(65deg) translateY(0px);\n transform: rotateZ(65deg) translateY(0px);\n }\n\n 64% {\n background-color: rgba(51, 51, 51,1);\n -webkit-transform: rotateZ(65deg) translateY(0px);\n transform: rotateZ(65deg) translateY(0px);\n }\n\n 97% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(65deg) translateY(-35px);\n transform: rotateZ(65deg) translateY(-35px);\n }\n\n 100% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(65deg) translateY(-35px);\n transform: rotateZ(65deg) translateY(-35px);\n }\n}"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"ea67ae","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":50,"cssLen":1049,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".loader {\n position: relative;\n overflow: hidden;\n box-shadow: -5px -5px -5px rgba(255, 255, 255, 0.1),\n 10px 10px 10px rgba(0, 0, 0, 0.4),\n inset -5px -5px -5px rgba(255, 255, 255, 0.2),\n inset 10px 10px 10px rgba(0, 0, 0, 0.4);\n height: 100px;\n width: 100px;\n border-radius: 50%;\n}\n\n.loader:before {\n position: absolute;\n content: '';\n z-index: 10;\n opacity: 10;\n top: 25px;\n left: 25px;\n right: 25px;\n bottom: 25px;\n background-color: #010113;\n border-radius: 50%;\n box-shadow: -5px -5px -5px rgba(255, 255, 255, 0.1),\n 10px 10px 10px rgba(0, 0, 0, 0.4),\n inset -5px -5px -5px rgba(255, 255, 255, 0.2),\n inset 10px 10px 10px rgba(0, 0, 0, 0.4);\n}\n\n.loader span {\n position: absolute;\n height: 100%;\n width: 100%;\n filter: blur(20px);\n border-radius: 50%;\n background: linear-gradient(#0e11d4, #0b8f84, #d81587);\n animation: loader_41 0.6s linear infinite;\n}\n\n@keyframes loader_41 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"16f11d","snapshot":null,"tags":null,"title":"loader by adamgiebl","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":808,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n width: 64px;\n height: 64px;\n background: #ff6b6b;\n display: block;\n margin: 20px auto;\n position: relative;\n box-sizing: border-box;\n animation: rotation 1s linear infinite;\n}\n\n.loader::before {\n content: '';\n box-sizing: border-box;\n left: 0;\n top: 0;\n transform: rotate(45deg);\n position: absolute;\n width: 64px;\n height: 64px;\n background: #ff3d3d;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);\n}\n\n.loader::after {\n content: '';\n box-sizing: border-box;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n background: rgb(255, 107, 107);\n transform: translate(-50%, -50%);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);\n}\n\n@keyframes rotation {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"68e9b8","snapshot":null,"tags":null,"title":"loader by adamgiebl","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":502,"cssLen":4444,"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 \n \n

\n","css":".section-center {\n z-index: 10;\n width: 100%;\n margin: 0 auto;\n text-align: center;\n -webkit-transition: all 500ms linear;\n transition: all 500ms linear;\n}\n\n.section-path {\n position: relative;\n width: 238px;\n height: 76px;\n border-radius: 35px;\n margin: 0 auto;\n text-align: center;\n background-color: #3B3B3B;\n box-shadow: inset -2px 20px 10px 0 rgba(0,0,0,.06),\n inset -2px 30px 10px 0 rgba(0,0,0,.04);\n border: 3px groove rgba(225,225,225,0.07);\n overflow: hidden;\n -webkit-transition: all 300ms linear;\n transition: all 300ms linear;\n}\n\n.globe {\n position: relative;\n width: 66px;\n height: 66px;\n overflow: hidden;\n margin-top: 2px;\n margin-left: 2px;\n border-radius: 50%;\n box-shadow: 0 10px 40px rgba(0,0,0,0.65);\n animation: rotateBall 4s ease infinite;\n -webkit-transition: all 300ms linear;\n transition: all 300ms linear;\n}\n\n@keyframes rotateBall {\n 0% {\n transform: translateX(0);\n }\n\n 50% {\n transform: translateX(162px);\n }\n\n 100% {\n transform: translateX(0);\n }\n}\n\n.globe:after {\n position: absolute;\n width: 5px;\n height: 12px;\n background-color: rgba(255, 255, 255, 0.1);\n content: '';\n left: 40px;\n top: 15px;\n border-radius: 50%;\n z-index: 2;\n box-shadow: 0 0 14px 7px rgba(255, 255, 255, 0.1);\n}\n\n.globe:before {\n position: absolute;\n width: 100%;\n height: 100%;\n content: '';\n left: 0;\n top: 0;\n border-radius: 50%;\n z-index: 1;\n box-shadow: inset 0 0 15px #1a252f;\n opacity: 0.4;\n -webkit-transition: all 300ms linear;\n transition: all 300ms linear;\n}\n\n.globe .wrapper {\n position: absolute;\n width: 528px;\n height: 528px;\n top: 0;\n left: -462px;\n animation: moveBall 4s ease infinite;\n}\n\n@keyframes moveBall {\n 0% {\n left: -462px;\n }\n\n 50% {\n left: 0;\n }\n\n 100% {\n left: -462px;\n }\n}\n\n.globe .wrapper span {\n position: absolute;\n width: 33px;\n height: 528px;\n top: 0;\n left: 0;\n background-color: #F2F2F2;\n box-shadow: inset 0 0 25px #E1E1E1;\n}\n\n.globe .wrapper span:nth-child(2) {\n left: 33px;\n background-color: #F2F2F2;\n}\n\n.globe .wrapper span:nth-child(3) {\n left: 66px;\n}\n\n.globe .wrapper span:nth-child(4) {\n left: 99px;\n background-color: #F2F2F2;\n}\n\n.globe .wrapper span:nth-child(5) {\n left: 132px;\n}\n\n.globe .wrapper span:nth-child(6) {\n left: 165px;\n background-color: #F2F2F2;\n}\n\n.globe .wrapper span:nth-child(7) {\n left: 198px;\n}\n\n.globe .wrapper span:nth-child(8) {\n left: 231px;\n background-color: #F2F2F2;\n}\n\n.globe .wrapper span:nth-child(9) {\n left: 264px;\n}\n\n.globe .wrapper span:nth-child(10) {\n left: 297px;\n background-color: #F2F2F2;\n}\n\n.globe .wrapper span:nth-child(11) {\n left: 330px;\n}\n\n.globe .wrapper span:nth-child(12) {\n left: 363px;\n background-color: #F2F2F2;\n}\n\n.globe .wrapper span:nth-child(13) {\n left: 396px;\n}\n\n.globe .wrapper span:nth-child(14) {\n left: 429px;\n background-color: #F2F2F2;\n}\n\n.globe .wrapper span:nth-child(15) {\n left: 462px;\n}\n\n.globe .wrapper span:nth-child(16) {\n left: 495px;\n background-color: #F2F2F2;\n}\n\n#switch,\n #circle {\n cursor: pointer;\n -webkit-transition: all 300ms linear;\n transition: all 300ms linear;\n}\n\n#switch {\n width: 70px;\n height: 8px;\n margin: 0 auto;\n text-align: center;\n border: 2px solid #5C5C5C;\n border-radius: 27px;\n background: #000;\n position: relative;\n display: inline-block;\n margin-top: 40px;\n margin-bottom: 20px;\n}\n\n#circle {\n position: absolute;\n top: -11px;\n left: 5px;\n width: 26px;\n height: 26px;\n border-radius: 50%;\n box-shadow: 0 4px 4px rgba(0,0,0,0.25), 0 0 0 1px rgba(26,53,71,0.07);\n background: #000;\n}\n\n.switched {\n border-color: #000 !important;\n background: #5C5C5C !important;\n}\n\n.switched #circle {\n left: 35px;\n background: #fff;\n}\n\n.section-center p span {\n position: relative;\n padding: 4px 10px;\n margin: 0 5px;\n}\n\n.section-center p span:before {\n position: absolute;\n content: '';\n width: 100%;\n height: 100%;\n border-radius: 4px;\n background-color: #5C5C5C;\n box-shadow: 0 2px 4px rgba(0,0,0,0.25);\n left: 0;\n top: 0;\n z-index: -1;\n -webkit-transition: all 300ms linear;\n transition: all 300ms linear;\n}\n\n.section-center p span:after {\n position: absolute;\n content: '';\n width: calc(100% - 10px);\n height: 2px;\n border-radius: 4px;\n background-color: #fff;\n left: 5px;\n top: 50%;\n z-index: 1;\n -webkit-transition: all 300ms linear;\n transition: all 300ms linear;\n}\n\n.section-center p span:nth-child(2):after {\n opacity: 0;\n}"}]}},"actionData":null,"errors":null}