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

","css":".loader {\n width: 200px;\n height: 10px;\n background: #004643;\n border-radius: 50px;\n overflow: hidden;\n}\n\n.inner_loader {\n width: 60%;\n height: 100%;\n background: #f9bc60;\n border-radius: 50px;\n animation: moveLeftRight 3s ease-in-out infinite;\n}\n\n@keyframes moveLeftRight {\n 0% {\n transform: translateX(calc(-100% + 10px));\n }\n\n 50% {\n transform: translateX(calc(200px - 10px));\n }\n\n 100% {\n transform: translateX(calc(-100% + 10px));\n }\n}"},{"created":"2024-01-22T16:54:15.000Z","isPrivate":0,"projectId":"f53eb9","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":715,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n position: relative;\n border: 24px solid;\n border-color: red transparent red transparent;\n animation: rotate_000 2s linear infinite;\n}\n\n.loader:before,\n .loader:after {\n content: \"\";\n display: block;\n border: 24px solid transparent;\n border-left-color: red;\n position: absolute;\n left: -24px;\n top: -24px;\n animation: prix 1s infinite ease-in;\n transform-origin: 0% 100%;\n}\n\n.loader:before {\n border-color: transparent red transparent transparent;\n transform-origin: 100% 0%;\n animation-delay: 0.5s;\n}\n\n@keyframes rotate_000 {\n 100% {\n transform: rotate(360deg)\n }\n}\n\n@keyframes prix {\n 20% , 80% {\n transform: rotate(0)\n }\n\n 50% {\n transform: rotate(-90deg)\n }\n}\n "},{"created":"2024-01-22T16:54:15.000Z","isPrivate":0,"projectId":"5715b6","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:54:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":898,"cssLen":3627,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n \n

\n","css":".circle {\n position: relative;\n left: -100px;\n width: 0;\n height: 0;\n border: 50px solid #FDD835;\n border-radius: 50%;\n border-right-color: transparent;\n animation: move 5s linear 0s infinite normal forwards;\n}\n\n.circle:before {\n content: \"\";\n position: absolute;\n top: -50px;\n left: -50px;\n width: 0;\n height: 0;\n border: 50px solid #FDD835;\n border-radius: 50%;\n border-right-color: transparent;\n animation: chomp1 .25s ease-in-out 0s infinite normal forwards;\n}\n\n.circle:after {\n content: \"\";\n position: absolute;\n top: -50px;\n left: -50px;\n width: 0;\n height: 0;\n border: 50px solid #FDD835;\n border-radius: 50%;\n border-right-color: transparent;\n animation: chomp2 .25s ease-in-out 0s infinite normal forwards;\n}\n\n.loader {\n position: relative;\n top: 50px;\n width: 300px;\n height: 0px;\n border-top: 10px dotted black;\n animation: loader_4013 5s ease-in-out 0s infinite normal forwards;\n}\n\n.dots {\n position: relative;\n top: 60px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.dot {\n position: relative;\n width: 10px;\n height: 10px;\n margin: 0 10px;\n border-radius: 50%;\n background: #1E88E5;\n animation: dot1 5s linear 0s infinite none normal;\n}\n\n.dot:nth-child(1) {\n animation-delay: 0s\n}\n\n.dot:nth-child(2) {\n animation-delay: 0.25s\n}\n\n.dot:nth-child(3) {\n animation-delay: 0.5s\n}\n\n.dot:nth-child(4) {\n animation-delay: 0.75s\n}\n\n.dot:nth-child(5) {\n animation-delay: 1s\n}\n\n.dot:nth-child(6) {\n animation-delay: 1.25s\n}\n\n.dot:nth-child(7) {\n animation-delay: 1.5s\n}\n\n.dot:nth-child(8) {\n animation-delay: 1.75s\n}\n\n.dot:nth-child(9) {\n animation-delay: 1.9s\n}\n\n.dot:nth-child(10) {\n animation-delay: 2.1s\n}\n\n.dots2 {\n position: relative;\n top: 50px;\n left: 10px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.dot2 {\n position: relative;\n left: -10px;\n width: 10px;\n height: 10px;\n margin: 0 10px;\n border-radius: 50%;\n background: #F44336;\n opacity: 0;\n animation: dot2 5s linear 0s infinite none normal;\n}\n\n.dot2:nth-child(10) {\n animation-delay: 2.5s\n}\n\n.dot2:nth-child(9) {\n animation-delay: 2.75s\n}\n\n.dot2:nth-child(8) {\n animation-delay: 3.0s\n}\n\n.dot2:nth-child(7) {\n animation-delay: 3.25s\n}\n\n.dot2:nth-child(6) {\n animation-delay: 3.5s\n}\n\n.dot2:nth-child(5) {\n animation-delay: 3.75s\n}\n\n.dot2:nth-child(4) {\n animation-delay: 4.0s\n}\n\n.dot2:nth-child(3) {\n animation-delay: 4.25s\n}\n\n.dot2:nth-child(2) {\n animation-delay: 4.5s\n}\n\n.dot2:nth-child(1) {\n animation-delay: 4.6s\n}\n/* #F44336;, #1E88E5, #FDD835; */\n@keyframes chomp1 {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(45deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}\n\n@keyframes chomp2 {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(-45deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}\n\n@keyframes move {\n 0%, 100% {\n left: -100px;\n }\n\n 0%, 48% {\n transform: rotateY(0deg);\n }\n\n 50%, 100% {\n transform: rotateY(180deg);\n }\n\n 50% {\n left: 100%;\n }\n}\n\n@keyframes loader_4013 {\n 0%, 100% {\n border-top: 10px dotted #1E88E5;\n }\n\n 0%, 48% {\n border-top: 10px dotted #1E88E5;\n }\n\n 50%, 100% {\n border-top: 10px dotted #F44336;\n }\n\n 50% {\n border-top: 10px dotted #F44336;\n }\n}\n\n@keyframes dot1 {\n 0%,4% {\n background: #1E88E5;\n opacity: 1;\n }\n\n 5%,94% {\n background: #F44336;\n opacity: 0;\n }\n\n 95%,100% {\n background: #1E88E5;\n opacity: 1;\n }\n}\n\n@keyframes dot2 {\n 0%,4% {\n background: #F44336;\n opacity: 1;\n }\n\n 5%,94% {\n opacity: 0;\n }\n\n 95%,100% {\n background: #F44336;\n opacity: 1;\n }\n}"},{"created":"2024-01-22T16:54:15.000Z","isPrivate":0,"projectId":"22cf45","snapshot":null,"tags":null,"title":"loader by Nawsome","updated":"2024-01-22T16:54:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1502,"cssLen":51,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n","css":".svg_preloader {\n width: 170px;\n height: 170px;\n}"},{"created":"2024-01-22T16:54:15.000Z","isPrivate":0,"projectId":"714730","snapshot":null,"tags":null,"title":"loader by DevPTG","updated":"2024-01-22T16:54:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":127,"cssLen":3348,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"#load {\n position: absolute;\n width: 600px;\n height: 36px;\n left: 50%;\n top: 40%;\n margin-left: -300px;\n overflow: visible;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: default;\n}\n\n#load div {\n position: absolute;\n width: 20px;\n height: 36px;\n opacity: 0;\n font-family: Helvetica, Arial, sans-serif;\n animation: move 2s linear infinite;\n -o-animation: move 2s linear infinite;\n -moz-animation: move 2s linear infinite;\n -webkit-animation: move 2s linear infinite;\n transform: rotate(180deg);\n -o-transform: rotate(180deg);\n -moz-transform: rotate(180deg);\n -webkit-transform: rotate(180deg);\n color: #35C4F0;\n}\n\n#load div:nth-child(2) {\n animation-delay: 0.2s;\n -o-animation-delay: 0.2s;\n -moz-animation-delay: 0.2s;\n -webkit-animation-delay: 0.2s;\n}\n\n#load div:nth-child(3) {\n animation-delay: 0.4s;\n -o-animation-delay: 0.4s;\n -webkit-animation-delay: 0.4s;\n -webkit-animation-delay: 0.4s;\n}\n\n#load div:nth-child(4) {\n animation-delay: 0.6s;\n -o-animation-delay: 0.6s;\n -moz-animation-delay: 0.6s;\n -webkit-animation-delay: 0.6s;\n}\n\n#load div:nth-child(5) {\n animation-delay: 0.8s;\n -o-animation-delay: 0.8s;\n -moz-animation-delay: 0.8s;\n -webkit-animation-delay: 0.8s;\n}\n\n#load div:nth-child(6) {\n animation-delay: 1s;\n -o-animation-delay: 1s;\n -moz-animation-delay: 1s;\n -webkit-animation-delay: 1s;\n}\n\n#load div:nth-child(7) {\n animation-delay: 1.2s;\n -o-animation-delay: 1.2s;\n -moz-animation-delay: 1.2s;\n -webkit-animation-delay: 1.2s;\n}\n\n@keyframes move {\n 0% {\n left: 0;\n opacity: 0;\n }\n\n 35% {\n left: 41%;\n -moz-transform: rotate(0deg);\n -webkit-transform: rotate(0deg);\n -o-transform: rotate(0deg);\n transform: rotate(0deg);\n opacity: 1;\n }\n\n 65% {\n left: 59%;\n -moz-transform: rotate(0deg);\n -webkit-transform: rotate(0deg);\n -o-transform: rotate(0deg);\n transform: rotate(0deg);\n opacity: 1;\n }\n\n 100% {\n left: 100%;\n -moz-transform: rotate(-180deg);\n -webkit-transform: rotate(-180deg);\n -o-transform: rotate(-180deg);\n transform: rotate(-180deg);\n opacity: 0;\n }\n}\n\n@-moz-keyframes move {\n 0% {\n left: 0;\n opacity: 0;\n }\n\n 35% {\n left: 41%;\n -moz-transform: rotate(0deg);\n transform: rotate(0deg);\n opacity: 1;\n }\n\n 65% {\n left: 59%;\n -moz-transform: rotate(0deg);\n transform: rotate(0deg);\n opacity: 1;\n }\n\n 100% {\n left: 100%;\n -moz-transform: rotate(-180deg);\n transform: rotate(-180deg);\n opacity: 0;\n }\n}\n\n@-webkit-keyframes move {\n 0% {\n left: 0;\n opacity: 0;\n }\n\n 35% {\n left: 41%;\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n opacity: 1;\n }\n\n 65% {\n left: 59%;\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n opacity: 1;\n }\n\n 100% {\n left: 100%;\n -webkit-transform: rotate(-180deg);\n transform: rotate(-180deg);\n opacity: 0;\n }\n}\n\n@-o-keyframes move {\n 0% {\n left: 0;\n opacity: 0;\n }\n\n 35% {\n left: 41%;\n -o-transform: rotate(0deg);\n transform: rotate(0deg);\n opacity: 1;\n }\n\n 65% {\n left: 59%;\n -o-transform: rotate(0deg);\n transform: rotate(0deg);\n opacity: 1;\n }\n\n 100% {\n left: 100%;\n -o-transform: rotate(-180deg);\n transform: rotate(-180deg);\n opacity: 0;\n }\n}"},{"created":"2024-01-22T16:54:15.000Z","isPrivate":0,"projectId":"3bd62a","snapshot":null,"tags":null,"title":"loader by ZacharyCrespin2","updated":"2024-01-22T16:54:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":804,"cssLen":3091,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".loader {\n width: 6em;\n height: 6em;\n}\n\n.loader-ring {\n animation: ringA 2s linear infinite;\n}\n\n.loader-ring-a {\n stroke: #9708F4;\n}\n\n.loader-ring-b {\n animation-name: ringB;\n stroke: #5E14E4;\n}\n\n.loader-ring-c {\n animation-name: ringC;\n stroke: #9708F4;\n}\n\n.loader-ring-d {\n animation-name: ringD;\n stroke: #5E14E4;\n}\n\n/* Animations */\n@keyframes ringA {\n from, 4% {\n stroke-dasharray: 0 660;\n stroke-width: 20;\n stroke-dashoffset: -330;\n }\n\n 12% {\n stroke-dasharray: 60 600;\n stroke-width: 30;\n stroke-dashoffset: -335;\n }\n\n 32% {\n stroke-dasharray: 60 600;\n stroke-width: 30;\n stroke-dashoffset: -595;\n }\n\n 40%, 54% {\n stroke-dasharray: 0 660;\n stroke-width: 20;\n stroke-dashoffset: -660;\n }\n\n 62% {\n stroke-dasharray: 60 600;\n stroke-width: 30;\n stroke-dashoffset: -665;\n }\n\n 82% {\n stroke-dasharray: 60 600;\n stroke-width: 30;\n stroke-dashoffset: -925;\n }\n\n 90%, to {\n stroke-dasharray: 0 660;\n stroke-width: 20;\n stroke-dashoffset: -990;\n }\n}\n\n@keyframes ringB {\n from, 12% {\n stroke-dasharray: 0 220;\n stroke-width: 20;\n stroke-dashoffset: -110;\n }\n\n 20% {\n stroke-dasharray: 20 200;\n stroke-width: 30;\n stroke-dashoffset: -115;\n }\n\n 40% {\n stroke-dasharray: 20 200;\n stroke-width: 30;\n stroke-dashoffset: -195;\n }\n\n 48%, 62% {\n stroke-dasharray: 0 220;\n stroke-width: 20;\n stroke-dashoffset: -220;\n }\n\n 70% {\n stroke-dasharray: 20 200;\n stroke-width: 30;\n stroke-dashoffset: -225;\n }\n\n 90% {\n stroke-dasharray: 20 200;\n stroke-width: 30;\n stroke-dashoffset: -305;\n }\n\n 98%, to {\n stroke-dasharray: 0 220;\n stroke-width: 20;\n stroke-dashoffset: -330;\n }\n}\n\n@keyframes ringC {\n from {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: 0;\n }\n\n 8% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -5;\n }\n\n 28% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -175;\n }\n\n 36%, 58% {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: -220;\n }\n\n 66% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -225;\n }\n\n 86% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -395;\n }\n\n 94%, to {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: -440;\n }\n}\n\n@keyframes ringD {\n from, 8% {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: 0;\n }\n\n 16% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -5;\n }\n\n 36% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -175;\n }\n\n 44%, 50% {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: -220;\n }\n\n 58% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -225;\n }\n\n 78% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -395;\n }\n\n 86%, to {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: -440;\n }\n}"},{"created":"2024-01-22T16:54:15.000Z","isPrivate":0,"projectId":"db00fa","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:54:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":584,"cssLen":4822,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n","css":".rocket {\n position: absolute;\n top: 20%;\n width: 80px;\n left: calc(50% - 40px);\n}\n\n.rocket .rocket-body {\n width: 80px;\n left: calc(50% - 50px);\n animation: bounce 0.5s infinite;\n}\n\n.rocket .rocket-body .body {\n background-color: #dadada;\n height: 180px;\n left: calc(50% - 50px);\n border-top-right-radius: 100%;\n border-top-left-radius: 100%;\n border-bottom-left-radius: 50%;\n border-bottom-right-radius: 50%;\n border-top: 5px solid #f5f5f5;\n}\n\n.rocket .rocket-body:before {\n content: '';\n position: absolute;\n left: calc(50% - 24px);\n width: 48px;\n height: 13px;\n background-color: #554842;\n bottom: -13px;\n border-bottom-right-radius: 60%;\n border-bottom-left-radius: 60%;\n}\n\n.rocket .window {\n position: absolute;\n width: 40px;\n height: 40px;\n border-radius: 100%;\n background-color: #a75248;\n left: calc(50% - 25px);\n top: 40px;\n border: 5px solid #b4b2b2;\n}\n\n.rocket .fin {\n position: absolute;\n z-index: -100;\n height: 55px;\n width: 50px;\n background-color: #a75248;\n}\n\n.rocket .fin-left {\n left: -30px;\n top: calc(100% - 55px);\n border-top-left-radius: 80%;\n border-bottom-left-radius: 20%;\n}\n\n.rocket .fin-right {\n right: -30px;\n top: calc(100% - 55px);\n border-top-right-radius: 80%;\n border-bottom-right-radius: 20%;\n}\n\n.rocket .exhaust-flame {\n position: absolute;\n top: 90%;\n width: 28px;\n background: linear-gradient(to bottom, transparent 10%, #f5f5f5 100%);\n height: 150px;\n left: calc(50% - 14px);\n animation: exhaust 0.2s infinite;\n}\n\n.rocket .exhaust-fumes li {\n width: 60px;\n height: 60px;\n background-color: #f5f5f5;\n list-style: none;\n position: absolute;\n border-radius: 100%;\n}\n\n.rocket .exhaust-fumes li:first-child {\n width: 200px;\n height: 200px;\n bottom: -300px;\n animation: fumes 5s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(2) {\n width: 150px;\n height: 150px;\n left: -120px;\n top: 260px;\n animation: fumes 3.2s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(3) {\n width: 120px;\n height: 120px;\n left: -40px;\n top: 330px;\n animation: fumes 3s 1s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(4) {\n width: 100px;\n height: 100px;\n left: -170px;\n animation: fumes 4s 2s infinite;\n top: 380px;\n}\n\n.rocket .exhaust-fumes li:nth-child(5) {\n width: 130px;\n height: 130px;\n left: -120px;\n top: 350px;\n animation: fumes 5s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(6) {\n width: 200px;\n height: 200px;\n left: -60px;\n top: 280px;\n animation: fumes2 10s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(7) {\n width: 100px;\n height: 100px;\n left: -100px;\n top: 320px;\n}\n\n.rocket .exhaust-fumes li:nth-child(8) {\n width: 110px;\n height: 110px;\n left: 70px;\n top: 340px;\n}\n\n.rocket .exhaust-fumes li:nth-child(9) {\n width: 90px;\n height: 90px;\n left: 200px;\n top: 380px;\n animation: fumes 20s infinite;\n}\n\n.star li {\n list-style: none;\n position: absolute;\n}\n\n.star li:before, .star li:after {\n content: '';\n position: absolute;\n background-color: #f5f5f5;\n}\n\n.star li:before {\n width: 10px;\n height: 2px;\n border-radius: 50%;\n}\n\n.star li:after {\n height: 8px;\n width: 2px;\n left: 4px;\n top: -3px;\n}\n\n.star li:first-child {\n top: -30px;\n left: -210px;\n animation: twinkle 0.4s infinite;\n}\n\n.star li:nth-child(2) {\n top: 0;\n left: 60px;\n animation: twinkle 0.5s infinite;\n}\n\n.star li:nth-child(2):before {\n height: 1px;\n width: 5px;\n}\n\n.star li:nth-child(2):after {\n width: 1px;\n height: 5px;\n top: -2px;\n left: 2px;\n}\n\n.star li:nth-child(3) {\n left: 120px;\n top: 220px;\n animation: twinkle 1s infinite;\n}\n\n.star li:nth-child(4) {\n left: -100px;\n top: 200px;\n animation: twinkle 0.5s ease infinite;\n}\n\n.star li:nth-child(5) {\n left: 170px;\n top: 100px;\n animation: twinkle 0.4s ease infinite;\n}\n\n.star li:nth-child(6) {\n top: 87px;\n left: -79px;\n animation: twinkle 0.2s infinite;\n}\n\n.star li:nth-child(6):before {\n height: 1px;\n width: 5px;\n}\n\n.star li:nth-child(6):after {\n width: 1px;\n height: 5px;\n top: -2px;\n left: 2px;\n}\n\n@keyframes fumes {\n 50% {\n transform: scale(1.5);\n background-color: transparent;\n }\n\n 51% {\n transform: scale(0.8);\n }\n\n 100% {\n background-color: #f5f5f5;\n transform: scale(1);\n }\n}\n\n@keyframes bounce {\n 0% {\n transform: translate3d(0px, 0px, 0);\n }\n\n 50% {\n transform: translate3d(0px, -4px, 0);\n }\n\n 100% {\n transform: translate3d(0px, 0px, 0);\n }\n}\n\n@keyframes exhaust {\n 0% {\n background: linear-gradient(to bottom, transparent 10%, #f5f5f5 100%);\n }\n\n 50% {\n background: linear-gradient(to bottom, transparent 8%, #f5f5f5 100%);\n }\n\n 75% {\n background: linear-gradient(to bottom, transparent 12%, #f5f5f5 100%);\n }\n}\n\n@keyframes fumes2 {\n 50% {\n transform: scale(1.1);\n }\n}\n\n@keyframes twinkle {\n 80% {\n transform: scale(1.1);\n opacity: 0.7;\n }\n}\n "},{"created":"2024-01-22T16:54:15.000Z","isPrivate":0,"projectId":"f665e4","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:54:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":486,"cssLen":5529,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\t\t\t\n\t

\n\t\t

\n\t\t\t

\n\t\t\t\t

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

\n\t\t\t\t

\n\t\t\t

\n\t\t

\n\t\t\t

\n\t\t

\n\t

","css":".piggy-wrapper {\n position: relative;\n width: 350px;\n height: 350px;\n display: block;\n margin: 0 auto;\n margin-top: 0px;\n}\n\n.piggy-wrap {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n width: 100%;\n height: 100%;\n transform-origin: bottom center;\n animation: trembling 5s linear infinite;\n}\n\n@keyframes trembling {\n 0% {\n transform: scale(1);\n }\n\n 19% {\n transform: scale(1);\n }\n\n 21% {\n transform: scale(0.99);\n }\n\n 22% {\n transform: scale(1);\n }\n\n 23% {\n transform: scale(0.99);\n }\n\n 24% {\n transform: scale(1);\n }\n\n 25% {\n transform: scale(0.99);\n }\n\n 26% {\n transform: scale(1);\n }\n\n 25% {\n transform: scale(0.99);\n }\n\n 26% {\n transform: scale(1);\n }\n\n 27% {\n transform: scale(0.99);\n }\n\n 28% {\n transform: scale(1);\n }\n\n 29% {\n transform: scale(0.99);\n }\n\n 30% {\n transform: scale(1);\n }\n\n 60% {\n transform: scale(0.95);\n }\n\n 61% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n.piggy {\n position: absolute;\n bottom: 40px;\n left: 50%;\n margin-left: -160px;\n width: 270px;\n height: 200px;\n display: block;\n border-radius: 100px;\n background-color: #d88fa0;\n}\n\n.nose {\n position: absolute;\n top: 80px;\n left: -25px;\n width: 40px;\n height: 60px;\n display: block;\n background-color: #d88fa0;\n z-index: 1;\n border-radius: 4px;\n}\n\n.mouth {\n position: absolute;\n top: 95px;\n left: -15px;\n width: 0;\n height: 0;\n z-index: 8;\n display: block;\n border-bottom: 60px solid #d88fa0;\n border-left: 20px solid transparent;\n border-right: 20px solid transparent;\n border-radius: 4px;\n}\n\n.ear {\n position: absolute;\n top: -35px;\n left: 70px;\n width: 45px;\n height: 40px;\n display: block;\n border-top-right-radius: 60px;\n background-color: #d88fa0;\n z-index: 1;\n}\n\n.piggy:before {\n position: absolute;\n content: '';\n top: -25px;\n left: 55px;\n width: 60px;\n height: 60px;\n display: block;\n border-top-right-radius: 60px;\n background-color: #cb6980;\n z-index: -1;\n}\n\n.tail {\n position: absolute;\n left: 254px;\n top: 125px;\n}\n\n.tail span {\n position: absolute;\n left: 0;\n top: 0;\n width: 20px;\n height: 5px;\n transform: rotate(30deg);\n background-color: #d88fa0;\n}\n\n.tail span:nth-child(2) {\n left: 3px;\n top: -38px;\n width: 50px;\n height: 50px;\n transform: rotate(-20deg);\n background-color: transparent;\n border-radius: 50%;\n border-width: 5px;\n border-style: solid;\n border-color: transparent #d88fa0 #d88fa0 transparent;\n}\n\n.tail span:nth-child(3) {\n left: 22px;\n top: -36px;\n width: 30px;\n height: 30px;\n transform: rotate(-40deg);\n background-color: transparent;\n border-radius: 50%;\n border-width: 5px;\n border-style: solid;\n border-color: #d88fa0 transparent transparent #d88fa0;\n}\n\n.tail span:nth-child(4) {\n left: 7px;\n top: -66px;\n width: 60px;\n height: 60px;\n transform: rotate(-40deg);\n background-color: transparent;\n border-radius: 50%;\n border-width: 5px;\n border-style: solid;\n border-color: transparent transparent #d88fa0 transparent;\n}\n\n.eye {\n position: absolute;\n left: 35px;\n top: 75px;\n width: 30px;\n height: 30px;\n transform: rotate(45deg);\n border-radius: 50%;\n border-width: 4px;\n border-style: solid;\n border-color: #555 transparent transparent #555;\n animation: blink 5s linear infinite;\n}\n\n@keyframes blink {\n 0% {\n border-color: #555 transparent transparent #555;\n }\n\n 19% {\n border-color: #555 transparent transparent #555;\n }\n\n 20% {\n border-color: transparent #555 #555 transparent;\n }\n\n 60% {\n border-color: transparent #555 #555 transparent;\n }\n\n 61% {\n border-color: #555 transparent transparent #555;\n }\n\n 100% {\n border-color: #555 transparent transparent #555;\n }\n}\n\n.hole {\n position: absolute;\n left: 121px;\n top: 0;\n width: 60px;\n height: 5px;\n background-color: #555;\n border-bottom-left-radius: 5px;\n border-bottom-right-radius: 5px;\n}\n\n.coin-wrap {\n position: absolute;\n top: 0;\n left: -8px;\n z-index: 9;\n width: 100%;\n height: 100%;\n opacity: 0;\n transform-origin: bottom center;\n animation: trembling 5s linear infinite, moveCoin 5s linear infinite;\n}\n\n.coin {\n position: absolute;\n top: 110px;\n left: 143px;\n z-index: 9;\n width: 61.5px;\n height: 61.5px;\n border-radius: 50%;\n border: 6px solid #e67e22;\n background-color: #f39c12;\n text-align: center;\n line-height: 68px;\n font-size: 45px;\n font-weight: 500;\n color: rgba(32,32,32,0.5);\n box-shadow: inset 0 0 4px #777;\n}\n\n@keyframes moveCoin {\n 0% {\n opacity: 0;\n top: 0;\n }\n\n 19% {\n opacity: 1;\n top: 0;\n }\n\n 21% {\n top: -7px;\n }\n\n 22% {\n top: -7px;\n }\n\n 23% {\n top: -14px;\n }\n\n 24% {\n top: -14px;\n }\n\n 25% {\n top: -21px;\n }\n\n 26% {\n top: -21px;\n }\n\n 27% {\n top: -28px;\n }\n\n 28% {\n top: -28px;\n }\n\n 29% {\n top: -35px;\n }\n\n 30% {\n top: -35px;\n }\n\n 60% {\n top: -35px;\n }\n\n 66% {\n top: -220px;\n opacity: 1;\n }\n\n 67% {\n top: -220px;\n opacity: 0;\n }\n\n 99% {\n top: 0;\n opacity: 0;\n }\n\n 100% {\n opacity: 0;\n top: 0;\n }\n}\n\n.legs {\n position: absolute;\n bottom: 14px;\n left: 96px;\n width: 40px;\n height: 60px;\n display: block;\n background-color: #cb6980;\n border-radius: 3px;\n z-index: 1;\n}\n\n.legs:after {\n position: absolute;\n content: '';\n bottom: 0;\n left: 0;\n width: 30px;\n height: 12px;\n display: block;\n background-color: #d88fa0;\n border-bottom-left-radius: 3px;\n border-top-right-radius: 3px;\n z-index: 1;\n}\n\n.legs.back {\n left: 206px;\n}"},{"created":"2024-01-22T16:54:15.000Z","isPrivate":0,"projectId":"9c76c9","snapshot":null,"tags":null,"title":"loader by Tsiangana","updated":"2024-01-22T16:54:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":920,"cssLen":3020,"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 width: 200px;\n height: 200px;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: float 2s ease-in-out infinite;\n}\n\n@keyframes float {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-12px);\n }\n}\n\n.loader:before {\n content: \"\";\n width: 10px;\n height: 7px;\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.9);\n position: absolute;\n bottom: -9px;\n animation: shadow046 2s alternate infinite ease;\n}\n@keyframes shadow046 {\n 0% {\n transform: scaleX(1);\n }\n 40% {\n transform: scaleX(15);\n opacity: 0.7;\n }\n}\n\n.circle {\n width: 140px;\n height: 140px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n}\n.loader .p1 {\n height: 20px;\n width: 7px;\n background-color: #ffe71c;\n position: absolute;\n margin-top: -118px;\n margin-left: 3px;\n}\n.loader .p2 {\n height: 20px;\n width: 7px;\n background-color: #ffe71c;\n position: absolute;\n margin-top: 118px;\n margin-left: 3px;\n}\n\n.loader .p3 {\n height: 20px;\n width: 7px;\n background-color: #ffe71c;\n position: absolute;\n transform: rotate(90deg);\n margin-right: -120px;\n}\n.loader .p4 {\n height: 20px;\n width: 7px;\n background-color: #ffe71c;\n position: absolute;\n transform: rotate(90deg);\n margin-right: 119px;\n}\n.loader .p5 {\n height: 25px;\n width: 7px;\n background-color: #ffe71c;\n position: absolute;\n margin-top: -84px;\n margin-right: -89px;\n transform: rotate(45deg);\n}\n.loader .p6 {\n height: 23px;\n width: 7px;\n background-color: #ffe71c;\n position: absolute;\n margin-top: 88px;\n margin-right: 84px;\n transform: rotate(45deg);\n}\n.loader .p7 {\n height: 23px;\n width: 7px;\n background-color: #ffe71c;\n position: absolute;\n margin-top: -86px;\n margin-right: 80px;\n transform: rotate(-45deg);\n}\n.loader .p8 {\n height: 23px;\n width: 7px;\n background-color: #ffe71c;\n position: absolute;\n margin-top: 80px;\n margin-right: -83px;\n transform: rotate(-45deg);\n}\n.circle .traco {\n position: absolute;\n z-index: -99;\n}\n.loader .content {\n width: 100px;\n height: 100px;\n border-radius: 50%;\n border: 4px solid #ffe71c;\n overflow: hidden;\n}\n.content .eyes {\n width: 80px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 18px auto 0px;\n padding: 3.5px 10px;\n}\n.eyes .eye-left {\n width: 22px;\n height: 100%;\n background-color: #ffe71c;\n border-radius: 50%;\n}\n.eyes .eye-right {\n width: 22px;\n height: 100%;\n background-color: #ffe71c;\n border-radius: 50%;\n}\n\n.content .nouse {\n margin: -4px auto;\n height: 5px;\n width: 5px;\n border-radius: 50%;\n background-color: #ffe71c;\n}\n.content .mouth {\n margin: 9px auto 0;\n height: 3px;\n width: 100%;\n background-color: #ffe71c;\n}\n.content .teeth {\n margin: 0 auto;\n height: 37px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 12px;\n}\n.teeth .tooth {\n height: 100%;\n width: 4px;\n background-color: #ffe71c;\n}\n"},{"created":"2024-01-22T16:54:15.000Z","isPrivate":0,"projectId":"a9b5cb","snapshot":null,"tags":null,"title":"loader by mrhyddenn","updated":"2024-01-22T16:54:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":691,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".mover {\n background: rgba(248, 25, 25, 0.979);\n height: 10px;\n width: 80px;\n border-radius: 10px;\n position: relative;\n animation: mover5 2s ease-in-out infinite;\n}\n\n.mover::before,\n.mover::after {\n content: '';\n position: absolute;\n height: 10px;\n border-radius: 10px;\n left: 20px;\n animation: mover5 2s ease-in-out infinite;\n}\n\n.mover::before {\n background: rgb(201, 1, 1);\n top: 20px;\n width: 50px;\n}\n\n.mover::after {\n background: rgb(255, 116, 106);\n top: -20px;\n width: 60px;\n}\n\n@keyframes mover5 {\n 0% {\n transform: translateX(30px) scale(1);\n }\n\n 50% {\n transform: translateX(-30px) scale(1.1);\n }\n\n 100% {\n transform: translateX(30px) scale(1);\n }\n}"},{"created":"2024-01-22T16:54:15.000Z","isPrivate":0,"projectId":"49ce86","snapshot":null,"tags":null,"title":"loader by Ratinax","updated":"2024-01-22T16:54:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":146,"cssLen":1503,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".loader {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: not-allowed;\n scale: 0.7;\n}\n\n.central {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 10em;\n height: 10em;\n border-radius: 50%;\n box-shadow: 0.5em 1em 1em blue,\n -0.5em 0.5em 1em lime,\n 0.5em -0.5em 1em cyan,\n -0.5em -0.5em 1em yellow;\n}\n\n.external-shadow {\n width: 10em;\n height: 10em;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n box-shadow: 0.5em 0.5em 3em blue,\n -0.5em 0.5em 3em lime,\n 0.5em -0.5em 3em cyan,\n -0.5em -0.5em 3em yellow;\n z-index: 999;\n animation: rotate 3s linear infinite;\n background-color: #212121;\n}\n\n.intern {\n position: absolute;\n color: white;\n z-index: 9999;\n}\n\n.intern::before {\n content: \"100%\";\n animation: percent 2s ease-in-out infinite;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(180deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes percent {\n 0% {\n content: '0%';\n }\n\n 25% {\n content: '25%';\n }\n\n 33% {\n content: '33%';\n }\n\n 42% {\n content: '42%';\n }\n\n 51% {\n content: '51%';\n }\n\n 67% {\n content: '67%';\n }\n\n 74% {\n content: '74%';\n }\n\n 75% {\n content: '75%';\n }\n\n 86% {\n content: '86%';\n }\n\n 95% {\n content: '95%';\n }\n\n 98% {\n content: '98%';\n }\n\n 99% {\n content: '99%';\n }\n}"},{"created":"2024-01-22T16:54:15.000Z","isPrivate":0,"projectId":"7bbf2b","snapshot":null,"tags":null,"title":"loader by Zadrus","updated":"2024-01-22T16:54:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":126,"cssLen":650,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loading {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.diamond {\n width: 50px;\n height: 50px;\n background-color: orange;\n clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);\n margin: 5px;\n opacity: 0;\n animation: fade-in-out 1.5s ease-in-out infinite;\n}\n\n.diamond.middle {\n transform: rotateY(180deg);\n}\n\n@keyframes fade-in-out {\n 0%,\n 100% {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n}\n\n.diamond {\n background: linear-gradient(45deg, #ffba00, #ff6c00);\n}\n\n.diamond:nth-child(1) {\n animation-delay: 0s;\n}\n\n.diamond.middle {\n animation-delay: 0.5s;\n}\n\n.diamond:nth-child(3) {\n animation-delay: 1s;\n}\n"}]}},"actionData":null,"errors":null}