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

Loading . . .

","css":".eye {\n width: 20px;\n height: 8px;\n background-color: rgba(240,220,220,1);\n border-radius: 0px 0px 20px 20px;\n position: relative;\n left: 10px;\n top: 40px;\n box-shadow: 40px 0px 0px 0px rgba(240,220,220,1);\n}\n\n.head {\n backface-visibility: hidden;\n position: relative;\n margin: -250px auto;\n width: 80px;\n height: 80px;\n background-color: #111;\n border-radius: 50px;\n box-shadow: inset -4px 2px 0px 0px rgba(240,220,220,1);\n animation: headAnim 1.5s infinite alternate;\n animation-timing-function: ease-out;\n}\n\n.body {\n position: relative;\n margin: 90px auto;\n width: 140px;\n height: 120px;\n background-color: #111;\n border-radius: 50px/25px;\n box-shadow: inset -5px 2px 0px 0px rgba(240,220,220,1);\n animation: bodyAnim 1.5s infinite alternate;\n animation-timing-function: ease-out;\n}\n\n@keyframes headAnim {\n 0% {\n top: 0px;\n }\n\n 50% {\n top: 10px;\n }\n\n 100% {\n top: 0px;\n }\n}\n\n@keyframes bodyAnim {\n 0% {\n top: -5px;\n }\n\n 50% {\n top: 10px;\n }\n\n 100% {\n top: -5px;\n }\n}\n\n.circ {\n backface-visibility: hidden;\n margin: 60px auto;\n width: 180px;\n height: 180px;\n border-radius: 0px 0px 50px 50px;\n position: relative;\n z-index: -1;\n left: 0%;\n top: 20%;\n overflow: hidden;\n}\n\n.hands {\n margin-top: 140px;\n width: 120px;\n height: 120px;\n position: absolute;\n background-color: #111;\n border-radius: 20px;\n box-shadow: -1px -4px 0px 0px rgba(240,220,220,1);\n transform: rotate(45deg);\n top: 75%;\n left: 16%;\n z-index: 1;\n animation: bodyAnim 1.5s infinite alternate;\n animation-timing-function: ease-out;\n}\n\n.load {\n position: absolute;\n width: 7ch;\n height: 32px;\n text-align: left;\n line-height: 32px;\n margin: -10px auto;\n font-family: 'Julius Sans One', sans-serif;\n font-size: 28px;\n font-weight: 400;\n color: rgb(155, 152, 152);\n left: 2%;\n top: 5%;\n animation: fontAnim 3.75s infinite;\n animation-timing-function: ease-out;\n word-wrap: break-word;\n display: block;\n overflow: hidden;\n}\n\n@keyframes fontAnim {\n 0% {\n width: 7ch;\n }\n\n 16% {\n width: 8ch;\n }\n\n 32% {\n width: 9ch;\n }\n\n 48% {\n width: 10ch;\n }\n\n 64% {\n width: 11ch;\n }\n\n 80% {\n width: 12ch;\n }\n\n 100% {\n width: 13ch;\n }\n}"},{"created":"2024-01-22T16:54:25.000Z","isPrivate":0,"projectId":"9d2b79","snapshot":null,"tags":null,"title":"loader by Cornerstone-04","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":628,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 50px;\n height: 50px;\n position: relative;\n z-index: 1;\n transform: translateX(-50%);\n}\n\n.loader::before, \n.loader::after {\n content: '';\n position: absolute;\n width: inherit;\n height: inherit;\n border-radius: 50%;\n mix-blend-mode: multiply;\n animation: rotate92523 2s infinite cubic-bezier(0.77, 0, 0.175, 1);\n}\n\n.loader::before {\n background-color: #75e2ff;\n}\n\n.loader::after {\n background-color: #ff8496;\n animation-delay: 1s;\n}\n\n@keyframes rotate92523 {\n 0%, 100% {\n left: 35px;\n }\n\n 25% {\n transform: scale(.3);\n }\n\n 50% {\n left: 0%;\n }\n\n 75% {\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T16:54:25.000Z","isPrivate":0,"projectId":"8cc944","snapshot":null,"tags":null,"title":"loader by Pradeepsaranbishnoi","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3063,"cssLen":12964,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"/* The loader */\n.loader {\n position: absolute;\n top: 50%;\n left: 50%;\n overflow: hidden;\n width: 200px;\n height: 200px;\n margin-top: -100px;\n margin-left: -100px;\n perspective: 1000px;\n transform-style: perserve-3d;\n}\n\n/* The dots */\n.dots {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n perspective: 200px;\n transform-style: perserve-3d;\n animation: dots 10000ms linear infinite;\n}\n\n.dots:nth-child(1) {\n animation-name: dots;\n}\n\n.dots:nth-child(2) {\n animation-name: dots2;\n}\n\n.dots:nth-child(3) {\n animation-name: dots3;\n}\n\n.dots:nth-child(4) {\n animation-name: dots4;\n}\n\n.dots:nth-child(5) {\n animation-name: dots5;\n}\n\n.dots:nth-child(6) {\n animation-name: dots6;\n}\n\n@keyframes dots {\n 0% {\n transform: rotateX(30deg) rotateZ(0deg) translateZ(-50px);\n }\n\n 50% {\n transform: rotateX(60deg) rotateZ(5760deg) translateZ(-100px);\n }\n\n 100% {\n transform: rotateX(30deg) rotateZ(11520deg) translateZ(-50px);\n }\n}\n\n@keyframes dots2 {\n 0% {\n transform: rotateX(30deg) rotateZ(0deg) translateZ(-36px);\n }\n\n 50% {\n transform: rotateX(60deg) rotateZ(2880deg) translateZ(-72px);\n }\n\n 100% {\n transform: rotateX(30deg) rotateZ(5760deg) translateZ(-36px);\n }\n}\n\n@keyframes dots3 {\n 0% {\n transform: rotateX(30deg) rotateZ(0deg) translateZ(-24px);\n }\n\n 50% {\n transform: rotateX(60deg) rotateZ(1440deg) translateZ(-48px);\n }\n\n 100% {\n transform: rotateX(30deg) rotateZ(2880deg) translateZ(-24px);\n }\n}\n\n@keyframes dots4 {\n 0% {\n transform: rotateX(30deg) rotateZ(0deg) translateZ(-14px);\n }\n\n 50% {\n transform: rotateX(60deg) rotateZ(720deg) translateZ(-28px);\n }\n\n 100% {\n transform: rotateX(30deg) rotateZ(1440deg) translateZ(-14px);\n }\n}\n\n@keyframes dots5 {\n 0% {\n transform: rotateX(30deg) rotateZ(0deg) translateZ(-6px);\n }\n\n 50% {\n transform: rotateX(60deg) rotateZ(360deg) translateZ(-12px);\n }\n\n 100% {\n transform: rotateX(30deg) rotateZ(720deg) translateZ(-6px);\n }\n}\n\n@keyframes dots6 {\n 0% {\n transform: rotateX(30deg) rotateZ(0deg) translateZ(0px);\n }\n\n 50% {\n transform: rotateX(60deg) rotateZ(180deg) translateZ(-3px);\n }\n\n 100% {\n transform: rotateX(30deg) rotateZ(360deg) translateZ(0px);\n }\n}\n\n/* The dot */\n.dot {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 10px;\n height: 10px;\n margin-left: -5px;\n margin-top: -5px;\n border-radius: 100px;\n background-color: #1e3f57;\n transform-style: perserve-3d;\n transform: rotateZ(0) translateY(0);\n}\n\n.dots:nth-child(6) .dot {\n background-color: #1e3f57;\n}\n\n.dots:nth-child(1) .dot:nth-child(1) {\n transform: rotateZ(0) translateY(-10px);\n}\n\n.dots:nth-child(1) .dot:nth-child(2) {\n transform: rotateZ(90deg) translateY(-10px) translateZ(-140px);\n}\n\n.dots:nth-child(1) .dot:nth-child(3) {\n transform: rotateZ(180deg) translateY(-10px);\n}\n\n.dots:nth-child(1) .dot:nth-child(4) {\n transform: rotateZ(270deg) translateY(-10px) translateZ(-140px);\n}\n\n.dots:nth-child(5) .dot {\n background-color: #295068;\n}\n\n.dots:nth-child(2) .dot:nth-child(1) {\n transform: rotateZ(0) translateY(-22px);\n}\n\n.dots:nth-child(2) .dot:nth-child(2) {\n transform: rotateZ(45deg) translateY(-22px) translateZ(-120px);\n}\n\n.dots:nth-child(2) .dot:nth-child(3) {\n transform: rotateZ(90deg) translateY(-22px);\n}\n\n.dots:nth-child(2) .dot:nth-child(4) {\n transform: rotateZ(135deg) translateY(-22px) translateZ(-120px);\n}\n\n.dots:nth-child(2) .dot:nth-child(5) {\n transform: rotateZ(180deg) translateY(-22px);\n}\n\n.dots:nth-child(2) .dot:nth-child(6) {\n transform: rotateZ(225deg) translateY(-22px) translateZ(-120px);\n}\n\n.dots:nth-child(2) .dot:nth-child(7) {\n transform: rotateZ(270deg) translateY(-22px);\n}\n\n.dots:nth-child(2) .dot:nth-child(8) {\n transform: rotateZ(315deg) translateY(-22px) translateZ(-120px);\n}\n\n.dots:nth-child(4) .dot {\n background-color: #3b6a83;\n}\n\n.dots:nth-child(3) .dot:nth-child(1) {\n transform: rotateZ(0) translateY(-34px);\n}\n\n.dots:nth-child(3) .dot:nth-child(2) {\n transform: rotateZ(30deg) translateY(-34px) translateZ(-100px);\n}\n\n.dots:nth-child(3) .dot:nth-child(3) {\n transform: rotateZ(60deg) translateY(-34px);\n}\n\n.dots:nth-child(3) .dot:nth-child(4) {\n transform: rotateZ(90deg) translateY(-34px) translateZ(-100px);\n}\n\n.dots:nth-child(3) .dot:nth-child(5) {\n transform: rotateZ(120deg) translateY(-34px);\n}\n\n.dots:nth-child(3) .dot:nth-child(6) {\n transform: rotateZ(150deg) translateY(-34px) translateZ(-100px);\n}\n\n.dots:nth-child(3) .dot:nth-child(7) {\n transform: rotateZ(180deg) translateY(-34px);\n}\n\n.dots:nth-child(3) .dot:nth-child(8) {\n transform: rotateZ(210deg) translateY(-34px) translateZ(-100px);\n}\n\n.dots:nth-child(3) .dot:nth-child(9) {\n transform: rotateZ(240deg) translateY(-34px);\n}\n\n.dots:nth-child(3) .dot:nth-child(10) {\n transform: rotateZ(270deg) translateY(-34px) translateZ(-100px);\n}\n\n.dots:nth-child(3) .dot:nth-child(11) {\n transform: rotateZ(300deg) translateY(-34px);\n}\n\n.dots:nth-child(3) .dot:nth-child(12) {\n transform: rotateZ(330deg) translateY(-34px) translateZ(-100px);\n}\n\n.dots:nth-child(3) .dot {\n background-color: #4d86a0;\n}\n\n.dots:nth-child(4) .dot:nth-child(1) {\n transform: rotateZ(0) translateY(-46px);\n}\n\n.dots:nth-child(4) .dot:nth-child(2) {\n transform: rotateZ(20deg) translateY(-46px) translateZ(-80px);\n}\n\n.dots:nth-child(4) .dot:nth-child(3) {\n transform: rotateZ(40deg) translateY(-46px);\n}\n\n.dots:nth-child(4) .dot:nth-child(4) {\n transform: rotateZ(60deg) translateY(-46px) translateZ(-80px);\n}\n\n.dots:nth-child(4) .dot:nth-child(5) {\n transform: rotateZ(80deg) translateY(-46px);\n}\n\n.dots:nth-child(4) .dot:nth-child(6) {\n transform: rotateZ(100deg) translateY(-46px) translateZ(-80px);\n}\n\n.dots:nth-child(4) .dot:nth-child(7) {\n transform: rotateZ(120deg) translateY(-46px);\n}\n\n.dots:nth-child(4) .dot:nth-child(8) {\n transform: rotateZ(140deg) translateY(-46px) translateZ(-80px);\n}\n\n.dots:nth-child(4) .dot:nth-child(9) {\n transform: rotateZ(160deg) translateY(-46px);\n}\n\n.dots:nth-child(4) .dot:nth-child(10) {\n transform: rotateZ(180deg) translateY(-46px) translateZ(-80px);\n}\n\n.dots:nth-child(4) .dot:nth-child(11) {\n transform: rotateZ(200deg) translateY(-46px);\n}\n\n.dots:nth-child(4) .dot:nth-child(12) {\n transform: rotateZ(220deg) translateY(-46px) translateZ(-80px);\n}\n\n.dots:nth-child(4) .dot:nth-child(13) {\n transform: rotateZ(240deg) translateY(-46px);\n}\n\n.dots:nth-child(4) .dot:nth-child(14) {\n transform: rotateZ(260deg) translateY(-46px) translateZ(-80px);\n}\n\n.dots:nth-child(4) .dot:nth-child(15) {\n transform: rotateZ(280deg) translateY(-46px);\n}\n\n.dots:nth-child(4) .dot:nth-child(16) {\n transform: rotateZ(300deg) translateY(-46px) translateZ(-80px);\n}\n\n.dots:nth-child(4) .dot:nth-child(17) {\n transform: rotateZ(320deg) translateY(-46px);\n}\n\n.dots:nth-child(4) .dot:nth-child(18) {\n transform: rotateZ(340deg) translateY(-46px) translateZ(-80px);\n}\n\n.dots:nth-child(2) .dot {\n background-color: #5ea0ba;\n}\n\n.dots:nth-child(5) .dot:nth-child(1) {\n transform: rotateZ(0) translateY(-58px);\n}\n\n.dots:nth-child(5) .dot:nth-child(2) {\n transform: rotateZ(15deg) translateY(-58px) translateZ(-40px);\n}\n\n.dots:nth-child(5) .dot:nth-child(3) {\n transform: rotateZ(30deg) translateY(-58px);\n}\n\n.dots:nth-child(5) .dot:nth-child(4) {\n transform: rotateZ(45deg) translateY(-58px) translateZ(-40px);\n}\n\n.dots:nth-child(5) .dot:nth-child(5) {\n transform: rotateZ(60deg) translateY(-58px);\n}\n\n.dots:nth-child(5) .dot:nth-child(6) {\n transform: rotateZ(75deg) translateY(-58px) translateZ(-40px);\n}\n\n.dots:nth-child(5) .dot:nth-child(7) {\n transform: rotateZ(90deg) translateY(-58px);\n}\n\n.dots:nth-child(5) .dot:nth-child(8) {\n transform: rotateZ(105deg) translateY(-58px) translateZ(-40px);\n}\n\n.dots:nth-child(5) .dot:nth-child(9) {\n transform: rotateZ(120deg) translateY(-58px);\n}\n\n.dots:nth-child(5) .dot:nth-child(10) {\n transform: rotateZ(135deg) translateY(-58px) translateZ(-40px);\n}\n\n.dots:nth-child(5) .dot:nth-child(11) {\n transform: rotateZ(150deg) translateY(-58px);\n}\n\n.dots:nth-child(5) .dot:nth-child(12) {\n transform: rotateZ(165deg) translateY(-58px) translateZ(-40px);\n}\n\n.dots:nth-child(5) .dot:nth-child(13) {\n transform: rotateZ(180deg) translateY(-58px);\n}\n\n.dots:nth-child(5) .dot:nth-child(14) {\n transform: rotateZ(195deg) translateY(-58px) translateZ(-40px);\n}\n\n.dots:nth-child(5) .dot:nth-child(15) {\n transform: rotateZ(210deg) translateY(-58px);\n}\n\n.dots:nth-child(5) .dot:nth-child(16) {\n transform: rotateZ(225deg) translateY(-58px) translateZ(-40px);\n}\n\n.dots:nth-child(5) .dot:nth-child(17) {\n transform: rotateZ(240deg) translateY(-58px);\n}\n\n.dots:nth-child(5) .dot:nth-child(18) {\n transform: rotateZ(255deg) translateY(-58px) translateZ(-40px);\n}\n\n.dots:nth-child(5) .dot:nth-child(19) {\n transform: rotateZ(270deg) translateY(-58px);\n}\n\n.dots:nth-child(5) .dot:nth-child(20) {\n transform: rotateZ(285deg) translateY(-58px) translateZ(-40px);\n}\n\n.dots:nth-child(5) .dot:nth-child(21) {\n transform: rotateZ(300deg) translateY(-58px);\n}\n\n.dots:nth-child(5) .dot:nth-child(22) {\n transform: rotateZ(315deg) translateY(-58px) translateZ(-40px);\n}\n\n.dots:nth-child(5) .dot:nth-child(23) {\n transform: rotateZ(330deg) translateY(-58px);\n}\n\n.dots:nth-child(5) .dot:nth-child(24) {\n transform: rotateZ(345deg) translateY(-58px) translateZ(-40px);\n}\n\n.dots:nth-child(1) .dot {\n background-color: #6bb1cd;\n}\n\n.dots:nth-child(6) .dot:nth-child(1) {\n transform: rotateZ(0deg) translateY(-70px);\n}\n\n.dots:nth-child(6) .dot:nth-child(2) {\n transform: rotateZ(10deg) translateY(-70px) translateZ(-20px);\n}\n\n.dots:nth-child(6) .dot:nth-child(3) {\n transform: rotateZ(20deg) translateY(-70px);\n}\n\n.dots:nth-child(6) .dot:nth-child(4) {\n transform: rotateZ(30deg) translateY(-70px) translateZ(-20px);\n}\n\n.dots:nth-child(6) .dot:nth-child(5) {\n transform: rotateZ(40deg) translateY(-70px);\n}\n\n.dots:nth-child(6) .dot:nth-child(6) {\n transform: rotateZ(50deg) translateY(-70px) translateZ(-20px);\n}\n\n.dots:nth-child(6) .dot:nth-child(7) {\n transform: rotateZ(60deg) translateY(-70px);\n}\n\n.dots:nth-child(6) .dot:nth-child(8) {\n transform: rotateZ(70deg) translateY(-70px) translateZ(-20px);\n}\n\n.dots:nth-child(6) .dot:nth-child(9) {\n transform: rotateZ(80deg) translateY(-70px);\n}\n\n.dots:nth-child(6) .dot:nth-child(10) {\n transform: rotateZ(90deg) translateY(-70px) translateZ(-20px);\n}\n\n.dots:nth-child(6) .dot:nth-child(11) {\n transform: rotateZ(100deg) translateY(-70px);\n}\n\n.dots:nth-child(6) .dot:nth-child(12) {\n transform: rotateZ(110deg) translateY(-70px) translateZ(-20px);\n}\n\n.dots:nth-child(6) .dot:nth-child(13) {\n transform: rotateZ(120deg) translateY(-70px);\n}\n\n.dots:nth-child(6) .dot:nth-child(14) {\n transform: rotateZ(130deg) translateY(-70px) translateZ(-20px);\n}\n\n.dots:nth-child(6) .dot:nth-child(15) {\n transform: rotateZ(140deg) translateY(-70px);\n}\n\n.dots:nth-child(6) .dot:nth-child(16) {\n transform: rotateZ(150deg) translateY(-70px) translateZ(-20px);\n}\n\n.dots:nth-child(6) .dot:nth-child(17) {\n transform: rotateZ(160deg) translateY(-70px);\n}\n\n.dots:nth-child(6) .dot:nth-child(18) {\n transform: rotateZ(170deg) translateY(-70px) translateZ(-20px);\n}\n\n.dots:nth-child(6) .dot:nth-child(19) {\n transform: rotateZ(180deg) translateY(-70px);\n}\n\n.dots:nth-child(6) .dot:nth-child(20) {\n transform: rotateZ(190deg) translateY(-70px) translateZ(-20px);\n}\n\n.dots:nth-child(6) .dot:nth-child(21) {\n transform: rotateZ(200deg) translateY(-70px);\n}\n\n.dots:nth-child(6) .dot:nth-child(22) {\n transform: rotateZ(210deg) translateY(-70px) translateZ(-20px);\n}\n\n.dots:nth-child(6) .dot:nth-child(23) {\n transform: rotateZ(220deg) translateY(-70px);\n}\n\n.dots:nth-child(6) .dot:nth-child(24) {\n transform: rotateZ(230deg) translateY(-70px) translateZ(-20px);\n}\n\n.dots:nth-child(6) .dot:nth-child(25) {\n transform: rotateZ(240deg) translateY(-70px);\n}\n\n.dots:nth-child(6) .dot:nth-child(26) {\n transform: rotateZ(250deg) translateY(-70px) translateZ(-20px);\n}\n\n.dots:nth-child(6) .dot:nth-child(27) {\n transform: rotateZ(260deg) translateY(-70px);\n}\n\n.dots:nth-child(6) .dot:nth-child(28) {\n transform: rotateZ(270deg) translateY(-70px) translateZ(-20px);\n}\n\n.dots:nth-child(6) .dot:nth-child(29) {\n transform: rotateZ(280deg) translateY(-70px);\n}\n\n.dots:nth-child(6) .dot:nth-child(30) {\n transform: rotateZ(290deg) translateY(-70px) translateZ(-20px);\n}\n\n.dots:nth-child(6) .dot:nth-child(31) {\n transform: rotateZ(300deg) translateY(-70px);\n}\n\n.dots:nth-child(6) .dot:nth-child(32) {\n transform: rotateZ(310deg) translateY(-70px) translateZ(-20px);\n}\n\n.dots:nth-child(6) .dot:nth-child(33) {\n transform: rotateZ(320deg) translateY(-70px);\n}\n\n.dots:nth-child(6) .dot:nth-child(34) {\n transform: rotateZ(330deg) translateY(-70px) translateZ(-20px);\n}\n\n.dots:nth-child(6) .dot:nth-child(35) {\n transform: rotateZ(340deg) translateY(-70px);\n}\n\n.dots:nth-child(6) .dot:nth-child(36) {\n transform: rotateZ(350deg) translateY(-70px) translateZ(-20px);\n}"},{"created":"2024-01-22T16:54:25.000Z","isPrivate":0,"projectId":"4f3f08","snapshot":null,"tags":null,"title":"loader by Bodyhc","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":33,"cssLen":684,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".custom-loader {\n width: 50px;\n height: 50px;\n display: grid;\n border-radius: 50%;\n -webkit-mask: radial-gradient(farthest-side,#0000 40%,#000 41%);\n background: linear-gradient(0deg ,#766DF480 50%,#766DF4FF 0) center/4px 100%,\n linear-gradient(90deg,#766DF440 50%,#766DF4BF 0) center/100% 4px;\n background-repeat: no-repeat;\n animation: s3 1s infinite steps(12);\n}\n\n.custom-loader::before,\n.custom-loader::after {\n content: \"\";\n grid-area: 1/1;\n border-radius: 50%;\n background: inherit;\n opacity: 0.915;\n transform: rotate(30deg);\n}\n\n.custom-loader::after {\n opacity: 0.83;\n transform: rotate(60deg);\n}\n\n@keyframes s3 {\n 100% {\n transform: rotate(1turn)\n }\n}"},{"created":"2024-01-22T16:54:25.000Z","isPrivate":0,"projectId":"b0d071","snapshot":null,"tags":null,"title":"loader by Admin12121","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3321,"cssLen":12329,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

\n \n

\n\n

\n \n

\n","css":"@keyframes stageBackground {\n 0%, 10%, 90%, 100% {\n background-color: #00B6BB;\n }\n\n 25%, 75% {\n background-color: #0094bd;\n }\n}\n\n@keyframes earthRotation {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes sunrise {\n 0%, 10%, 90%, 100% {\n box-shadow: 0 0 0 25px #5ad6bd, 0 0 0 40px #4acead, 0 0 0 60px rgba(74, 206, 173, 0.6), 0 0 0 90px rgba(74, 206, 173, 0.3);\n }\n\n 25%, 75% {\n box-shadow: 0 0 0 0 #5ad6bd, 0 0 0 0 #4acead, 0 0 0 0 rgba(74, 206, 173, 0.6), 0 0 0 0 rgba(74, 206, 173, 0.3);\n }\n}\n\n@keyframes moonOrbit {\n 25% {\n transform: rotate(-60deg);\n }\n\n 50% {\n transform: rotate(-60deg);\n }\n\n 75% {\n transform: rotate(-120deg);\n }\n\n 0%, 100% {\n transform: rotate(-180deg);\n }\n}\n\n@keyframes nightTime {\n 0%, 90% {\n opacity: 0;\n }\n\n 50%, 75% {\n opacity: 1;\n }\n}\n\n@keyframes hotPan {\n 0%, 90% {\n background-color: #74667e;\n }\n\n 50%, 75% {\n background-color: #b2241c;\n }\n}\n\n@keyframes heat {\n 0%, 90% {\n box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.3);\n }\n\n 50%, 75% {\n box-shadow: inset 0 -2px 0 0 white;\n }\n}\n\n@keyframes smoke {\n 0%, 50%, 90%, 100% {\n opacity: 0;\n }\n\n 50%, 75% {\n opacity: 0.7;\n }\n}\n\n@keyframes fire {\n 0%, 90%, 100% {\n opacity: 0;\n }\n\n 50%, 75% {\n opacity: 1;\n }\n}\n\n@keyframes treeShake {\n 0% {\n transform: rotate(0deg);\n }\n\n 25% {\n transform: rotate(-2deg);\n }\n\n 40% {\n transform: rotate(4deg);\n }\n\n 50% {\n transform: rotate(-4deg);\n }\n\n 60% {\n transform: rotate(6deg);\n }\n\n 75% {\n transform: rotate(-6deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}\n\n@keyframes fireParticles {\n 0% {\n height: 30%;\n opacity: 1;\n top: 75%;\n }\n\n 25% {\n height: 25%;\n opacity: 0.8;\n top: 40%;\n }\n\n 50% {\n height: 15%;\n opacity: 0.6;\n top: 20%;\n }\n\n 75% {\n height: 10%;\n opacity: 0.3;\n top: 0;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes fireLines {\n 0%, 25%, 75%, 100% {\n bottom: 0;\n }\n\n 50% {\n bottom: 5%;\n }\n}\n\n.scene {\n display: flex;\n margin: 0 auto 80px auto;\n justify-content: center;\n align-items: flex-end;\n width: 400px;\n height: 300px;\n position: relative;\n}\n\n.forest {\n display: flex;\n width: 75%;\n height: 90%;\n position: relative;\n}\n\n.tree {\n display: block;\n width: 50%;\n position: absolute;\n bottom: 0;\n opacity: 0.4;\n}\n\n.tree .branch {\n width: 80%;\n height: 0;\n margin: 0 auto;\n padding-left: 40%;\n padding-bottom: 50%;\n overflow: hidden;\n}\n\n.tree .branch:before {\n content: \"\";\n display: block;\n width: 0;\n height: 0;\n margin-left: -600px;\n border-left: 600px solid transparent;\n border-right: 600px solid transparent;\n border-bottom: 950px solid #000;\n}\n\n.tree .branch.branch-top {\n transform-origin: 50% 100%;\n animation: treeShake 0.5s linear infinite;\n}\n\n.tree .branch.branch-middle {\n width: 90%;\n padding-left: 45%;\n padding-bottom: 65%;\n margin: 0 auto;\n margin-top: -25%;\n}\n\n.tree .branch.branch-bottom {\n width: 100%;\n padding-left: 50%;\n padding-bottom: 80%;\n margin: 0 auto;\n margin-top: -40%;\n}\n\n.tree1 {\n width: 31%;\n}\n\n.tree1 .branch-top {\n transition-delay: 0.3s;\n}\n\n.tree2 {\n width: 39%;\n left: 9%;\n}\n\n.tree2 .branch-top {\n transition-delay: 0.4s;\n}\n\n.tree3 {\n width: 32%;\n left: 24%;\n}\n\n.tree3 .branch-top {\n transition-delay: 0.5s;\n}\n\n.tree4 {\n width: 37%;\n left: 34%;\n}\n\n.tree4 .branch-top {\n transition-delay: 0.6s;\n}\n\n.tree5 {\n width: 44%;\n left: 44%;\n}\n\n.tree5 .branch-top {\n transition-delay: 0.7s;\n}\n\n.tree6 {\n width: 34%;\n left: 61%;\n}\n\n.tree6 .branch-top {\n transition-delay: 0.2s;\n}\n\n.tree7 {\n width: 24%;\n left: 76%;\n}\n\n.tree7 .branch-top {\n transition-delay: 0.1s;\n}\n\n.tent {\n width: 60%;\n height: 25%;\n position: absolute;\n bottom: -0.5%;\n right: 15%;\n z-index: 1;\n text-align: right;\n}\n\n.roof {\n display: inline-block;\n width: 45%;\n height: 100%;\n margin-right: 10%;\n position: relative;\n /*bottom: 0;\n right: 9%;*/\n z-index: 1;\n border-top: 4px solid #4D4454;\n border-right: 4px solid #4D4454;\n border-left: 4px solid #4D4454;\n border-top-right-radius: 6px;\n transform: skew(30deg);\n box-shadow: inset -3px 3px 0px 0px #F7B563;\n /*background: linear-gradient(\n to bottom, \n rgba(246,212,132,1) 0%,\n rgba(246,212,132,1) 24%,\n rgba(#F0B656,1) 25%,\n rgba(#F0B656,1) 74%,\n rgba(235,151,53,1) 75%,\n rgba(235,151,53,1) 100%\n );*/\n background: #f6d484;\n}\n\n.roof:before {\n content: \"\";\n width: 70%;\n height: 70%;\n position: absolute;\n top: 15%;\n left: 15%;\n z-index: 0;\n border-radius: 10%;\n background-color: #E78C20;\n}\n\n.roof:after {\n content: \"\";\n height: 75%;\n width: 100%;\n position: absolute;\n bottom: 0;\n right: 0;\n z-index: 1;\n background: linear-gradient(to bottom, rgba(231, 140, 32, 0.4) 0%, rgba(231, 140, 32, 0.4) 64%, rgba(231, 140, 32, 0.8) 65%, rgba(231, 140, 32, 0.8) 100%);\n}\n\n.roof-border-left {\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n width: 1%;\n height: 125%;\n position: absolute;\n top: 0;\n left: 35.7%;\n z-index: 1;\n transform-origin: 50% 0%;\n transform: rotate(35deg);\n}\n\n.roof-border-left .roof-border {\n display: block;\n width: 100%;\n border-radius: 2px;\n border: 2px solid #4D4454;\n}\n\n.roof-border-left .roof-border1 {\n height: 40%;\n}\n\n.roof-border-left .roof-border2 {\n height: 10%;\n}\n\n.roof-border-left .roof-border3 {\n height: 40%;\n}\n\n.door {\n width: 55px;\n height: 92px;\n position: absolute;\n bottom: 2%;\n overflow: hidden;\n z-index: 0;\n transform-origin: 0 105%;\n}\n\n.left-door {\n transform: rotate(35deg);\n position: absolute;\n left: 13.5%;\n bottom: -3%;\n z-index: 0;\n}\n\n.left-door .left-door-inner {\n width: 100%;\n height: 100%;\n transform-origin: 0 105%;\n transform: rotate(-35deg);\n position: absolute;\n top: 0;\n overflow: hidden;\n background-color: #EDDDC2;\n}\n\n.left-door .left-door-inner:before {\n content: \"\";\n width: 15%;\n height: 100%;\n position: absolute;\n top: 0;\n right: 0;\n background: repeating-linear-gradient(#D4BC8B, #D4BC8B 4%, #E0D2A8 5%, #E0D2A8 10%);\n}\n\n.left-door .left-door-inner:after {\n content: \"\";\n width: 50%;\n height: 100%;\n position: absolute;\n top: 15%;\n left: 10%;\n transform: rotate(25deg);\n background-color: #fff;\n}\n\n.right-door {\n height: 89px;\n right: 21%;\n transform-origin: 0 105%;\n transform: rotate(-30deg) scaleX(-1);\n position: absolute;\n bottom: -3%;\n z-index: 0;\n}\n\n.right-door .right-door-inner {\n width: 100%;\n height: 100%;\n transform-origin: 0 120%;\n transform: rotate(-30deg);\n position: absolute;\n bottom: 0px;\n overflow: hidden;\n background-color: #EFE7CF;\n}\n\n.right-door .right-door-inner:before {\n content: \"\";\n width: 50%;\n height: 100%;\n position: absolute;\n top: 15%;\n right: -28%;\n z-index: 1;\n transform: rotate(15deg);\n background-color: #524A5A;\n}\n\n.right-door .right-door-inner:after {\n content: \"\";\n width: 50%;\n height: 100%;\n position: absolute;\n top: 15%;\n right: -20%;\n transform: rotate(20deg);\n background-color: #fff;\n}\n\n.floor {\n width: 80%;\n position: absolute;\n right: 10%;\n bottom: 0;\n z-index: 1;\n}\n\n.floor .ground {\n position: absolute;\n border-radius: 2px;\n border: 2px solid #4D4454;\n}\n\n.floor .ground.ground1 {\n width: 65%;\n left: 0;\n}\n\n.floor .ground.ground2 {\n width: 30%;\n right: 0;\n}\n\n.fireplace {\n display: block;\n width: 24%;\n height: 20%;\n position: absolute;\n left: 5%;\n}\n\n.fireplace:before {\n content: \"\";\n display: block;\n width: 8%;\n position: absolute;\n bottom: -4px;\n left: 2%;\n border-radius: 2px;\n border: 2px solid #4D4454;\n background: #4D4454;\n}\n\n.fireplace .support {\n display: block;\n height: 105%;\n width: 2px;\n position: absolute;\n bottom: -5%;\n left: 10%;\n border: 2px solid #4D4454;\n}\n\n.fireplace .support:before {\n content: \"\";\n width: 100%;\n height: 15%;\n position: absolute;\n top: -18%;\n left: -4px;\n border-radius: 2px;\n border: 2px solid #4D4454;\n transform-origin: 100% 100%;\n transform: rotate(45deg);\n}\n\n.fireplace .support:after {\n content: \"\";\n width: 100%;\n height: 15%;\n position: absolute;\n top: -18%;\n left: 0px;\n border-radius: 2px;\n border: 2px solid #4D4454;\n transform-origin: 0 100%;\n transform: rotate(-45deg);\n}\n\n.fireplace .support:nth-child(1) {\n left: 85%;\n}\n\n.fireplace .bar {\n width: 100%;\n height: 2px;\n border-radius: 2px;\n border: 2px solid #4D4454;\n}\n\n.fireplace .hanger {\n display: block;\n width: 2px;\n height: 25%;\n margin-left: -4px;\n position: absolute;\n left: 50%;\n border: 2px solid #4D4454;\n}\n\n.fireplace .pan {\n display: block;\n width: 25%;\n height: 50%;\n border-radius: 50%;\n border: 4px solid #4D4454;\n position: absolute;\n top: 25%;\n left: 35%;\n overflow: hidden;\n animation: heat 5s linear infinite;\n}\n\n.fireplace .pan:before {\n content: \"\";\n display: block;\n height: 53%;\n width: 100%;\n position: absolute;\n bottom: 0;\n z-index: -1;\n border-top: 4px solid #4D4454;\n background-color: #74667e;\n animation: hotPan 5s linear infinite;\n}\n\n.fireplace .smoke {\n display: block;\n width: 20%;\n height: 25%;\n position: absolute;\n top: 25%;\n left: 37%;\n background-color: white;\n filter: blur(5px);\n animation: smoke 5s linear infinite;\n}\n\n.fireplace .fire {\n display: block;\n width: 25%;\n height: 120%;\n position: absolute;\n bottom: 0;\n left: 33%;\n z-index: 1;\n animation: fire 5s linear infinite;\n}\n\n.fireplace .fire:before {\n content: \"\";\n display: block;\n width: 100%;\n height: 2px;\n position: absolute;\n bottom: -4px;\n z-index: 1;\n border-radius: 2px;\n border: 1px solid #efb54a;\n background-color: #efb54a;\n}\n\n.fireplace .fire .line {\n display: block;\n width: 2px;\n height: 100%;\n position: absolute;\n bottom: 0;\n animation: fireLines 1s linear infinite;\n}\n\n.fireplace .fire .line2 {\n left: 50%;\n margin-left: -1px;\n animation-delay: 0.3s;\n}\n\n.fireplace .fire .line3 {\n right: 0;\n animation-delay: 0.5s;\n}\n\n.fireplace .fire .line .particle {\n height: 10%;\n position: absolute;\n top: 100%;\n z-index: 1;\n border-radius: 2px;\n border: 2px solid #efb54a;\n animation: fireParticles 0.5s linear infinite;\n}\n\n.fireplace .fire .line .particle1 {\n animation-delay: 0.1s;\n}\n\n.fireplace .fire .line .particle2 {\n animation-delay: 0.3s;\n}\n\n.fireplace .fire .line .particle3 {\n animation-delay: 0.6s;\n}\n\n.fireplace .fire .line .particle4 {\n animation-delay: 0.9s;\n}\n\n.time-wrapper {\n display: block;\n width: 100%;\n height: 100%;\n position: absolute;\n overflow: hidden;\n}\n\n.time {\n display: block;\n width: 100%;\n height: 200%;\n position: absolute;\n transform-origin: 50% 50%;\n transform: rotate(270deg);\n animation: earthRotation 5s linear infinite;\n}\n\n.time .day {\n display: block;\n width: 20px;\n height: 20px;\n position: absolute;\n top: 20%;\n left: 40%;\n border-radius: 50%;\n box-shadow: 0 0 0 25px #5ad6bd, 0 0 0 40px #4acead, 0 0 0 60px rgba(74, 206, 173, 0.6), 0 0 0 90px rgba(74, 206, 173, 0.3);\n animation: sunrise 5s ease-in-out infinite;\n background-color: #ef9431;\n}\n\n.time .night {\n animation: nightTime 5s ease-in-out infinite;\n}\n\n.time .night .star {\n display: block;\n width: 4px;\n height: 4px;\n position: absolute;\n bottom: 10%;\n border-radius: 50%;\n background-color: #fff;\n}\n\n.time .night .star-big {\n width: 6px;\n height: 6px;\n}\n\n.time .night .star1 {\n right: 23%;\n bottom: 25%;\n}\n\n.time .night .star2 {\n right: 35%;\n bottom: 18%;\n}\n\n.time .night .star3 {\n right: 47%;\n bottom: 25%;\n}\n\n.time .night .star4 {\n right: 22%;\n bottom: 20%;\n}\n\n.time .night .star5 {\n right: 18%;\n bottom: 30%;\n}\n\n.time .night .star6 {\n right: 60%;\n bottom: 20%;\n}\n\n.time .night .star7 {\n right: 70%;\n bottom: 23%;\n}\n\n.time .night .moon {\n display: block;\n width: 25px;\n height: 25px;\n position: absolute;\n bottom: 22%;\n right: 33%;\n border-radius: 50%;\n transform: rotate(-60deg);\n box-shadow: 9px 9px 3px 0 white;\n filter: blur(1px);\n animation: moonOrbit 5s ease-in-out infinite;\n}\n\n.time .night .moon:before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n position: absolute;\n bottom: -9px;\n left: 9px;\n border-radius: 50%;\n box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.05), 0 0 0 15px rgba(255, 255, 255, 0.05), 0 0 0 25px rgba(255, 255, 255, 0.05), 0 0 0 35px rgba(255, 255, 255, 0.05);\n background-color: rgba(255, 255, 255, 0.2);\n}"},{"created":"2024-01-22T16:54:25.000Z","isPrivate":0,"projectId":"6f8f74","snapshot":null,"tags":null,"title":"loader by elijahgummer","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":57,"cssLen":310,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".container {\n width: 50px;\n height: 50px;\n}\n\n.container .boxes {\n width: 50px;\n height: 50px;\n fill: none;\n stroke-width: 50px;\n stroke: #ffa500;\n stroke-dasharray: 50;\n stroke-dashoffset: 50%;\n animation: animate 2s linear infinite;\n}\n\n@keyframes animate {\n to {\n stroke-dashoffset: 250%;\n }\n}\n"},{"created":"2024-01-22T16:54:25.000Z","isPrivate":0,"projectId":"81bac4","snapshot":null,"tags":null,"title":"loader by AqFox","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":474,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".spinner {\n width: 56px;\n height: 56px;\n display: grid;\n border: 4px solid #0000;\n border-radius: 50%;\n border-right-color: #004dff;\n animation: spinner-a4dj62 1s infinite linear;\n}\n\n.spinner::before,\n.spinner::after {\n content: \"\";\n grid-area: 1/1;\n margin: 2px;\n border: inherit;\n border-radius: 50%;\n animation: spinner-a4dj62 2s infinite;\n}\n\n.spinner::after {\n margin: 8px;\n animation-duration: 3s;\n}\n\n@keyframes spinner-a4dj62 {\n 100% {\n transform: rotate(1turn);\n }\n}"},{"created":"2024-01-22T16:54:25.000Z","isPrivate":0,"projectId":"af7d0d","snapshot":null,"tags":null,"title":"loader by AqFox","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":239,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".spinner {\n width: 56px;\n height: 56px;\n border: 11px #004dff double;\n border-left-style: solid;\n border-radius: 50%;\n animation: spinner-aib1d7 0.75s infinite linear;\n}\n\n@keyframes spinner-aib1d7 {\n to {\n transform: rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:25.000Z","isPrivate":0,"projectId":"83cf21","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":82,"cssLen":475,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":"#col {\n width: 50%;\n margin: 0 auto;\n}\n\n.loader {\n content: ' ';\n border: 5px solid #333;\n border-radius: 30px;\n height: 30px;\n left: 50%;\n margin: -15px 0 0 -15px;\n opacity: 0;\n position: absolute;\n top: 50%;\n width: 30px;\n animation: pulsate 1s ease-out;\n animation-iteration-count: infinite;\n}\n\n@keyframes pulsate {\n 0% {\n transform: scale(.1);\n opacity: 0.0;\n }\n\n 50% {\n opacity: 1;\n }\n\n 100% {\n transform: scale(1.2);\n opacity: 0;\n }\n}"},{"created":"2024-01-22T16:54:25.000Z","isPrivate":0,"projectId":"dfdafd","snapshot":null,"tags":null,"title":"loader by PriyanshuGupta28","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":736,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n","css":".spinner {\n width: 56px;\n height: 56px;\n display: grid;\n border-radius: 50%;\n -webkit-mask: radial-gradient(farthest-side,#0000 40%,#6121d1 41%);\n background: linear-gradient(0deg ,rgba(97,33,209,0.5) 50%,rgba(97,33,209,1) 0) center/4.5px 100%,\n linear-gradient(90deg,rgba(97,33,209,0.25) 50%,rgba(97,33,209,0.75) 0) center/100% 4.5px;\n background-repeat: no-repeat;\n animation: spinner-d3o0rx 1s infinite steps(12);\n}\n\n.spinner::before,\n.spinner::after {\n content: \"\";\n grid-area: 1/1;\n border-radius: 50%;\n background: inherit;\n opacity: 0.915;\n transform: rotate(30deg);\n}\n\n.spinner::after {\n opacity: 0.83;\n transform: rotate(60deg);\n}\n\n@keyframes spinner-d3o0rx {\n 100% {\n transform: rotate(1turn);\n }\n}"},{"created":"2024-01-22T16:54:25.000Z","isPrivate":0,"projectId":"350c6f","snapshot":null,"tags":null,"title":"loader by LightAndy1","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":470,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n width: 15px;\n aspect-ratio: 1;\n border-radius: 50%;\n background-color: #dfdfdf;\n box-shadow: #dfdfdf -20px 0px, #dfdfdf 20px 0px;\n animation: l18 1.2s infinite;\n}\n\n@keyframes l18 {\n 25% {\n box-shadow: #dfdfdf -15px -15px, #dfdfdf 15px 15px;\n }\n\n 50% {\n box-shadow: #dfdfdf 0px -20px, #dfdfdf 0px 20px;\n }\n\n 75% {\n box-shadow: #dfdfdf 15px -15px, #dfdfdf -15px 15px;\n }\n\n 100% {\n box-shadow: #dfdfdf 20px 0px, #dfdfdf -20px 0px;\n }\n}\n"},{"created":"2024-01-22T16:54:25.000Z","isPrivate":0,"projectId":"c5f849","snapshot":null,"tags":null,"title":"loader by Tsiangana","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":396,"cssLen":1021,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

\n","css":".light {\n position: absolute;\n left: 22px;\n fill: rgba(37, 37, 37, 0.774);\n}\n\n.loader {\n width: 80px;\n height: 40px;\n border: 2px solid #22f49e;\n border-right-color: transparent;\n padding: 3px;\n background: repeating-linear-gradient(90deg, #22f49e 0 10px, #0000 0 15px)\n left/0% 100% no-repeat content-box content-box;\n position: relative;\n animation: p5 2s infinite steps(6);\n}\n.loader::before {\n content: \"\";\n position: absolute;\n top: -2px;\n bottom: -2px;\n left: 100%;\n width: 10px;\n background: linear-gradient(\n #0000 calc(50% - 7px),\n #22f49e 0 calc(50% - 5px),\n #0000 0 calc(50% + 5px),\n #22f49e 0 calc(50% + 7px),\n #0000 0\n )\n left / 100% 100%,\n linear-gradient(#22f49e calc(50% - 5px), #0000 0 calc(50% + 5px), #22f49e 0)\n left / 2px 100%,\n linear-gradient(#0000 calc(50% - 5px), #22f49e 0 calc(50% + 5px), #0000 0)\n right/2px 100%;\n background-repeat: no-repeat;\n}\n@keyframes p5 {\n 100% {\n background-size: 120% 100%;\n }\n}\n"}]}},"actionData":null,"errors":null}