{"loaderData":{"0":null,"0-3":{"total":7413,"projects":[{"created":"2024-01-22T16:52:39.000Z","isPrivate":0,"projectId":"31cf8a","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:52:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":952,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 64px;\n height: 64px;\n position: relative;\n background: #FFF;\n border-radius: 4px;\n overflow: hidden;\n}\n\n.loader:before {\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 40px;\n height: 40px;\n transform: rotate(45deg) translate(30%, 40%);\n background: #ff9371;\n box-shadow: 32px -34px 0 5px #ff3d00;\n animation: slide 2s infinite ease-in-out alternate;\n}\n\n.loader:after {\n content: \"\";\n position: absolute;\n left: 10px;\n top: 10px;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #ff3d00;\n transform: rotate(0deg);\n transform-origin: 35px 145px;\n animation: rotate 2s infinite ease-in-out;\n}\n\n@keyframes slide {\n 0% , 100% {\n bottom: -35px\n }\n\n 25% , 75% {\n bottom: -2px\n }\n\n 20% , 80% {\n bottom: 2px\n }\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(-15deg)\n }\n\n 25% , 75% {\n transform: rotate(0deg)\n }\n\n 100% {\n transform: rotate(25deg)\n }\n}\n "},{"created":"2024-01-22T16:52:39.000Z","isPrivate":0,"projectId":"cc1480","snapshot":null,"tags":null,"title":"loader by andrew-demchenk0","updated":"2024-01-22T16:52:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":251,"cssLen":1529,"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

","css":".pyramid-loader {\n position: relative;\n width: 300px;\n height: 300px;\n display: block;\n transform-style: preserve-3d;\n transform: rotateX(-20deg);\n}\n\n.wrapper {\n position: relative;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n animation: spin 4s linear infinite;\n}\n\n@keyframes spin {\n 100% {\n transform: rotateY(360deg);\n }\n}\n\n.pyramid-loader .wrapper .side {\n width: 70px;\n height: 70px;\n/* you can choose any gradient or color you want */\n /* background: radial-gradient( #2F2585 10%, #F028FD 70%, #2BDEAC 120%); */\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n transform-origin: center top;\n clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n}\n\n.pyramid-loader .wrapper .side1 {\n transform: rotateZ(-30deg) rotateY(90deg);\n background: conic-gradient( #2BDEAC, #F028FD, #D8CCE6, #2F2585);\n}\n\n.pyramid-loader .wrapper .side2 {\n transform: rotateZ(30deg) rotateY(90deg);\n background: conic-gradient( #2F2585, #D8CCE6, #F028FD, #2BDEAC);\n}\n\n.pyramid-loader .wrapper .side3 {\n transform: rotateX(30deg);\n background: conic-gradient( #2F2585, #D8CCE6, #F028FD, #2BDEAC);\n}\n\n.pyramid-loader .wrapper .side4 {\n transform: rotateX(-30deg);\n background: conic-gradient( #2BDEAC, #F028FD, #D8CCE6, #2F2585);\n}\n\n.pyramid-loader .wrapper .shadow {\n width: 60px;\n height: 60px;\n background: #8B5AD5;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n transform: rotateX(90deg) translateZ(-40px);\n filter: blur(12px);\n}"},{"created":"2024-01-22T16:52:39.000Z","isPrivate":0,"projectId":"afe741","snapshot":null,"tags":null,"title":"loader by andrew-demchenk0","updated":"2024-01-22T16:52:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":92,"cssLen":1379,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".glitch {\n position: relative;\n font-size: 25px;\n font-weight: 700;\n line-height: 1.2;\n color: #fff;\n letter-spacing: 5px;\n z-index: 1;\n animation: shift 1s ease-in-out infinite alternate;\n}\n\n.glitch:before,\n.glitch:after {\n display: block;\n content: attr(data-glitch);\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0.8;\n}\n\n.glitch:before {\n animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;\n color: #8b00ff;\n z-index: -1;\n}\n\n.glitch:after {\n animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;\n color: #00e571;\n z-index: -2;\n}\n\n@keyframes glitch {\n 0% {\n transform: translate(0);\n }\n\n 20% {\n transform: translate(-3px, 3px);\n }\n\n 40% {\n transform: translate(-3px, -3px);\n }\n\n 60% {\n transform: translate(3px, 3px);\n }\n\n 80% {\n transform: translate(3px, -3px);\n }\n\n to {\n transform: translate(0);\n }\n}\n\n@keyframes shift {\n 0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {\n transform: skewX(0deg);\n }\n\n 41% {\n transform: skewX(10deg);\n }\n\n 42% {\n transform: skewX(-10deg);\n }\n\n 59% {\n transform: skewX(40deg) skewY(10deg);\n }\n\n 60% {\n transform: skewX(-40deg) skewY(-10deg);\n }\n\n 63% {\n transform: skewX(10deg) skewY(-5deg);\n }\n\n 70% {\n transform: skewX(-50deg) skewY(-20deg);\n }\n\n 71% {\n transform: skewX(10deg) skewY(-10deg);\n }\n}\n"},{"created":"2024-01-22T16:52:38.000Z","isPrivate":0,"projectId":"f20530","snapshot":"https://s1.qingting.work/runjs/35d67a7b5340.png?x-oss-process=style/webp-w-500","tags":null,"title":"loader by mobinkakei","updated":"2024-01-22T18:53:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":386,"cssLen":2362,"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

","css":".loader {\n --path: #2f3545;\n --dot: #5628ee;\n --duration: 3s;\n width: 44px;\n height: 44px;\n position: relative;\n}\n\n.loader:before {\n content: '';\n width: 6px;\n height: 6px;\n border-radius: 50%;\n position: absolute;\n display: block;\n background: var(--dot);\n top: 37px;\n left: 19px;\n transform: translate(-18px, -18px);\n animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;\n}\n\n.loader svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.loader svg rect, .loader svg polygon, .loader svg circle {\n fill: none;\n stroke: var(--path);\n stroke-width: 10px;\n stroke-linejoin: round;\n stroke-linecap: round;\n}\n\n.loader svg polygon {\n stroke-dasharray: 145 76 145 76;\n stroke-dashoffset: 0;\n animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;\n}\n\n.loader svg rect {\n stroke-dasharray: 192 64 192 64;\n stroke-dashoffset: 0;\n animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;\n}\n\n.loader svg circle {\n stroke-dasharray: 150 50 150 50;\n stroke-dashoffset: 75;\n animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;\n}\n\n.loader.triangle {\n width: 48px;\n}\n\n.loader.triangle:before {\n left: 21px;\n transform: translate(-10px, -18px);\n animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;\n}\n\n@keyframes pathTriangle {\n 33% {\n stroke-dashoffset: 74;\n }\n\n 66% {\n stroke-dashoffset: 147;\n }\n\n 100% {\n stroke-dashoffset: 221;\n }\n}\n\n@keyframes dotTriangle {\n 33% {\n transform: translate(0, 0);\n }\n\n 66% {\n transform: translate(10px, -18px);\n }\n\n 100% {\n transform: translate(-10px, -18px);\n }\n}\n\n@keyframes pathRect {\n 25% {\n stroke-dashoffset: 64;\n }\n\n 50% {\n stroke-dashoffset: 128;\n }\n\n 75% {\n stroke-dashoffset: 192;\n }\n\n 100% {\n stroke-dashoffset: 256;\n }\n}\n\n@keyframes dotRect {\n 25% {\n transform: translate(0, 0);\n }\n\n 50% {\n transform: translate(18px, -18px);\n }\n\n 75% {\n transform: translate(0, -36px);\n }\n\n 100% {\n transform: translate(-18px, -18px);\n }\n}\n\n@keyframes pathCircle {\n 25% {\n stroke-dashoffset: 125;\n }\n\n 50% {\n stroke-dashoffset: 175;\n }\n\n 75% {\n stroke-dashoffset: 225;\n }\n\n 100% {\n stroke-dashoffset: 275;\n }\n}\n\n.loader {\n display: inline-block;\n margin: 0 16px;\n}\n\n "},{"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}"}]}},"actionData":null,"errors":null}