{"loaderData":{"0":null,"0-3":{"total":7413,"projects":[{"created":"2024-01-22T16:54:12.000Z","isPrivate":0,"projectId":"83a5c7","snapshot":null,"tags":null,"title":"loader by akshat-patel28","updated":"2024-01-22T16:54:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":71,"cssLen":595,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\nLoading...\n

","css":".loader {\n position: relative;\n overflow: hidden;\n border-right: 3px solid;\n width: 0px;\n animation: typewriter 2s steps(10) infinite alternate , blink 0.5s steps(10) infinite;\n}\n\n.loader-text {\n font-size: 40px;\n font-weight: 700;\n background: linear-gradient(to right,#159957, #155799);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n@keyframes typewriter {\n 0% {\n width: 0px;\n }\n\n 100% {\n width: 240px;\n }\n}\n\n@keyframes blink {\n 0% {\n border-right-color: rgba(255,255,255,.75);\n ;\n }\n\n 100% {\n border-right-color: transparent;\n }\n}"},{"created":"2024-01-22T16:54:12.000Z","isPrivate":0,"projectId":"e38575","snapshot":null,"tags":null,"title":"loader by G4b413l","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":263,"cssLen":1165,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".pinwheel {\n --uib-size: 45px;\n --uib-speed: 0.8s;\n --uib-color: #312f2b;\n --uib-line-weight: 4px;\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}\n\n.pinwheel__line {\n position: absolute;\n top: calc(50% - var(--uib-line-weight) / 2);\n left: 0;\n height: var(--uib-line-weight);\n width: 100%;\n border-radius: calc(var(--uib-line-weight) / 2);\n background-color: var(--uib-color);\n animation: rotate81232 var(--uib-speed) ease-in-out infinite;\n}\n\n.pinwheel__line:nth-child(2) {\n animation-delay: calc(var(--uib-speed) * 0.075);\n opacity: 0.8;\n}\n\n.pinwheel__line:nth-child(3) {\n animation-delay: calc(var(--uib-speed) * 0.15);\n opacity: 0.6;\n}\n\n.pinwheel__line:nth-child(4) {\n animation-delay: calc(var(--uib-speed) * 0.225);\n opacity: 0.4;\n}\n\n.pinwheel__line:nth-child(5) {\n animation-delay: calc(var(--uib-speed) * 0.3);\n opacity: 0.2;\n}\n\n.pinwheel__line:nth-child(6) {\n animation-delay: calc(var(--uib-speed) * 0.375);\n opacity: 0.1;\n}\n\n@keyframes rotate81232 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(180deg);\n }\n}\n"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"3fcdd7","snapshot":null,"tags":null,"title":"loader by vk-uiux","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":138,"cssLen":526,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".card {\n width: 18rem;\n padding: 1rem;\n text-align: center;\n border-radius: .8rem;\n background-color: white;\n}\n\n.card__skeleton {\n background-image: linear-gradient(\n\t\t90deg,\n\t\t#ccc 0px,\n\t\trgb(229 229 229 / 90%) 40px,\n\t\t#ccc 80px\n\t);\n background-size: 300%;\n background-position: 100% 0;\n border-radius: inherit;\n animation: shimmer 1.5s infinite;\n}\n\n.card__title {\n height: 15px;\n margin-bottom: 15px;\n}\n\n.card__description {\n height: 100px;\n}\n\n@keyframes shimmer {\n to {\n background-position: -100% 0;\n }\n}"},{"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}"}]}},"actionData":null,"errors":null}