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

","css":".mx-auto{margin-left:auto;margin-right:auto}.mt-3{margin-top:0.75rem}.flex{display:flex}.h-4{height:1rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.w-1\\/2{width:50%}.w-28{width:7rem}.w-48{width:12rem}.w-60{width:15rem}.w-full{width:100%}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-4{gap:1rem}.rounded-md{border-radius:0.375rem}.bg-slate-400{--tw-bg-opacity:1;background-color:rgb(148 163 184 / var(--tw-bg-opacity))}"},{"created":"2024-01-22T16:54:37.000Z","isPrivate":0,"projectId":"fb4dd7","snapshot":null,"tags":null,"title":"loader by harman-kanda","updated":"2024-01-22T16:54:37.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1460,"cssLen":4002,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* From cssbuttons.io by @harmankanda.github.io/New */\n\n.pl {\n width: 5em;\n height: 5em;\n}\n\n.pl circle {\n transform-box: fill-box;\n transform-origin: 50% 50%;\n}\n\n.pl__ring1 {\n animation: ring1 4s 0s ease-in-out infinite;\n}\n\n.pl__ring2 {\n animation: ring2 4s 0.04s ease-in-out infinite;\n}\n\n.pl__ring3 {\n animation: ring3 4s 0.08s ease-in-out infinite;\n}\n\n.pl__ring4 {\n animation: ring4 4s 0.12s ease-in-out infinite;\n}\n\n.pl__ring5 {\n animation: ring5 4s 0.16s ease-in-out infinite;\n}\n\n.pl__ring6 {\n animation: ring6 4s 0.2s ease-in-out infinite;\n}\n\n/* Animations */\n@keyframes ring1 {\n from {\n stroke-dashoffset: -376.237129776;\n transform: rotate(-0.25turn);\n animation-timing-function: ease-in;\n }\n\n 23% {\n stroke-dashoffset: -94.247778;\n transform: rotate(1turn);\n animation-timing-function: ease-out;\n }\n\n 46%, 50% {\n stroke-dashoffset: -376.237129776;\n transform: rotate(2.25turn);\n animation-timing-function: ease-in;\n }\n\n 73% {\n stroke-dashoffset: -94.247778;\n transform: rotate(3.5turn);\n animation-timing-function: ease-out;\n }\n\n 96%, to {\n stroke-dashoffset: -376.237129776;\n transform: rotate(4.75turn);\n }\n}\n\n@keyframes ring2 {\n from {\n stroke-dashoffset: -329.207488554;\n transform: rotate(-0.25turn);\n animation-timing-function: ease-in;\n }\n\n 23% {\n stroke-dashoffset: -82.46680575;\n transform: rotate(1turn);\n animation-timing-function: ease-out;\n }\n\n 46%, 50% {\n stroke-dashoffset: -329.207488554;\n transform: rotate(2.25turn);\n animation-timing-function: ease-in;\n }\n\n 73% {\n stroke-dashoffset: -82.46680575;\n transform: rotate(3.5turn);\n animation-timing-function: ease-out;\n }\n\n 96%, to {\n stroke-dashoffset: -329.207488554;\n transform: rotate(4.75turn);\n }\n}\n\n@keyframes ring3 {\n from {\n stroke-dashoffset: -288.4484661616;\n transform: rotate(-0.25turn);\n animation-timing-function: ease-in;\n }\n\n 23% {\n stroke-dashoffset: -72.2566298;\n transform: rotate(1turn);\n animation-timing-function: ease-out;\n }\n\n 46%, 50% {\n stroke-dashoffset: -288.4484661616;\n transform: rotate(2.25turn);\n animation-timing-function: ease-in;\n }\n\n 73% {\n stroke-dashoffset: -72.2566298;\n transform: rotate(3.5turn);\n animation-timing-function: ease-out;\n }\n\n 96%, to {\n stroke-dashoffset: -288.4484661616;\n transform: rotate(4.75turn);\n }\n}\n\n@keyframes ring4 {\n from {\n stroke-dashoffset: -253.9600625988;\n transform: rotate(-0.25turn);\n animation-timing-function: ease-in;\n }\n\n 23% {\n stroke-dashoffset: -63.61725015;\n transform: rotate(1turn);\n animation-timing-function: ease-out;\n }\n\n 46%, 50% {\n stroke-dashoffset: -253.9600625988;\n transform: rotate(2.25turn);\n animation-timing-function: ease-in;\n }\n\n 73% {\n stroke-dashoffset: -63.61725015;\n transform: rotate(3.5turn);\n animation-timing-function: ease-out;\n }\n\n 96%, to {\n stroke-dashoffset: -253.9600625988;\n transform: rotate(4.75turn);\n }\n}\n\n@keyframes ring5 {\n from {\n stroke-dashoffset: -225.7422778656;\n transform: rotate(-0.25turn);\n animation-timing-function: ease-in;\n }\n\n 23% {\n stroke-dashoffset: -56.5486668;\n transform: rotate(1turn);\n animation-timing-function: ease-out;\n }\n\n 46%, 50% {\n stroke-dashoffset: -225.7422778656;\n transform: rotate(2.25turn);\n animation-timing-function: ease-in;\n }\n\n 73% {\n stroke-dashoffset: -56.5486668;\n transform: rotate(3.5turn);\n animation-timing-function: ease-out;\n }\n\n 96%, to {\n stroke-dashoffset: -225.7422778656;\n transform: rotate(4.75turn);\n }\n}\n\n@keyframes ring6 {\n from {\n stroke-dashoffset: -203.795111962;\n transform: rotate(-0.25turn);\n animation-timing-function: ease-in;\n }\n\n 23% {\n stroke-dashoffset: -51.05087975;\n transform: rotate(1turn);\n animation-timing-function: ease-out;\n }\n\n 46%, 50% {\n stroke-dashoffset: -203.795111962;\n transform: rotate(2.25turn);\n animation-timing-function: ease-in;\n }\n\n 73% {\n stroke-dashoffset: -51.05087975;\n transform: rotate(3.5turn);\n animation-timing-function: ease-out;\n }\n\n 96%, to {\n stroke-dashoffset: -203.795111962;\n transform: rotate(4.75turn);\n }\n}"},{"created":"2024-01-22T16:54:37.000Z","isPrivate":0,"projectId":"3601f4","snapshot":null,"tags":null,"title":"loader by vinodjangid07","updated":"2024-01-22T16:54:37.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4014,"cssLen":1236,"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 Z\n Z\n

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

\n","css":".loader {\n width: fit-content;\n height: fit-content;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.wrapper {\n width: fit-content;\n height: fit-content;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n.catContainer {\n width: 100%;\n height: fit-content;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n}\n.catbody {\n width: 80px;\n}\n.tail {\n position: absolute;\n width: 17px;\n top: 50%;\n animation: tail 0.5s ease-in infinite alternate-reverse;\n transform-origin: top;\n}\n@keyframes tail {\n 0% {\n transform: rotateZ(60deg);\n }\n 50% {\n transform: rotateZ(0deg);\n }\n 100% {\n transform: rotateZ(-20deg);\n }\n}\n.wall {\n width: 300px;\n}\n.text {\n display: flex;\n flex-direction: column;\n width: 50px;\n position: absolute;\n margin: 0px 0px 100px 120px;\n}\n.zzz {\n color: black;\n font-weight: 700;\n font-size: 15px;\n animation: zzz 2s linear infinite;\n}\n.bigzzz {\n color: black;\n font-weight: 700;\n font-size: 25px;\n margin-left: 10px;\n animation: zzz 2.3s linear infinite;\n}\n@keyframes zzz {\n 0% {\n color: transparent;\n }\n 50% {\n color: black;\n }\n 100% {\n color: transparent;\n }\n}\n"},{"created":"2024-01-22T16:54:36.000Z","isPrivate":0,"projectId":"2d053e","snapshot":null,"tags":null,"title":"loader by doniaskima","updated":"2024-01-22T16:54:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":755,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"/* HTML:

*/\n.loader {\n width: 80px;\n height: 40px;\n border-radius: 100px 100px 0 0;\n position: relative;\n overflow: hidden;\n}\n\n.loader:before {\n content: \"\";\n position: absolute;\n inset: 0 0 -100%;\n background: radial-gradient(farthest-side,#ffd738 80%,#0000) left 70% top 20%/15px 15px,\n radial-gradient(farthest-side,#020308 92%,#0000) left 65% bottom 19%/12px 12px,\n radial-gradient(farthest-side,#ecfefe 92%,#0000) left 70% bottom 20%/15px 15px,\n linear-gradient(#9eddfe 50%,#020308 0);\n background-repeat: no-repeat;\n animation: l5 2s infinite;\n}\n\n@keyframes l5 {\n 0%,20% {\n transform: rotate(0)\n }\n\n 40%,60% {\n transform: rotate(.5turn)\n }\n\n 80%,100% {\n transform: rotate(1turn)\n }\n}\n"},{"created":"2024-01-22T16:54:36.000Z","isPrivate":0,"projectId":"880e3a","snapshot":null,"tags":null,"title":"loader by Juanes200122","updated":"2024-01-22T16:54:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":301,"cssLen":1885,"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":".cube-loader {\n position: relative;\n /* u can choose any size */\n width: 75px;\n height: 75px;\n transform-style: preserve-3d;\n transform: rotateX(-30deg);\n animation: animate 4s linear infinite;\n}\n\n@keyframes animate {\n 0% {\n transform: rotateX(-30deg) rotateY(0);\n }\n\n 100% {\n transform: rotateX(-30deg) rotateY(360deg);\n }\n}\n\n.cube-loader .cube-wrapper {\n position: absolute;\n width: 100%;\n height: 100%;\n /* top: 0;\n left: 0; */\n transform-style: preserve-3d;\n}\n\n.cube-loader .cube-wrapper .cube-span {\n position: absolute;\n width: 100%;\n height: 100%;\n /* top: 0;\n left: 0; */\n /* width 75px / 2 = 37.5px */\n transform: rotateY(calc(90deg * var(--i))) translateZ(37.5px);\n background: linear-gradient(to bottom,\n hsl(0, 0%, 100%) 0%,\n hsl(0, 0%, 100%) 5.5%,\n hsl(0, 0%, 100%) 12.1%,\n hsl(0, 0%, 0%) 100%,\n hsl(0, 0%, 100%) 27.9%,\n hsl(0, 0%, 100%) 36.6%,\n hsl(0, 0%, 100%) 45.6%,\n hsl(0, 0%, 0%) 100%,\n hsl(0, 0%, 100%) 63.4%,\n hsl(0, 0%, 100%) 71.7%,\n hsl(0, 0%, 100%) 79.4%,\n hsl(0, 0%, 0%) 100%,\n hsl(0, 0%, 100%) 100%,\n hsl(0, 0%, 100%) 100%,\n hsl(0, 0%, 100%) 100%,\n hsl(0, 0%, 0%) 100%);\n}\n\n.cube-top {\n position: absolute;\n width: 75px;\n height: 75px;\n background: hsl(0, 0%, 98%) 0%;\n /* width 75px / 2 = 37.5px */\n transform: rotateX(90deg) translateZ(37.5px);\n transform-style: preserve-3d;\n}\n\n.cube-top::before {\n content: '';\n position: absolute;\n /* u can choose any size */\n width: 75px;\n height: 75px;\n background: hsl(0, 0%, 33%) 19.6%;\n transform: translateZ(-90px);\n filter: blur(10px);\n box-shadow: 0 0 10px #ffffff,\n 0 0 20px hsl(0, 0%, 0%) 19.6%,\n 0 0 30px #ffffff,\n 0 0 40px hsl(0, 0%, 0%) 19.6%;\n}\n\n"},{"created":"2024-01-22T16:54:36.000Z","isPrivate":0,"projectId":"ed99a5","snapshot":null,"tags":null,"title":"loader by fanishah","updated":"2024-01-22T16:54:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":291,"cssLen":833,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n position: absolute;\n}\n\n.bar {\n width: 10px;\n height: 70px;\n background: hsl(0, 100%, 50%);\n display: inline-block;\n transform-origin: bottom center;\n border-top-right-radius: 20px;\n border-top-left-radius: 20px;\n animation: loader8913 1.2s linear infinite;\n}\n\n.bar1 {\n animation-delay: 0.1s;\n}\n\n.bar2 {\n animation-delay: 0.2s;\n}\n\n.bar3 {\n animation-delay: 0.3s;\n}\n\n.bar4 {\n animation-delay: 0.4s;\n}\n\n.bar5 {\n animation-delay: 0.5s;\n}\n\n.bar6 {\n animation-delay: 0.6s;\n}\n\n.bar7 {\n animation-delay: 0.7s;\n}\n\n.bar8 {\n animation-delay: 0.8s;\n}\n\n@keyframes loader8913 {\n 0% {\n transform: scaleY(0.1);\n }\n\n 50% {\n transform: scaleY(1);\n background: yellowgreen;\n }\n\n 100% {\n transform: scaleY(0.1);\n background: transparent;\n }\n}\n"},{"created":"2024-01-22T16:54:36.000Z","isPrivate":0,"projectId":"34f888","snapshot":null,"tags":null,"title":"loader by S3nouy","updated":"2024-01-22T16:54:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":421,"cssLen":3803,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":"body {\n margin: 0;\n padding: 0;\n height: 100px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #000006;\n}\n\n.fire {\n position: absolute;\n top: calc(50% - 25px);\n left: calc(50% - 25px);\n width: 50px;\n height: 50px;\n background-color: transparent;\n margin-left: auto;\n margin-right: auto;\n}\n@keyframes scaleUpDown {\n 0%,\n 100% {\n transform: scaleY(1) scaleX(1);\n }\n\n 50%,\n 90% {\n transform: scaleY(1.1);\n }\n\n 75% {\n transform: scaleY(0.95);\n }\n\n 80% {\n transform: scaleX(0.95);\n }\n}\n\n@keyframes shake {\n 0%,\n 100% {\n transform: skewX(0) scale(1);\n }\n\n 50% {\n transform: skewX(5deg) scale(0.9);\n }\n}\n\n@keyframes particleUp {\n 0% {\n opacity: 0;\n }\n\n 20% {\n opacity: 1;\n }\n\n 80% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n top: -100%;\n transform: scale(0.5);\n }\n}\n\n@keyframes glow {\n 0%,\n 100% {\n background-color: #3cff1e;\n }\n\n 50% {\n background-color: #3cff1e;\n }\n}\n\n.fire {\n position: absolute;\n top: calc(50% - 25px);\n left: calc(50% - 25px);\n width: 50px; /* Reduced size by 50% */\n height: 50px; /* Reduced size by 50% */\n background-color: transparent;\n margin-left: auto;\n margin-right: auto;\n}\n\n.fire-center {\n position: absolute;\n height: 100%;\n width: 100%;\n animation: scaleUpDown 3s ease-out;\n animation-iteration-count: infinite;\n animation-fill-mode: both;\n}\n\n.fire-center .main-fire {\n position: absolute;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(\n farthest-corner at 10px 0,\n #3cff1e 0%,\n #3cff1e 95%\n );\n transform: scaleX(0.8) rotate(45deg);\n border-radius: 0 40% 60% 40%;\n filter: drop-shadow(0 0 10px #3cff1e);\n}\n\n.fire-center .particle-fire {\n position: absolute;\n top: 60%;\n left: 45%;\n width: 10px;\n height: 10px;\n background-color: #3cff1e;\n border-radius: 50%;\n filter: drop-shadow(0 0 10px #d43322);\n animation: particleUp 2s ease-out 0;\n animation-iteration-count: infinite;\n animation-fill-mode: both;\n}\n\n.fire-right {\n height: 100%;\n width: 100%;\n position: absolute;\n animation: shake 2s ease-out 0;\n animation-iteration-count: infinite;\n animation-fill-mode: both;\n}\n\n.fire-right .main-fire {\n position: absolute;\n top: 15%;\n right: -25%;\n width: 80%;\n height: 80%;\n background-color: #3cff1e;\n transform: scaleX(0.8) rotate(45deg);\n border-radius: 0 40% 60% 40%;\n filter: drop-shadow(0 0 10px #3cff1e);\n}\n\n.fire-right .particle-fire {\n position: absolute;\n top: 45%;\n left: 50%;\n width: 15px;\n height: 15px;\n background-color: #3cff1e;\n transform: scaleX(0.8) rotate(45deg);\n border-radius: 50%;\n filter: drop-shadow(0 0 10px #3cff1e);\n animation: particleUp 2s ease-out 0;\n animation-iteration-count: infinite;\n animation-fill-mode: both;\n}\n\n.fire-left {\n position: absolute;\n height: 100%;\n width: 100%;\n animation: shake 3s ease-out 0;\n animation-iteration-count: infinite;\n animation-fill-mode: both;\n}\n\n.fire-left .main-fire {\n position: absolute;\n top: 15%;\n left: -20%;\n width: 80%;\n height: 80%;\n background-color: #3cff1e;\n transform: scaleX(0.8) rotate(45deg);\n border-radius: 0 40% 60% 40%;\n filter: drop-shadow(0 0 10px #3cff1e);\n}\n\n.fire-left .particle-fire {\n position: absolute;\n top: 10%;\n left: 20%;\n width: 10%;\n height: 10%;\n background-color: #3cff1e;\n border-radius: 50%;\n filter: drop-shadow(0 0 10px #d43322);\n animation: particleUp 3s infinite ease-out 0;\n animation-fill-mode: both;\n}\n\n.fire-bottom .main-fire {\n position: absolute;\n top: 30%;\n left: 20%;\n width: 75%;\n height: 75%;\n background-color: #3cff1e;\n transform: scaleX(0.8) rotate(45deg);\n border-radius: 0 40% 100% 40%;\n filter: blur(10px);\n animation: glow 2s ease-out 0;\n animation-iteration-count: infinite;\n animation-fill-mode: both;\n}\n"},{"created":"2024-01-22T16:54:36.000Z","isPrivate":0,"projectId":"146f85","snapshot":null,"tags":null,"title":"loader by PtNeel","updated":"2024-01-22T16:54:36.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":214,"cssLen":1255,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".wrapper {\n width: 200px;\n height: 60px;\n position: relative;\n z-index: 1;\n}\n\n.circle {\n width: 20px;\n height: 20px;\n position: absolute;\n border-radius: 50%;\n background-color: #000;\n left: 15%;\n transform-origin: 50%;\n animation: circle7124 .5s alternate infinite ease;\n}\n\n@keyframes circle7124 {\n 0% {\n top: 60px;\n height: 5px;\n border-radius: 50px 50px 25px 25px;\n transform: scaleX(1.7);\n }\n\n 40% {\n height: 20px;\n border-radius: 50%;\n transform: scaleX(1);\n }\n\n 100% {\n top: 0%;\n }\n}\n\n.circle:nth-child(2) {\n left: 45%;\n animation-delay: .2s;\n}\n\n.circle:nth-child(3) {\n left: auto;\n right: 15%;\n animation-delay: .3s;\n}\n\n.shadow {\n width: 20px;\n height: 4px;\n border-radius: 50%;\n background-color: rgba(0,0,0,0.9);\n position: absolute;\n top: 62px;\n transform-origin: 50%;\n z-index: -1;\n left: 15%;\n filter: blur(1px);\n animation: shadow046 .5s alternate infinite ease;\n}\n\n@keyframes shadow046 {\n 0% {\n transform: scaleX(1.5);\n }\n\n 40% {\n transform: scaleX(1);\n opacity: .7;\n }\n\n 100% {\n transform: scaleX(.2);\n opacity: .4;\n }\n}\n\n.shadow:nth-child(4) {\n left: 45%;\n animation-delay: .2s\n}\n\n.shadow:nth-child(5) {\n left: auto;\n right: 15%;\n animation-delay: .3s;\n}\n"},{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"22b24a","snapshot":null,"tags":null,"title":"loader by Juanes200122","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":488,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".Buttons {\n color: #000;\n width: 6px;\n aspect-ratio: 1;\n border-radius: 50%;\n animation: l37-1 0.75s infinite linear alternate, l37-2 1.5s infinite linear;\n}\n@keyframes l37-1 {\n 0%,\n 20% {\n box-shadow: 30px 0 0 3px, 10px 0 0 3px, -10px 0 0 3px, -30px 0 0 3px;\n }\n 60%,\n 100% {\n box-shadow: 12px 0 0 3px, 14px 0 0 6px, -14px 0 0 6px, -12px 0 0 3px;\n }\n}\n\n@keyframes l37-2 {\n 0%,\n 25% {\n transform: rotate(0);\n }\n 50%,\n 100% {\n transform: rotate(0.5turn);\n }\n}\n"},{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"91c7ac","snapshot":null,"tags":null,"title":"loader by csemszepp","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":120,"cssLen":3793,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\r\n\t

\n\t\t

\t\n\t

","css":"@-webkit-keyframes sphere1Move {\n 0% {\n width: 50px;\n height: 50px;\n left: 116px;\n top: 116px;\n z-index: 0;\n }\n\n 10% {\n width: 40px;\n height: 40px;\n }\n\n 20% {\n width: 30px;\n height: 30px;\n }\n\n 30% {\n width: 40px;\n height: 40px;\n }\n\n 45% {\n left: 15px;\n }\n\n 49% {\n z-index: 0;\n }\n\n 50% {\n width: 50px;\n height: 50px;\n left: 20px;\n top: 116px;\n z-index: 10;\n }\n\t/*55%{left:15px;}*/\n 60% {\n width: 60px;\n height: 60px;\n }\n\n 80% {\n width: 70px;\n height: 70px;\n }\n\n 90% {\n width: 60px;\n height: 60px;\n }\n\n 99% {\n z-index: 10;\n }\n\n 100% {\n width: 50px;\n height: 50px;\n left: 116px;\n top: 116px;\n z-index: 0;\n }\n}\n\n@keyframes sphere1Move {\n 0% {\n width: 50px;\n height: 50px;\n left: 116px;\n top: 116px;\n z-index: 0;\n }\n\n 10% {\n width: 40px;\n height: 40px;\n }\n\n 20% {\n width: 30px;\n height: 30px;\n }\n\n 30% {\n width: 40px;\n height: 40px;\n }\n\n 45% {\n left: 15px;\n }\n\n 49% {\n z-index: 0;\n }\n\n 50% {\n width: 50px;\n height: 50px;\n left: 20px;\n top: 116px;\n z-index: 10;\n }\n/*\t55%{left:15px;}*/\n 60% {\n width: 60px;\n height: 60px;\n }\n\n 80% {\n width: 70px;\n height: 70px;\n }\n\n 90% {\n width: 60px;\n height: 60px;\n }\n\n 99% {\n z-index: 10;\n }\n\n 100% {\n width: 50px;\n height: 50px;\n left: 116px;\n top: 116px;\n z-index: 0;\n }\n}\n\n@-webkit-keyframes sphere2Move {\n 0% {\n width: 50px;\n height: 50px;\n left: 116px;\n top: 116px;\n z-index: 0;\n }\n\n 10% {\n width: 40px;\n height: 40px;\n }\n\n 20% {\n width: 30px;\n height: 30px;\n }\n\n 30% {\n width: 40px;\n height: 40px;\n }\n\n 45% {\n left: 217px;\n }\n\n 49% {\n z-index: 0;\n }\n\n 50% {\n width: 50px;\n height: 50px;\n left: 222px;\n top: 116px;\n z-index: 10;\n }\n\t/*55%{left:15px;}*/\n 60% {\n width: 60px;\n height: 60px;\n }\n\n 80% {\n width: 70px;\n height: 70px;\n }\n\n 90% {\n width: 60px;\n height: 60px;\n }\n\n 99% {\n z-index: 10;\n }\n\n 100% {\n width: 50px;\n height: 50px;\n left: 116px;\n top: 116px;\n z-index: 0;\n }\n}\n\n@keyframes sphere2Move {\n 0% {\n width: 50px;\n height: 50px;\n left: 116px;\n top: 116px;\n z-index: 0;\n }\n\n 10% {\n width: 40px;\n height: 40px;\n }\n\n 20% {\n width: 30px;\n height: 30px;\n }\n\n 30% {\n width: 40px;\n height: 40px;\n }\n\n 45% {\n left: 217px;\n }\n\n 49% {\n z-index: 0;\n }\n\n 50% {\n width: 50px;\n height: 50px;\n left: 222px;\n top: 116px;\n z-index: 10;\n }\n\t/*55%{left:15px;}*/\n 60% {\n width: 60px;\n height: 60px;\n }\n\n 80% {\n width: 70px;\n height: 70px;\n }\n\n 90% {\n width: 60px;\n height: 60px;\n }\n\n 99% {\n z-index: 10;\n }\n\n 100% {\n width: 50px;\n height: 50px;\n left: 116px;\n top: 116px;\n z-index: 0;\n }\n}\n\n.wrapper {\n width: 300px;\n height: 300px;\n\t/*border:1px solid red;*/\n margin: 0 auto;\n margin-top: 5%;\n position: relative;\n}\n\n.hoop {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background: transparent;\n box-shadow: 0 0 0 6px #96281B, 0 0 0 26px #D64541;\n position: absolute;\n left: 100px;\n top: 100px;\n z-index: 5;\n}\n\n.sphere1 {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background: #22A7F0;\n position: absolute;\n left: 116px;\n top: 116px;\n box-shadow: -7px -7px 0 #1E8BC3 inset;\n -webkit-animation: sphere1Move 1.2s linear infinite;\n animation: sphere1Move 1.2s linear infinite;\n}\n\n.sphere2 {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background: #22A7F0;\n position: absolute;\n left: 116px;\n top: 116px;\n box-shadow: -7px -7px 0 #1E8BC3 inset;\n -webkit-animation: sphere2Move 1.2s linear 0.6s infinite;\n animation: sphere2Move 1.2s linear 0.6s infinite;\n}"},{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"9742d6","snapshot":null,"tags":null,"title":"loader by dylanharriscameron","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":986,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loaderBar {\n width: calc(160px / 0.707);\n height: 10px;\n background: #F9F9F9;\n border-radius: 10px;\n border: 1px solid #006DFE;\n position: relative;\n overflow: hidden;\n}\n\n.loaderBar::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n border-radius: 5px;\n background: repeating-linear-gradient(45deg, #0031F2 0 30px, #006DFE 0 40px) right/200% 100%;\n animation: fillProgress 6s ease-in-out infinite, lightEffect 1s infinite linear;\n animation-fill-mode: forwards;\n}\n\n@keyframes fillProgress {\n 0% {\n width: 0;\n }\n\n 33% {\n width: 33.333%;\n }\n\n 66% {\n width: 66.67%;\n }\n\n 100% {\n width: 100%;\n }\n}\n\n@keyframes lightEffect {\n 0%, 20%, 40%, 60%, 80%, 100% {\n background: repeating-linear-gradient(45deg, #0031F2 0 30px, #006DFE 0 40px) right/200% 100%;\n }\n\n 10%, 30%, 50%, 70%, 90% {\n background: repeating-linear-gradient(45deg, #0031F2 0 30px, #006DFE 0 40px, rgba(255, 255, 255, 0.3) 0 40px) right/200% 100%;\n }\n}"},{"created":"2024-01-22T16:54:35.000Z","isPrivate":0,"projectId":"c40d31","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:54:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1434,"cssLen":820,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":"#pen1 {\n animation: pen1 2s infinite ease;\n}\n\n#pen2 {\n animation: pen2 2s infinite ease;\n}\n\n#pen3 {\n animation: pen3 2s infinite ease;\n}\n\n#loader {\n animation: loaderColor 5s infinite ease;\n}\n\n@keyframes pen1 {\n 0% {\n transform: translateY(0px);\n }\n\n 15% {\n transform: translateY(-10px);\n }\n\n 30% {\n transform: translateY(0px);\n }\n}\n\n@keyframes pen2 {\n 30% {\n transform: translateY(0px);\n }\n\n 45% {\n transform: translateY(-10px);\n }\n\n 60% {\n transform: translateY(0px);\n }\n}\n\n@keyframes pen3 {\n 60% {\n transform: translateY(0px);\n }\n\n 75% {\n transform: translateY(-10px);\n }\n\n 90% {\n transform: translateY(0px);\n }\n}\n\n@keyframes loaderColor {\n 0% {\n fill: #513B56;\n }\n\n 33% {\n fill: #348AA7;\n }\n\n 66% {\n fill: #5DD39E;\n }\n\n 100% {\n fill: #513B56;\n }\n}"}]}},"actionData":null,"errors":null}