{"loaderData":{"0":null,"0-3":{"total":7313,"projects":[{"created":"2024-01-22T16:52:38.000Z","isPrivate":0,"projectId":"eff084","snapshot":"https://s1.qingting.work/runjs/ec13ab5169b8.png?x-oss-process=style/webp-w-500","tags":null,"title":"loader by Nawsome","updated":"2024-01-22T18:53:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":644,"cssLen":5495,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t

\n\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t

\n\t

","css":".wheel-and-hamster {\n --dur: 1s;\n position: relative;\n width: 12em;\n height: 12em;\n font-size: 14px;\n}\n\n.wheel,\n.hamster,\n.hamster div,\n.spoke {\n position: absolute;\n}\n\n.wheel,\n.spoke {\n border-radius: 50%;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.wheel {\n background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%);\n z-index: 2;\n}\n\n.hamster {\n animation: hamster var(--dur) ease-in-out infinite;\n top: 50%;\n left: calc(50% - 3.5em);\n width: 7em;\n height: 3.75em;\n transform: rotate(4deg) translate(-0.8em,1.85em);\n transform-origin: 50% 0;\n z-index: 1;\n}\n\n.hamster__head {\n animation: hamsterHead var(--dur) ease-in-out infinite;\n background: hsl(30,90%,55%);\n border-radius: 70% 30% 0 100% / 40% 25% 25% 60%;\n box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset,\n\t\t0.75em -1.55em 0 hsl(30,90%,90%) inset;\n top: 0;\n left: -2em;\n width: 2.75em;\n height: 2.5em;\n transform-origin: 100% 50%;\n}\n\n.hamster__ear {\n animation: hamsterEar var(--dur) ease-in-out infinite;\n background: hsl(0,90%,85%);\n border-radius: 50%;\n box-shadow: -0.25em 0 hsl(30,90%,55%) inset;\n top: -0.25em;\n right: -0.25em;\n width: 0.75em;\n height: 0.75em;\n transform-origin: 50% 75%;\n}\n\n.hamster__eye {\n animation: hamsterEye var(--dur) linear infinite;\n background-color: hsl(0,0%,0%);\n border-radius: 50%;\n top: 0.375em;\n left: 1.25em;\n width: 0.5em;\n height: 0.5em;\n}\n\n.hamster__nose {\n background: hsl(0,90%,75%);\n border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%;\n top: 0.75em;\n left: 0;\n width: 0.2em;\n height: 0.25em;\n}\n\n.hamster__body {\n animation: hamsterBody var(--dur) ease-in-out infinite;\n background: hsl(30,90%,90%);\n border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%;\n box-shadow: 0.1em 0.75em 0 hsl(30,90%,55%) inset,\n\t\t0.15em -0.5em 0 hsl(30,90%,80%) inset;\n top: 0.25em;\n left: 2em;\n width: 4.5em;\n height: 3em;\n transform-origin: 17% 50%;\n transform-style: preserve-3d;\n}\n\n.hamster__limb--fr,\n.hamster__limb--fl {\n clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%);\n top: 2em;\n left: 0.5em;\n width: 1em;\n height: 1.5em;\n transform-origin: 50% 0;\n}\n\n.hamster__limb--fr {\n animation: hamsterFRLimb var(--dur) linear infinite;\n background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%);\n transform: rotate(15deg) translateZ(-1px);\n}\n\n.hamster__limb--fl {\n animation: hamsterFLLimb var(--dur) linear infinite;\n background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%);\n transform: rotate(15deg);\n}\n\n.hamster__limb--br,\n.hamster__limb--bl {\n border-radius: 0.75em 0.75em 0 0;\n clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);\n top: 1em;\n left: 2.8em;\n width: 1.5em;\n height: 2.5em;\n transform-origin: 50% 30%;\n}\n\n.hamster__limb--br {\n animation: hamsterBRLimb var(--dur) linear infinite;\n background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%);\n transform: rotate(-25deg) translateZ(-1px);\n}\n\n.hamster__limb--bl {\n animation: hamsterBLLimb var(--dur) linear infinite;\n background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%);\n transform: rotate(-25deg);\n}\n\n.hamster__tail {\n animation: hamsterTail var(--dur) linear infinite;\n background: hsl(0,90%,85%);\n border-radius: 0.25em 50% 50% 0.25em;\n box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset;\n top: 1.5em;\n right: -0.5em;\n width: 1em;\n height: 0.5em;\n transform: rotate(30deg) translateZ(-1px);\n transform-origin: 0.25em 0.25em;\n}\n\n.spoke {\n animation: spoke var(--dur) linear infinite;\n background: radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%),\n\t\tlinear-gradient(hsla(0,0%,55%,0) 46.9%,hsl(0,0%,65%) 47% 52.9%,hsla(0,0%,65%,0) 53%) 50% 50% / 99% 99% no-repeat;\n}\n\n/* Animations */\n@keyframes hamster {\n from, to {\n transform: rotate(4deg) translate(-0.8em,1.85em);\n }\n\n 50% {\n transform: rotate(0) translate(-0.8em,1.85em);\n }\n}\n\n@keyframes hamsterHead {\n from, 25%, 50%, 75%, to {\n transform: rotate(0);\n }\n\n 12.5%, 37.5%, 62.5%, 87.5% {\n transform: rotate(8deg);\n }\n}\n\n@keyframes hamsterEye {\n from, 90%, to {\n transform: scaleY(1);\n }\n\n 95% {\n transform: scaleY(0);\n }\n}\n\n@keyframes hamsterEar {\n from, 25%, 50%, 75%, to {\n transform: rotate(0);\n }\n\n 12.5%, 37.5%, 62.5%, 87.5% {\n transform: rotate(12deg);\n }\n}\n\n@keyframes hamsterBody {\n from, 25%, 50%, 75%, to {\n transform: rotate(0);\n }\n\n 12.5%, 37.5%, 62.5%, 87.5% {\n transform: rotate(-2deg);\n }\n}\n\n@keyframes hamsterFRLimb {\n from, 25%, 50%, 75%, to {\n transform: rotate(50deg) translateZ(-1px);\n }\n\n 12.5%, 37.5%, 62.5%, 87.5% {\n transform: rotate(-30deg) translateZ(-1px);\n }\n}\n\n@keyframes hamsterFLLimb {\n from, 25%, 50%, 75%, to {\n transform: rotate(-30deg);\n }\n\n 12.5%, 37.5%, 62.5%, 87.5% {\n transform: rotate(50deg);\n }\n}\n\n@keyframes hamsterBRLimb {\n from, 25%, 50%, 75%, to {\n transform: rotate(-60deg) translateZ(-1px);\n }\n\n 12.5%, 37.5%, 62.5%, 87.5% {\n transform: rotate(20deg) translateZ(-1px);\n }\n}\n\n@keyframes hamsterBLLimb {\n from, 25%, 50%, 75%, to {\n transform: rotate(20deg);\n }\n\n 12.5%, 37.5%, 62.5%, 87.5% {\n transform: rotate(-60deg);\n }\n}\n\n@keyframes hamsterTail {\n from, 25%, 50%, 75%, to {\n transform: rotate(30deg) translateZ(-1px);\n }\n\n 12.5%, 37.5%, 62.5%, 87.5% {\n transform: rotate(10deg) translateZ(-1px);\n }\n}\n\n@keyframes spoke {\n from {\n transform: rotate(0);\n }\n\n to {\n transform: rotate(-1turn);\n }\n}"},{"created":"2024-01-22T16:52:38.000Z","isPrivate":0,"projectId":"b1bf30","snapshot":null,"tags":null,"title":"loader by Nawsome","updated":"2024-01-22T16:52:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5356,"cssLen":2752,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n
\n \n
\n \n
\n \n
\n \n
\n \n

