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

\n","css":".middle {\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 display: inline-block;\n transform-origin: bottom center;\n border-top-right-radius: 20px;\n border-top-left-radius: 20px;\n box-shadow: 5px 10px 20px inset rgba(255, 255, 0, 0.8); /* Yellow box shadow */\n animation: loader 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 loader {\n 0% {\n transform: scaleY(0.1);\n background: transparent;\n /* Change background to transparent */\n }\n\n 50% {\n transform: scaleY(1);\n background: linear-gradient(\n to bottom,\n #ffd700,\n #ffff00\n ); /* Gradient from gold to yellow */\n }\n\n 100% {\n transform: scaleY(0.1);\n background: transparent;\n }\n}\n"},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"ddf5a5","snapshot":null,"tags":null,"title":"loader by themrsami","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":150,"cssLen":516,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".flex {\n display: flex\n}\n\n.h-12 {\n height: 3rem\n}\n\n.w-32 {\n width: 8rem\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg)\n }\n}\n\n.animate-spin {\n animation: spin 1s linear infinite\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-center {\n justify-content: center\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.border-b-2 {\n border-bottom-width: 2px\n}\n\n.border-t-2 {\n border-top-width: 2px\n}\n\n.border-blue-900 {\n --tw-border-opacity: 1;\n border-color: rgb(30 58 138 / var(--tw-border-opacity))\n}"},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"06414c","snapshot":null,"tags":null,"title":"loader by VashonG","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1426,"cssLen":5310,"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

","css":".orbit {\n float: left;\n width: 100%;\n min-width: 100px;\n min-height: 100px;\n}\n\n.orbit-icon {\n width: 1.6em;\n height: 1.6em;\n line-height: 1.6em;\n font-size: 1.2em;\n border-radius: 50%;\n background: #ccc;\n color: #fff;\n text-align: center;\n display: block;\n}\n\n.orbit-wrap {\n height: 40em;\n list-style: none;\n font-size: 1.3em;\n}\n\n.orbit-wrap > li {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n\n.orbit-wrap > li:hover ul {\n border-width: 2px;\n border-color: #fff;\n}\n\n.orbit-wrap > li:hover ~ li ul {\n border-color: rgba(255, 255, 255, 0.2);\n}\n\n.orbit-wrap > li:hover ~ li ul li {\n opacity: 0.4;\n}\n\nul[class^=ring] {\n transition: all 300ms ease-in-out;\n}\n\nul[class^=ring] li {\n transition: all 300ms ease-in-out;\n}\n\n.ring-0 {\n width: 25em;\n height: 25em;\n animation: clockwiseRotate 35s linear infinite;\n}\n\n.ring-0 i {\n animation: counterClockwiseRotate 35s linear infinite;\n}\n\n.ring-0 > *:nth-of-type(1) {\n transform: rotate(95deg) translate(12.5em) rotate(-95deg);\n}\n\n.ring-0 > *:nth-of-type(2) {\n transform: rotate(190deg) translate(12.5em) rotate(-190deg);\n}\n\n.ring-0 > *:nth-of-type(3) {\n transform: rotate(285deg) translate(12.5em) rotate(-285deg);\n}\n\n.ring-0 > *:nth-of-type(4) {\n transform: rotate(380deg) translate(12.5em) rotate(-380deg);\n}\n\n.ring-1 {\n width: 20em;\n height: 20em;\n animation: clockwiseRotate 30s linear infinite;\n}\n\n.ring-1 i {\n animation: counterClockwiseRotate 30s linear infinite;\n}\n\n.ring-1 > *:nth-of-type(1) {\n transform: rotate(126.6666666667deg) translate(10em) rotate(-126.6666666667deg);\n}\n\n.ring-1 > *:nth-of-type(2) {\n transform: rotate(253.3333333333deg) translate(10em) rotate(-253.3333333333deg);\n}\n\n.ring-1 > *:nth-of-type(3) {\n transform: rotate(380deg) translate(10em) rotate(-380deg);\n}\n\n.ring-2 {\n width: 15em;\n height: 15em;\n animation: clockwiseRotate 25s linear infinite;\n}\n\n.ring-2 i {\n animation: counterClockwiseRotate 25s linear infinite;\n}\n\n.ring-2 > *:nth-of-type(1) {\n transform: rotate(47.5deg) translate(7.5em) rotate(-47.5deg);\n}\n\n.ring-2 > *:nth-of-type(2) {\n transform: rotate(95deg) translate(7.5em) rotate(-95deg);\n}\n\n.ring-2 > *:nth-of-type(3) {\n transform: rotate(142.5deg) translate(7.5em) rotate(-142.5deg);\n}\n\n.ring-2 > *:nth-of-type(4) {\n transform: rotate(190deg) translate(7.5em) rotate(-190deg);\n}\n\n.ring-2 > *:nth-of-type(5) {\n transform: rotate(237.5deg) translate(7.5em) rotate(-237.5deg);\n}\n\n.ring-2 > *:nth-of-type(6) {\n transform: rotate(285deg) translate(7.5em) rotate(-285deg);\n}\n\n.ring-2 > *:nth-of-type(7) {\n transform: rotate(332.5deg) translate(7.5em) rotate(-332.5deg);\n}\n\n.ring-2 > *:nth-of-type(8) {\n transform: rotate(380deg) translate(7.5em) rotate(-380deg);\n}\n\n.ring-3 {\n width: 10em;\n height: 10em;\n animation: clockwiseRotate 20s linear infinite;\n}\n\n.ring-3 i {\n animation: counterClockwiseRotate 20s linear infinite;\n}\n\n.ring-3 > *:nth-of-type(1) {\n transform: rotate(126.6666666667deg) translate(5em) rotate(-126.6666666667deg);\n}\n\n.ring-3 > *:nth-of-type(2) {\n transform: rotate(253.3333333333deg) translate(5em) rotate(-253.3333333333deg);\n}\n\n.ring-3 > *:nth-of-type(3) {\n transform: rotate(380deg) translate(5em) rotate(-380deg);\n}\n\nul[class^=ring] {\n border: solid 1px rgba(33, 150, 243, 0.8);\n position: relative;\n padding: 0;\n border-radius: 50%;\n list-style: none;\n box-sizing: content-box;\n}\n\nul[class^=ring] li {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 1.6em;\n height: 1.6em;\n margin: -0.8em;\n}\n/*\n center;\n */\n.orbit-center {\n z-index: 5;\n font-size: 2em;\n width: 1.8em;\n height: 1.8em;\n line-height: 1.8em;\n text-align: center;\n background: hotpink;\n border-radius: 50%;\n}\n\n.orbit-center:hover .orbit-center__icon {\n transform: rotateZ(0deg);\n}\n\n.orbit-center__icon {\n transform: rotateZ(-360deg);\n transition: all 300ms ease-in-out;\n}\n\n.orbit-wrap > li.orbit-center:hover ~ li > ul {\n width: 0;\n height: 0;\n}\n\n.orbit-wrap > li.orbit-center:hover ~ li > ul * {\n transform: translate(0, 0);\n}\n/* \n animations \n */\n@keyframes clockwiseRotate {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes counterClockwiseRotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(-360deg);\n }\n}\n/* \n icons \n */\n.fa-heart-o {\n background: #b71c1c;\n color: white;\n}\n\n.fa-coffee {\n background: #4CAF50;\n color: #CDDC39;\n}\n\n.fa-safari {\n background: white;\n color: darkslateblue;\n}\n\n.fa-firefox {\n background: #1565c0;\n color: #ff8f00;\n}\n\n.fa-chrome {\n background: #fbc02d;\n color: #ef6c00;\n}\n\n.fa-edge {\n background: #03a9f4;\n color: white;\n}\n\n.fa-android {\n background: snow;\n color: limegreen;\n}\n\n.fa-apple {\n background: #444;\n color: white;\n}\n\n.fa-linux {\n background: white;\n color: #222;\n}\n\n.fa-windows {\n background: white;\n color: #03a9f4;\n}\n\n.fa-terminal {\n background: #222;\n color: #fff;\n}\n\n.fa-html5 {\n background: white;\n color: #e65100;\n}\n\n.fa-css3 {\n background: white;\n color: #2196f3;\n}\n\n.fa-git {\n background: #222;\n color: white;\n}\n\n.fa-free-code-camp {\n background: green;\n color: white;\n}\n\n.fa-meetup {\n background: red;\n color: white;\n}\n\n.fa-podcast {\n background: red;\n color: white;\n}\n\n.fa-codepen {\n background: #333;\n color: white;\n}\n\n\n"},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"bf6bd5","snapshot":null,"tags":null,"title":"loader by Ratinax","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":146,"cssLen":1515,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

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

","css":"loader-box {\n background: #fff;\n top: 50%;\n left: 50%;\n position: absolute;\n transform: translate(-50%, -50%);\n}\n\n.loading-wrapper {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n}\n\n.loading-wrapper .loader {\n height: 80px;\n width: 80px;\n border: 3px solid #e5e5e5;\n border-radius: 50%;\n -webkit-animation: pulse1572 1200ms ease-in-out;\n animation: pulse1572 1200ms ease-in-out;\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n}\n\n.loading-wrapper .loader .loader-inner {\n display: block;\n height: 40px;\n width: 40px;\n position: absolute;\n top: 50%;\n left: 50%;\n -webkit-transform: translateX(-50%) translateY(-50%);\n transform: translateX(-50%) translateY(-50%);\n background: linear-gradient(180deg, rgb(0, 140, 255) 0%, rgb(218, 67, 218) 100%);\n -webkit-transform-origin: 50% 50%;\n transform-origin: 50% 50%;\n border-radius: 50%;\n -webkit-animation: innerPulse934 1200ms ease-in-out;\n animation: innerPulse934 1200ms ease-in-out;\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n -webkit-animation-delay: 600ms;\n animation-delay: 600ms;\n box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);\n}\n\n@keyframes pulse1572 {\n 0% {\n border: 3px solid #fff;\n }\n\n 50% {\n border: 40px solid #fff;\n }\n\n 100% {\n border: 3px solid #fff;\n }\n}\n\n@keyframes innerPulse934 {\n 0% {\n height: 30px;\n width: 30px;\n }\n\n 50% {\n height: 53.33333px;\n width: 53.33333px;\n }\n\n 100% {\n height: 30px;\n width: 30px;\n }\n}"},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"a50931","snapshot":null,"tags":null,"title":"loader by youranonone10","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":478,"cssLen":2001,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".wrapper {\n height: 200px;\n}\n\n.cloud {\n overflow: hidden;\n padding: 5px;\n height: 50px;\n}\n\n.cloud_left {\n position: relative;\n float: left;\n background-color: #234;\n width: 100px;\n height: 100px;\n border-radius: 50%;\n box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.75);\n}\n\n.cloud_right {\n position: relative;\n float: left;\n background-color: #203040;\n width: 70px;\n height: 70px;\n border-radius: 50%;\n top: 15px;\n left: -30px;\n box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.75);\n}\n\n.rain {\n width: 180px;\n height: 140px;\n}\n\n.drop {\n position: relative;\n float: left;\n width: 2px;\n margin: 10px;\n left: 20px;\n background: #789;\n box-shadow: 1px 0.5px 1px 0.5px rgba(0, 0, 0, 0.75);\n animation: rain_401 0.8s infinite ease-out;\n}\n\n.drop:nth-child(1) {\n height: 15px;\n top: 5px;\n animation-delay: -1.0s;\n}\n\n.drop:nth-child(2) {\n height: 20px;\n animation-delay: -1.4s;\n}\n\n.drop:nth-child(3) {\n height: 15px;\n top: 5px;\n animation-delay: -1.6s;\n}\n\n.drop:nth-child(4) {\n height: 10px;\n top: 10px;\n animation-delay: -1.2s;\n}\n\n.drop:nth-child(5) {\n height: 5px;\n top: 15px;\n animation-delay: -1.6s;\n}\n\n@keyframes rain_401 {\n 0% {\n opacity: 1;\n transform: translate(0, 0);\n }\n\n 100% {\n opacity: 0.2;\n transform: translate(0, 100px);\n }\n}\n\n.surface {\n position: relative;\n width: 180px;\n height: 140px;\n top: -140px;\n}\n\n.hit {\n position: absolute;\n width: 3px;\n height: 1px;\n margin: 10px;\n bottom: -5px;\n border: 1px solid #456;\n border-radius: 50%;\n animation: hit_401 0.8s infinite ease;\n}\n\n.hit:nth-child(1) {\n left: 19px;\n animation-delay: -0.3s;\n}\n\n.hit:nth-child(2) {\n left: 41px;\n animation-delay: -0.7s;\n}\n\n.hit:nth-child(3) {\n left: 63px;\n animation-delay: -0.9s;\n}\n\n.hit:nth-child(4) {\n left: 85px;\n animation-delay: -0.5s;\n}\n\n.hit:nth-child(5) {\n left: 107px;\n animation-delay: -0.9s;\n}\n\n@keyframes hit_401 {\n 0% {\n opacity: 0.75;\n transform: scale(1);\n }\n\n 100% {\n opacity: 0;\n transform: scale(2.5);\n }\n}"},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"9fc2e8","snapshot":null,"tags":null,"title":"loader by S4tyendra","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":149,"cssLen":1624,"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":".container {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.container .preloader {\n animation: rotate 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;\n}\n\n@keyframes rotate {\n 50% {\n transform: rotate(360deg);\n }\n\n 100% {\n transform: rotate(720deg);\n }\n}\n\n.preloader span {\n --c: #f23f3f;\n position: absolute;\n display: block;\n height: 64px;\n width: 64px;\n background: var(--c);\n border: 1px solid var(--c);\n border-radius: 100%;\n}\n\n.preloader span:nth-child(1) {\n transform: translate(-28px, -28px);\n animation: shape_1 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;\n}\n\n@keyframes shape_1 {\n 60% {\n transform: scale(0.4);\n }\n}\n\n.preloader span:nth-child(2) {\n transform: translate(28px, -28px);\n animation: shape_2 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;\n}\n\n@keyframes shape_2 {\n 40% {\n transform: scale(0.4);\n }\n}\n\n.preloader span:nth-child(3) {\n position: relative;\n border-radius: 0px;\n transform: scale(0.98) rotate(-45deg);\n animation: shape_3 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;\n}\n\n@keyframes shape_3 {\n 50% {\n border-radius: 100%;\n transform: scale(0.5) rotate(-45deg);\n }\n\n 100% {\n transform: scale(0.98) rotate(-45deg);\n }\n}\n\n.shadow {\n position: relative;\n top: 30px;\n left: 50%;\n transform: translateX(-50%);\n display: block;\n height: 16px;\n width: 64px;\n border-radius: 50%;\n background-color: #d9d9d9;\n border: 1px solid #d9d9d9;\n animation: shadow 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;\n}\n\n@keyframes shadow {\n 50% {\n transform: translateX(-50%) scale(0.5);\n border-color: #f2f2f2;\n }\n}\n"},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"d30a01","snapshot":null,"tags":null,"title":"loader by Sourcesketch","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":514,"cssLen":1964,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n\n","css":".container {\n width: 200px;\n height: 200px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n margin: auto;\n filter: url(\"#goo\");\n animation: rotate-move 2s ease-in-out infinite;\n}\n\n.dot {\n width: 70px;\n height: 70px;\n border-radius: 50%;\n background-color: #000;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n}\n\n.dot-3 {\n background-color: #ff1717;\n animation: dot-3-move 2s ease infinite, index 6s ease infinite;\n}\n\n.dot-2 {\n background-color: #0051ff;\n animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;\n}\n\n.dot-1 {\n background-color: #ffc400;\n animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;\n}\n\n@keyframes dot-3-move {\n 20% {\n transform: scale(1);\n }\n 45% {\n transform: translateY(-18px) scale(0.45);\n }\n 60% {\n transform: translateY(-90px) scale(0.45);\n }\n 80% {\n transform: translateY(-90px) scale(0.45);\n }\n 100% {\n transform: translateY(0px) scale(1);\n }\n}\n\n@keyframes dot-2-move {\n 20% {\n transform: scale(1);\n }\n 45% {\n transform: translate(-16px, 12px) scale(0.45);\n }\n 60% {\n transform: translate(-80px, 60px) scale(0.45);\n }\n 80% {\n transform: translate(-80px, 60px) scale(0.45);\n }\n 100% {\n transform: translateY(0px) scale(1);\n }\n}\n\n@keyframes dot-1-move {\n 20% {\n transform: scale(1);\n }\n 45% {\n transform: translate(16px, 12px) scale(0.45);\n }\n 60% {\n transform: translate(80px, 60px) scale(0.45);\n }\n 80% {\n transform: translate(80px, 60px) scale(0.45);\n }\n 100% {\n transform: translateY(0px) scale(1);\n }\n}\n\n@keyframes rotate-move {\n 55% {\n transform: translate(-50%, -50%) rotate(0deg);\n }\n 80% {\n transform: translate(-50%, -50%) rotate(360deg);\n }\n 100% {\n transform: translate(-50%, -50%) rotate(360deg);\n }\n}\n\n@keyframes index {\n 0%,\n 100% {\n z-index: 3;\n }\n 33.3% {\n z-index: 2;\n }\n 66.6% {\n z-index: 1;\n }\n}\n"},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"0e38ed","snapshot":null,"tags":null,"title":"loader by mrhyddenn","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":165,"cssLen":1374,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 6em;\n height: 6em;\n font-size: 10px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.loader .face {\n position: absolute;\n border-radius: 50%;\n border-style: solid;\n animation: animate023845 3s linear infinite;\n}\n\n.loader .face:nth-child(1) {\n width: 100%;\n height: 100%;\n color: gold;\n border-color: currentColor transparent transparent currentColor;\n border-width: 0.2em 0.2em 0em 0em;\n --deg: -45deg;\n animation-direction: normal;\n}\n\n.loader .face:nth-child(2) {\n width: 70%;\n height: 70%;\n color: lime;\n border-color: currentColor currentColor transparent transparent;\n border-width: 0.2em 0em 0em 0.2em;\n --deg: -135deg;\n animation-direction: reverse;\n}\n\n.loader .face .circle {\n position: absolute;\n width: 50%;\n height: 0.1em;\n top: 50%;\n left: 50%;\n background-color: transparent;\n transform: rotate(var(--deg));\n transform-origin: left;\n}\n\n.loader .face .circle::before {\n position: absolute;\n top: -0.5em;\n right: -0.5em;\n content: '';\n width: 1em;\n height: 1em;\n background-color: currentColor;\n border-radius: 50%;\n box-shadow: 0 0 2em,\n 0 0 4em,\n 0 0 6em,\n 0 0 8em,\n 0 0 10em,\n 0 0 0 0.5em rgba(255, 255, 0, 0.1);\n}\n\n@keyframes animate023845 {\n to {\n transform: rotate(1turn);\n }\n}"},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"18c2a2","snapshot":null,"tags":null,"title":"loader by Ratinax","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":118,"cssLen":410,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

","css":".square {\n margin: 2em;\n background-color: white;\n animation: rotate 2s linear infinite;\n}\n\n.container {\n display: flex;\n justify-content: space-between;\n}\n\n@keyframes rotate {\n 0% {\n width: 4em;\n height: 4em;\n }\n\n 50% {\n width: 8em;\n height: 8em;\n transform: rotate(360deg);\n background-color: aqua;\n }\n\n 100% {\n transform: rotate(360deg);\n width: 4em;\n height: 4em;\n }\n}"},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"7958ba","snapshot":null,"tags":null,"title":"loader by cohencoo","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":33,"cssLen":358,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".custom-loader {\n width: 120px;\n height: 22px;\n border-radius: 20px;\n color: #F4BF00;\n border: 2px solid;\n position: relative;\n}\n\n.custom-loader::before {\n content: \"\";\n position: absolute;\n margin: 2px;\n inset: 0 100% 0 0;\n border-radius: inherit;\n background: #F4BF00;\n animation: p6 2s infinite;\n}\n\n@keyframes p6 {\n 100% {\n inset: 0\n }\n}"},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"df2ba2","snapshot":null,"tags":null,"title":"loader by Saiyed-Tanvir","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":23,"cssLen":629,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".box {\n height: 5cm;\n width: 5cm;\n border: 5px solid #ffa600;\n box-shadow: inset 0 0 0 #ffa600;\n animation: load 2s ease-in-out infinite;\n}\n\n@keyframes load {\n 0% {\n box-shadow: inset -5cm -2.5cm 0 #ffa600;\n }\n\n 25% {\n box-shadow: inset 5cm -2.5cm 0 #ffa600;\n }\n\n 25.01% {\n box-shadow: inset 2.5cm -5cm 0 #ffa600;\n }\n\n 50% {\n box-shadow: inset 2.5cm 5cm 0 #ffa600;\n }\n\n 50.01% {\n box-shadow: inset 5cm 2.5cm 0 #ffa600;\n }\n\n 75% {\n box-shadow: inset -5cm 2.5cm 0 #ffa600;\n }\n\n 75.01% {\n box-shadow: inset -2.5cm 5cm 0 #ffa600;\n }\n\n 100% {\n box-shadow: inset -2.5cm -5cm 0 #ffa600;\n }\n}"}]}},"actionData":null,"errors":null}