","css":".loader {\n --background: linear-gradient(135deg, #23C4F8, #275EFE);\n --shadow: rgba(39, 94, 254, 0.28);\n --text: #6C7486;\n --page: rgba(255, 255, 255, 0.36);\n --page-fold: rgba(255, 255, 255, 0.52);\n --duration: 3s;\n width: 200px;\n height: 140px;\n position: relative;\n}\n\n.loader:before, .loader:after {\n --r: -6deg;\n content: \"\";\n position: absolute;\n bottom: 8px;\n width: 120px;\n top: 80%;\n box-shadow: 0 16px 12px var(--shadow);\n transform: rotate(var(--r));\n}\n\n.loader:before {\n left: 4px;\n}\n\n.loader:after {\n --r: 6deg;\n right: 4px;\n}\n\n.loader div {\n width: 100%;\n height: 100%;\n border-radius: 13px;\n position: relative;\n z-index: 1;\n perspective: 600px;\n box-shadow: 0 4px 6px var(--shadow);\n background-image: var(--background);\n}\n\n.loader div ul {\n margin: 0;\n padding: 0;\n list-style: none;\n position: relative;\n}\n\n.loader div ul li {\n --r: 180deg;\n --o: 0;\n --c: var(--page);\n position: absolute;\n top: 10px;\n left: 10px;\n transform-origin: 100% 50%;\n color: var(--c);\n opacity: var(--o);\n transform: rotateY(var(--r));\n -webkit-animation: var(--duration) ease infinite;\n animation: var(--duration) ease infinite;\n}\n\n.loader div ul li:nth-child(2) {\n --c: var(--page-fold);\n -webkit-animation-name: page-2;\n animation-name: page-2;\n}\n\n.loader div ul li:nth-child(3) {\n --c: var(--page-fold);\n -webkit-animation-name: page-3;\n animation-name: page-3;\n}\n\n.loader div ul li:nth-child(4) {\n --c: var(--page-fold);\n -webkit-animation-name: page-4;\n animation-name: page-4;\n}\n\n.loader div ul li:nth-child(5) {\n --c: var(--page-fold);\n -webkit-animation-name: page-5;\n animation-name: page-5;\n}\n\n.loader div ul li svg {\n width: 90px;\n height: 120px;\n display: block;\n}\n\n.loader div ul li:first-child {\n --r: 0deg;\n --o: 1;\n}\n\n.loader div ul li:last-child {\n --o: 1;\n}\n\n.loader span {\n display: block;\n left: 0;\n right: 0;\n top: 100%;\n margin-top: 20px;\n text-align: center;\n color: var(--text);\n}\n\n@keyframes page-2 {\n 0% {\n transform: rotateY(180deg);\n opacity: 0;\n }\n\n 20% {\n opacity: 1;\n }\n\n 35%, 100% {\n opacity: 0;\n }\n\n 50%, 100% {\n transform: rotateY(0deg);\n }\n}\n\n@keyframes page-3 {\n 15% {\n transform: rotateY(180deg);\n opacity: 0;\n }\n\n 35% {\n opacity: 1;\n }\n\n 50%, 100% {\n opacity: 0;\n }\n\n 65%, 100% {\n transform: rotateY(0deg);\n }\n}\n\n@keyframes page-4 {\n 30% {\n transform: rotateY(180deg);\n opacity: 0;\n }\n\n 50% {\n opacity: 1;\n }\n\n 65%, 100% {\n opacity: 0;\n }\n\n 80%, 100% {\n transform: rotateY(0deg);\n }\n}\n\n@keyframes page-5 {\n 45% {\n transform: rotateY(180deg);\n opacity: 0;\n }\n\n 65% {\n opacity: 1;\n }\n\n 80%, 100% {\n opacity: 0;\n }\n\n 95%, 100% {\n transform: rotateY(0deg);\n }\n}\n"},{"created":"2024-01-22T16:52:38.000Z","isPrivate":0,"projectId":"74b4cb","snapshot":null,"tags":null,"title":"loader by Nawsome","updated":"2024-01-22T16:52:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":780,"cssLen":3076,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".pl {\n width: 6em;\n height: 6em;\n}\n\n.pl__ring {\n animation: ringA 2s linear infinite;\n}\n\n.pl__ring--a {\n stroke: #f42f25;\n}\n\n.pl__ring--b {\n animation-name: ringB;\n stroke: #f49725;\n}\n\n.pl__ring--c {\n animation-name: ringC;\n stroke: #255ff4;\n}\n\n.pl__ring--d {\n animation-name: ringD;\n stroke: #f42582;\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:52:38.000Z","isPrivate":0,"projectId":"dc4ae2","snapshot":"https://s1.qingting.work/runjs/a45a1d6b02f9.png?x-oss-process=style/webp-w-500","tags":null,"title":"loader by alexruix","updated":"2024-01-22T18:53:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1098,"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 width: 120px;\n height: 90px;\n margin: 0 auto;\n}\n\n.loader:before {\n content: \"\";\n position: absolute;\n bottom: 30px;\n left: 50px;\n height: 30px;\n width: 30px;\n border-radius: 50%;\n background: #2a9d8f;\n animation: loading-bounce 0.5s ease-in-out infinite alternate;\n}\n\n.loader:after {\n content: \"\";\n position: absolute;\n right: 0;\n top: 0;\n height: 7px;\n width: 45px;\n border-radius: 4px;\n box-shadow: 0 5px 0 #f2f2f2, -35px 50px 0 #f2f2f2, -70px 95px 0 #f2f2f2;\n animation: loading-step 1s ease-in-out infinite;\n}\n\n@keyframes loading-bounce {\n 0% {\n transform: scale(1, 0.7);\n }\n\n 40% {\n transform: scale(0.8, 1.2);\n }\n\n 60% {\n transform: scale(1, 1);\n }\n\n 100% {\n bottom: 140px;\n }\n}\n\n@keyframes loading-step {\n 0% {\n box-shadow: 0 10px 0 rgba(0, 0, 0, 0),\n 0 10px 0 #f2f2f2,\n -35px 50px 0 #f2f2f2,\n -70px 90px 0 #f2f2f2;\n }\n\n 100% {\n box-shadow: 0 10px 0 #f2f2f2,\n -35px 50px 0 #f2f2f2,\n -70px 90px 0 #f2f2f2,\n -70px 90px 0 rgba(0, 0, 0, 0);\n }\n}"},{"created":"2024-01-22T16:52:38.000Z","isPrivate":0,"projectId":"7dd15f","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:52:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":502,"cssLen":4514,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

","css":".section-center {\n position: absolute;\n top: 50%;\n left: 0;\n z-index: 10;\n transform: translateY(-50%);\n width: 100%;\n margin: 0 auto;\n text-align: center;\n -webkit-transition: all 500ms linear;\n transition: all 500ms linear;\n}\n\n.section-path {\n position: relative;\n width: 238px;\n height: 76px;\n border-radius: 35px;\n margin: 0 auto;\n text-align: center;\n background-color: #e6e6e6;\n box-shadow: inset -2px 20px 10px 0 rgba(0,0,0,.06),\n\t\tinset -2px 30px 10px 0 rgba(0,0,0,.04);\n border: 3px groove rgba(225,225,225,0.07);\n overflow: hidden;\n -webkit-transition: all 300ms linear;\n transition: all 300ms linear;\n}\n\n.globe {\n position: relative;\n width: 66px;\n height: 66px;\n overflow: hidden;\n margin-top: 2px;\n margin-left: 2px;\n border-radius: 50%;\n box-shadow: 0 10px 40px rgba(0,0,0,0.65);\n animation: rotateBall 4s ease infinite;\n -webkit-transition: all 300ms linear;\n transition: all 300ms linear;\n}\n\n@keyframes rotateBall {\n 0% {\n transform: translateX(0);\n }\n\n 50% {\n transform: translateX(162px);\n }\n\n 100% {\n transform: translateX(0);\n }\n}\n\n.globe:after {\n position: absolute;\n width: 5px;\n height: 12px;\n background-color: rgba(255, 255, 255, 0.1);\n content: '';\n left: 40px;\n top: 15px;\n border-radius: 50%;\n z-index: 2;\n box-shadow: 0 0 14px 7px rgba(255, 255, 255, 0.1);\n}\n\n.globe:before {\n position: absolute;\n width: 100%;\n height: 100%;\n content: '';\n left: 0;\n top: 0;\n border-radius: 50%;\n z-index: 1;\n box-shadow: inset 0 0 15px #1a252f;\n opacity: 0.4;\n -webkit-transition: all 300ms linear;\n transition: all 300ms linear;\n}\n\n.globe .wrapper {\n position: absolute;\n width: 528px;\n height: 528px;\n top: 0;\n left: -462px;\n animation: moveBall 4s ease infinite;\n}\n\n@keyframes moveBall {\n 0% {\n left: -462px;\n }\n\n 50% {\n left: 0;\n }\n\n 100% {\n left: -462px;\n }\n}\n\n.globe .wrapper span {\n position: absolute;\n width: 33px;\n height: 528px;\n top: 0;\n left: 0;\n background-color: #5c477d;\n box-shadow: inset 0 0 25px #5c487c;\n}\n\n.globe .wrapper span:nth-child(2) {\n left: 33px;\n background-color: #503e6d;\n}\n\n.globe .wrapper span:nth-child(3) {\n left: 66px;\n}\n\n.globe .wrapper span:nth-child(4) {\n left: 99px;\n background-color: #503e6d;\n}\n\n.globe .wrapper span:nth-child(5) {\n left: 132px;\n}\n\n.globe .wrapper span:nth-child(6) {\n left: 165px;\n background-color: #503e6d;\n}\n\n.globe .wrapper span:nth-child(7) {\n left: 198px;\n}\n\n.globe .wrapper span:nth-child(8) {\n left: 231px;\n background-color: #503e6d;\n}\n\n.globe .wrapper span:nth-child(9) {\n left: 264px;\n}\n\n.globe .wrapper span:nth-child(10) {\n left: 297px;\n background-color: #503e6d;\n}\n\n.globe .wrapper span:nth-child(11) {\n left: 330px;\n}\n\n.globe .wrapper span:nth-child(12) {\n left: 363px;\n background-color: #503e6d;\n}\n\n.globe .wrapper span:nth-child(13) {\n left: 396px;\n}\n\n.globe .wrapper span:nth-child(14) {\n left: 429px;\n background-color: #503e6d;\n}\n\n.globe .wrapper span:nth-child(15) {\n left: 462px;\n}\n\n.globe .wrapper span:nth-child(16) {\n left: 495px;\n background-color: #503e6d;\n}\n\n#switch,\n#circle {\n cursor: pointer;\n -webkit-transition: all 300ms linear;\n transition: all 300ms linear;\n}\n\n#switch {\n width: 70px;\n height: 8px;\n margin: 0 auto;\n text-align: center;\n border: 2px solid #8167a9;\n border-radius: 27px;\n background: #000;\n position: relative;\n display: inline-block;\n margin-top: 40px;\n margin-bottom: 20px;\n}\n\n#circle {\n position: absolute;\n top: -11px;\n left: 5px;\n width: 26px;\n height: 26px;\n border-radius: 50%;\n box-shadow: 0 4px 4px rgba(0,0,0,0.25), 0 0 0 1px rgba(26,53,71,0.07);\n background: #000;\n}\n\n.switched {\n border-color: #000 !important;\n background: #8167a9 !important;\n}\n\n.switched #circle {\n left: 35px;\n background: #fff;\n}\n\n.section-center p span {\n position: relative;\n padding: 4px 10px;\n margin: 0 5px;\n}\n\n.section-center p span:before {\n position: absolute;\n content: '';\n width: 100%;\n height: 100%;\n border-radius: 4px;\n background-color: #8167a9;\n box-shadow: 0 2px 4px rgba(0,0,0,0.25);\n left: 0;\n top: 0;\n z-index: -1;\n -webkit-transition: all 300ms linear;\n transition: all 300ms linear;\n}\n\n.section-center p span:after {\n position: absolute;\n content: '';\n width: calc(100% - 10px);\n height: 2px;\n border-radius: 4px;\n background-color: #fff;\n left: 5px;\n top: 50%;\n z-index: 1;\n -webkit-transition: all 300ms linear;\n transition: all 300ms linear;\n}\n\n.section-center p span:nth-child(2):after {\n opacity: 0;\n}"},{"created":"2024-01-22T16:52:38.000Z","isPrivate":0,"projectId":"47a4bf","snapshot":null,"tags":null,"title":"loader by alexruix","updated":"2024-01-22T16:52:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":111,"cssLen":1726,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n loading\n \n

\n","css":".loader {\n width: 80px;\n height: 50px;\n position: relative;\n}\n\n.loader-text {\n position: absolute;\n top: 0;\n padding: 0;\n margin: 0;\n color: #C8B6FF;\n animation: text_713 3.5s ease both infinite;\n font-size: .8rem;\n letter-spacing: 1px;\n}\n\n.load {\n background-color: #9A79FF;\n border-radius: 50px;\n display: block;\n height: 16px;\n width: 16px;\n bottom: 0;\n position: absolute;\n transform: translateX(64px);\n animation: loading_713 3.5s ease both infinite;\n}\n\n.load::before {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n background-color: #D1C2FF;\n border-radius: inherit;\n animation: loading2_713 3.5s ease both infinite;\n}\n\n@keyframes text_713 {\n 0% {\n letter-spacing: 1px;\n transform: translateX(0px);\n }\n\n 40% {\n letter-spacing: 2px;\n transform: translateX(26px);\n }\n\n 80% {\n letter-spacing: 1px;\n transform: translateX(32px);\n }\n\n 90% {\n letter-spacing: 2px;\n transform: translateX(0px);\n }\n\n 100% {\n letter-spacing: 1px;\n transform: translateX(0px);\n }\n}\n\n@keyframes loading_713 {\n 0% {\n width: 16px;\n transform: translateX(0px);\n }\n\n 40% {\n width: 100%;\n transform: translateX(0px);\n }\n\n 80% {\n width: 16px;\n transform: translateX(64px);\n }\n\n 90% {\n width: 100%;\n transform: translateX(0px);\n }\n\n 100% {\n width: 16px;\n transform: translateX(0px);\n }\n}\n\n@keyframes loading2_713 {\n 0% {\n transform: translateX(0px);\n width: 16px;\n }\n\n 40% {\n transform: translateX(0%);\n width: 80%;\n }\n\n 80% {\n width: 100%;\n transform: translateX(0px);\n }\n\n 90% {\n width: 80%;\n transform: translateX(15px);\n }\n\n 100% {\n transform: translateX(0px);\n width: 16px;\n }\n}\n \n \n\n"},{"created":"2024-01-22T16:52:38.000Z","isPrivate":0,"projectId":"9e0d0e","snapshot":null,"tags":null,"title":"loader by gustavofusco","updated":"2024-01-22T16:52:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1991,"cssLen":2729,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".pencil {\n display: block;\n width: 10em;\n height: 10em;\n}\n\n.pencil__body1,\n.pencil__body2,\n.pencil__body3,\n.pencil__eraser,\n.pencil__eraser-skew,\n.pencil__point,\n.pencil__rotate,\n.pencil__stroke {\n animation-duration: 3s;\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n}\n\n.pencil__body1,\n.pencil__body2,\n.pencil__body3 {\n transform: rotate(-90deg);\n}\n\n.pencil__body1 {\n animation-name: pencilBody1;\n}\n\n.pencil__body2 {\n animation-name: pencilBody2;\n}\n\n.pencil__body3 {\n animation-name: pencilBody3;\n}\n\n.pencil__eraser {\n animation-name: pencilEraser;\n transform: rotate(-90deg) translate(49px,0);\n}\n\n.pencil__eraser-skew {\n animation-name: pencilEraserSkew;\n animation-timing-function: ease-in-out;\n}\n\n.pencil__point {\n animation-name: pencilPoint;\n transform: rotate(-90deg) translate(49px,-30px);\n}\n\n.pencil__rotate {\n animation-name: pencilRotate;\n}\n\n.pencil__stroke {\n animation-name: pencilStroke;\n transform: translate(100px,100px) rotate(-113deg);\n}\n\n/* Animations */\n@keyframes pencilBody1 {\n from,\n\tto {\n stroke-dashoffset: 351.86;\n transform: rotate(-90deg);\n }\n\n 50% {\n stroke-dashoffset: 150.8;\n /* 3/8 of diameter */\n transform: rotate(-225deg);\n }\n}\n\n@keyframes pencilBody2 {\n from,\n\tto {\n stroke-dashoffset: 406.84;\n transform: rotate(-90deg);\n }\n\n 50% {\n stroke-dashoffset: 174.36;\n transform: rotate(-225deg);\n }\n}\n\n@keyframes pencilBody3 {\n from,\n\tto {\n stroke-dashoffset: 296.88;\n transform: rotate(-90deg);\n }\n\n 50% {\n stroke-dashoffset: 127.23;\n transform: rotate(-225deg);\n }\n}\n\n@keyframes pencilEraser {\n from,\n\tto {\n transform: rotate(-45deg) translate(49px,0);\n }\n\n 50% {\n transform: rotate(0deg) translate(49px,0);\n }\n}\n\n@keyframes pencilEraserSkew {\n from,\n\t32.5%,\n\t67.5%,\n\tto {\n transform: skewX(0);\n }\n\n 35%,\n\t65% {\n transform: skewX(-4deg);\n }\n\n 37.5%, \n\t62.5% {\n transform: skewX(8deg);\n }\n\n 40%,\n\t45%,\n\t50%,\n\t55%,\n\t60% {\n transform: skewX(-15deg);\n }\n\n 42.5%,\n\t47.5%,\n\t52.5%,\n\t57.5% {\n transform: skewX(15deg);\n }\n}\n\n@keyframes pencilPoint {\n from,\n\tto {\n transform: rotate(-90deg) translate(49px,-30px);\n }\n\n 50% {\n transform: rotate(-225deg) translate(49px,-30px);\n }\n}\n\n@keyframes pencilRotate {\n from {\n transform: translate(100px,100px) rotate(0);\n }\n\n to {\n transform: translate(100px,100px) rotate(720deg);\n }\n}\n\n@keyframes pencilStroke {\n from {\n stroke-dashoffset: 439.82;\n transform: translate(100px,100px) rotate(-113deg);\n }\n\n 50% {\n stroke-dashoffset: 164.93;\n transform: translate(100px,100px) rotate(-113deg);\n }\n\n 75%,\n\tto {\n stroke-dashoffset: 439.82;\n transform: translate(100px,100px) rotate(112deg);\n }\n}"},{"created":"2024-01-22T16:52:38.000Z","isPrivate":0,"projectId":"38bd4b","snapshot":null,"tags":null,"title":"loader by AqFox","updated":"2024-01-22T16:52:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":100,"cssLen":1081,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner {\n width: 44px;\n height: 44px;\n animation: spinner-y0fdc1 2s infinite ease;\n transform-style: preserve-3d;\n}\n\n.spinner > div {\n background-color: rgba(0,77,255,0.2);\n height: 100%;\n position: absolute;\n width: 100%;\n border: 2px solid #004dff;\n}\n\n.spinner div:nth-of-type(1) {\n transform: translateZ(-22px) rotateY(180deg);\n}\n\n.spinner div:nth-of-type(2) {\n transform: rotateY(-270deg) translateX(50%);\n transform-origin: top right;\n}\n\n.spinner div:nth-of-type(3) {\n transform: rotateY(270deg) translateX(-50%);\n transform-origin: center left;\n}\n\n.spinner div:nth-of-type(4) {\n transform: rotateX(90deg) translateY(-50%);\n transform-origin: top center;\n}\n\n.spinner div:nth-of-type(5) {\n transform: rotateX(-90deg) translateY(50%);\n transform-origin: bottom center;\n}\n\n.spinner div:nth-of-type(6) {\n transform: translateZ(22px);\n}\n\n@keyframes spinner-y0fdc1 {\n 0% {\n transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);\n }\n\n 50% {\n transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);\n }\n\n 100% {\n transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);\n }\n}"},{"created":"2024-01-22T16:52:38.000Z","isPrivate":0,"projectId":"900ce0","snapshot":null,"tags":null,"title":"loader by satyamchaudharydev","updated":"2024-01-22T16:52:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":998,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".spinner {\n --size: 30px;\n --first-block-clr: #005bba;\n --second-block-clr: #fed500;\n --clr: #111;\n width: 100px;\n height: 100px;\n position: relative;\n}\n\n.spinner::after,.spinner::before {\n box-sizing: border-box;\n position: absolute;\n content: \"\";\n width: var(--size);\n height: var(--size);\n top: 50%;\n animation: up 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;\n left: 50%;\n background: var(--first-block-clr);\n}\n\n.spinner::after {\n background: var(--second-block-clr);\n top: calc(50% - var(--size));\n left: calc(50% - var(--size));\n animation: down 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;\n}\n\n@keyframes down {\n 0%, 100% {\n transform: none;\n }\n\n 25% {\n transform: translateX(100%);\n }\n\n 50% {\n transform: translateX(100%) translateY(100%);\n }\n\n 75% {\n transform: translateY(100%);\n }\n}\n\n@keyframes up {\n 0%, 100% {\n transform: none;\n }\n\n 25% {\n transform: translateX(-100%);\n }\n\n 50% {\n transform: translateX(-100%) translateY(-100%);\n }\n\n 75% {\n transform: translateY(-100%);\n }\n}\n"},{"created":"2024-01-22T16:52:38.000Z","isPrivate":0,"projectId":"1b4131","snapshot":null,"tags":null,"title":"loader by sahilxkhadka","updated":"2024-01-22T16:52:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":374,"cssLen":918,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.bottom-5 {\n bottom: 1.25rem\n}\n\n.right-0 {\n right: 0px\n}\n\n.mb-1 {\n margin-bottom: 0.25rem\n}\n\n.flex {\n display: flex\n}\n\n.h-12 {\n height: 3rem\n}\n\n.h-4 {\n height: 1rem\n}\n\n.h-5 {\n height: 1.25rem\n}\n\n.w-12 {\n width: 3rem\n}\n\n.w-3\\/5 {\n width: 60%\n}\n\n.w-4 {\n width: 1rem\n}\n\n.w-64 {\n width: 16rem\n}\n\n.w-\\[90\\%\\] {\n width: 90%\n}\n\n.flex-1 {\n flex: 1 1 0%\n}\n\n@keyframes pulse {\n 50% {\n opacity: .5\n }\n}\n\n.animate-pulse {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite\n}\n\n.gap-2 {\n gap: 0.5rem\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.bg-slate-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(148 163 184 / var(--tw-bg-opacity))\n}\n\n.p-4 {\n padding: 1rem\n}\n\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}"},{"created":"2024-01-22T16:52:38.000Z","isPrivate":0,"projectId":"8620f5","snapshot":null,"tags":null,"title":"loader by Nawsome","updated":"2024-01-22T16:52:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":881,"cssLen":2767,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n","css":"@keyframes clockwise {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes counter-clockwise {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(-360deg);\n }\n}\n\n.gearbox {\n background: #111;\n height: 150px;\n width: 200px;\n position: relative;\n border: none;\n overflow: hidden;\n border-radius: 6px;\n box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1);\n}\n\n.gearbox .overlay {\n border-radius: 6px;\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 10;\n box-shadow: inset 0px 0px 20px black;\n transition: background 0.2s;\n}\n\n.gearbox .overlay {\n background: transparent;\n}\n\n.gear {\n position: absolute;\n height: 60px;\n width: 60px;\n box-shadow: 0px -1px 0px 0px #888888, 0px 1px 0px 0px black;\n border-radius: 30px;\n}\n\n.gear.large {\n height: 120px;\n width: 120px;\n border-radius: 60px;\n}\n\n.gear.large:after {\n height: 96px;\n width: 96px;\n border-radius: 48px;\n margin-left: -48px;\n margin-top: -48px;\n}\n\n.gear.one {\n top: 12px;\n left: 10px;\n}\n\n.gear.two {\n top: 61px;\n left: 60px;\n}\n\n.gear.three {\n top: 110px;\n left: 10px;\n}\n\n.gear.four {\n top: 13px;\n left: 128px;\n}\n\n.gear:after {\n content: \"\";\n position: absolute;\n height: 36px;\n width: 36px;\n border-radius: 36px;\n background: #111;\n top: 50%;\n left: 50%;\n margin-left: -18px;\n margin-top: -18px;\n z-index: 3;\n box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0, 0, 0, 0.1), inset 0px 2px 0px 0px #090909, inset 0px -1px 0px 0px #888888;\n}\n\n.gear-inner {\n position: relative;\n height: 100%;\n width: 100%;\n background: #555;\n border-radius: 30px;\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.large .gear-inner {\n border-radius: 60px;\n}\n\n.gear.one .gear-inner {\n animation: counter-clockwise 3s infinite linear;\n}\n\n.gear.two .gear-inner {\n animation: clockwise 3s infinite linear;\n}\n\n.gear.three .gear-inner {\n animation: counter-clockwise 3s infinite linear;\n}\n\n.gear.four .gear-inner {\n animation: counter-clockwise 6s infinite linear;\n}\n\n.gear-inner .bar {\n background: #555;\n height: 16px;\n width: 76px;\n position: absolute;\n left: 50%;\n margin-left: -38px;\n top: 50%;\n margin-top: -8px;\n border-radius: 2px;\n border-left: 1px solid rgba(255, 255, 255, 0.1);\n border-right: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.large .gear-inner .bar {\n margin-left: -68px;\n width: 136px;\n}\n\n.gear-inner .bar:nth-child(2) {\n transform: rotate(60deg);\n}\n\n.gear-inner .bar:nth-child(3) {\n transform: rotate(120deg);\n}\n\n.gear-inner .bar:nth-child(4) {\n transform: rotate(90deg);\n}\n\n.gear-inner .bar:nth-child(5) {\n transform: rotate(30deg);\n}\n\n.gear-inner .bar:nth-child(6) {\n transform: rotate(150deg);\n}"},{"created":"2024-01-22T16:52:38.000Z","isPrivate":0,"projectId":"ea688b","snapshot":null,"tags":null,"title":"loader by Pradeepsaranbishnoi","updated":"2024-01-22T16:52:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":169,"cssLen":2730,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t

\t\t\n\t

","css":".🤚 {\n --skin-color: #E4C560;\n --tap-speed: 0.6s;\n --tap-stagger: 0.1s;\n position: relative;\n width: 80px;\n height: 60px;\n margin-left: 80px;\n}\n\n.🤚:before {\n content: '';\n display: block;\n width: 180%;\n height: 75%;\n position: absolute;\n top: 70%;\n right: 20%;\n background-color: black;\n border-radius: 40px 10px;\n filter: blur(10px);\n opacity: 0.3;\n}\n\n.🌴 {\n display: block;\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n background-color: var(--skin-color);\n border-radius: 10px 40px;\n}\n\n.👍 {\n position: absolute;\n width: 120%;\n height: 38px;\n background-color: var(--skin-color);\n bottom: -18%;\n right: 1%;\n transform-origin: calc(100% - 20px) 20px;\n transform: rotate(-20deg);\n border-radius: 30px 20px 20px 10px;\n border-bottom: 2px solid rgba(0, 0, 0, 0.1);\n border-left: 2px solid rgba(0, 0, 0, 0.1);\n}\n\n.👍:after {\n width: 20%;\n height: 60%;\n content: '';\n background-color: rgba(255, 255, 255, 0.3);\n position: absolute;\n bottom: -8%;\n left: 5px;\n border-radius: 60% 10% 10% 30%;\n border-right: 2px solid rgba(0, 0, 0, 0.05);\n}\n\n.👉 {\n position: absolute;\n width: 80%;\n height: 35px;\n background-color: var(--skin-color);\n bottom: 32%;\n right: 64%;\n transform-origin: 100% 20px;\n animation-duration: calc(var(--tap-speed) * 2);\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n transform: rotate(10deg);\n}\n\n.👉:before {\n content: '';\n position: absolute;\n width: 140%;\n height: 30px;\n background-color: var(--skin-color);\n bottom: 8%;\n right: 65%;\n transform-origin: calc(100% - 20px) 20px;\n transform: rotate(-60deg);\n border-radius: 20px;\n}\n\n.👉:nth-child(1) {\n animation-delay: 0;\n filter: brightness(70%);\n animation-name: tap-upper-1;\n}\n\n.👉:nth-child(2) {\n animation-delay: var(--tap-stagger);\n filter: brightness(80%);\n animation-name: tap-upper-2;\n}\n\n.👉:nth-child(3) {\n animation-delay: calc(var(--tap-stagger) * 2);\n filter: brightness(90%);\n animation-name: tap-upper-3;\n}\n\n.👉:nth-child(4) {\n animation-delay: calc(var(--tap-stagger) * 3);\n filter: brightness(100%);\n animation-name: tap-upper-4;\n}\n\n@keyframes tap-upper-1 {\n 0%, 50%, 100% {\n transform: rotate(10deg) scale(0.4);\n }\n\n 40% {\n transform: rotate(50deg) scale(0.4);\n }\n}\n\n@keyframes tap-upper-2 {\n 0%, 50%, 100% {\n transform: rotate(10deg) scale(0.6);\n }\n\n 40% {\n transform: rotate(50deg) scale(0.6);\n }\n}\n\n@keyframes tap-upper-3 {\n 0%, 50%, 100% {\n transform: rotate(10deg) scale(0.8);\n }\n\n 40% {\n transform: rotate(50deg) scale(0.8);\n }\n}\n\n@keyframes tap-upper-4 {\n 0%, 50%, 100% {\n transform: rotate(10deg) scale(1);\n }\n\n 40% {\n transform: rotate(50deg) scale(1);\n }\n}\n"}]}},"actionData":null,"errors":null}