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

\n","css":".spinner-container {\n position: relative;\n width: 100px;\n height: 100px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n}\n\n.spinner-inner {\n position: relative;\n width: 60px;\n height: 60px;\n border-radius: 50%;\n box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2), -10px -10px 20px 0px rgba(255, 255, 255, 0.5);\n}\n\n.spinner-outer {\n position: relative;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n box-shadow: -10px -10px 20px 0px rgba(255, 255, 255, 0.5), 10px 10px 20px 0px rgba(0, 0, 0, 0.2);\n animation: spinner-rotate_51023 2s ease infinite;\n}\n\n.spinner-inner-1 {\n position: absolute;\n top: 10px;\n left: 10px;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.2);\n box-shadow: 10px 10px 20px 0px rgba(0, 0, 0\n 0.2), -10px -10px 20px 0px rgba(255, 255, 255, 0.5);\n z-index: 10;\n animation: spinner-rotate_51023 2s ease infinite;\n}\n\n.spinner-inner-2 {\n position: absolute;\n top: 10px;\n right: 10px;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.2);\n box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2), -10px -10px 20px 0px rgba(255, 255, 255, 0.5);\n z-index: 10;\n animation: spinner-rotate_51023 2s ease infinite;\n}\n\n.spinner-inner-3 {\n position: absolute;\n bottom: 10px;\n left: 10px;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.2);\n box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2), -10px -10px 20px 0px rgba(255, 255, 255, 0.5);\n z-index: 10;\n animation: spinner-rotate_51023 2s ease infinite;\n}\n\n.spinner-inner-4 {\n position: absolute;\n bottom: 10px;\n right: 10px;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.2);\n box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2), -10px -10px 20px 0px rgba(255, 255, 255, 0.5);\n z-index: 10;\n animation: spinner-rotate_51023 2s ease infinite;\n}\n\n@keyframes spinner-rotate_51023 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:25.000Z","isPrivate":0,"projectId":"4ca22d","snapshot":null,"tags":null,"title":"loader by adamgiebl","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":952,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n width: 64px;\n height: 64px;\n position: relative;\n background: #f4f4f4;\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: #2e86de;\n box-shadow: 32px -34px 0 5px #0097e6;\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: #0097e6;\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}"},{"created":"2024-01-22T16:54:25.000Z","isPrivate":0,"projectId":"d4489e","snapshot":null,"tags":null,"title":"loader by JulioCodesSM","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":672,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":"/* From uiverse.io by @JulioCodesSM */\n.loader {\n width: 50px;\n height: 50px;\n position: relative;\n transform: translateX(-25px);\n /* Compensating for the left of 50px in the keyframe. */\n}\n\n.loader::before,\n.loader::after {\n content: '';\n position: absolute;\n width: inherit;\n height: inherit;\n border-radius: 50%;\n mix-blend-mode: multiply;\n animation: rotate9 1s infinite cubic-bezier(0.77, 0, 0.175, 1);\n}\n\n.loader::before {\n background-color: #fc3f9e;\n}\n\n.loader::after {\n background-color: #50e8f3;\n animation-delay: .5s;\n}\n\n@keyframes rotate9 {\n 0%,100% {\n left: 50px;\n }\n\n 25% {\n transform: scale(.3);\n }\n\n 50% {\n left: 0;\n }\n\n 75% {\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T16:54:25.000Z","isPrivate":0,"projectId":"88f250","snapshot":null,"tags":null,"title":"loader by Pradeepsaranbishnoi","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":294,"cssLen":1134,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Microsoft

WindowsXP

Professional

","css":".container {\n width: 150px;\n height: 10px;\n border: 2px solid #b2b2b2;\n border-radius: 7px;\n margin: 0 auto;\n padding: 2px 1px;\n overflow: hidden;\n font-size: 0;\n}\n\n.box {\n width: 9px;\n height: 100%;\n background: linear-gradient(to bottom, #2838c7 0%,#5979ef 17%,#869ef3 32%,#869ef3 45%,#5979ef 59%,#2838c7 100%);\n display: inline-block;\n margin-right: 2px;\n animation: loader 2s infinite;\n animation-timing-function: linear;\n}\n\n.logo {\n width: 220px;\n margin: 50px auto;\n margin-top: 20px;\n}\n\n.logo p {\n margin: 0;\n padding: 0;\n}\n\n.top {\n font-size: 16px;\n font-weight: 300;\n line-height: 16px;\n}\n\n.top:after {\n content: \"\\00a9\";\n font-size: 10px;\n position: relative;\n top: -5px;\n margin-left: 2px;\n}\n\n.mid {\n font-size: 46px;\n font-weight: 700;\n line-height: 36px;\n}\n\n.mid span {\n font-size: 22px;\n display: inline-block;\n vertical-align: top;\n color: #FF6821;\n margin-top: -8px;\n}\n\n.logo .bottom {\n font-size: 30px;\n font-weight: 300;\n line-height: 30px;\n margin-left: 5px;\n}\n\n@keyframes loader {\n 0% {\n transform: translate(-30px);\n }\n\n 100% {\n transform: translate(150px);\n }\n}\n"},{"created":"2024-01-22T16:54:25.000Z","isPrivate":0,"projectId":"05a00c","snapshot":null,"tags":null,"title":"loader by aadium","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2768,"cssLen":677,"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","css":".loader {\n overflow: hidden;\n position: relative;\n}\n\n.wheel {\n fill: rgb(128, 128, 128);\n font-size: 100px;\n width: 100px;\n height: 100px;\n border-radius: 6em;\n text-align: center;\n animation: rolling 1s linear infinite;\n}\n\n#rim {\n fill: rgb(126, 126, 126);\n}\n\n#tire {\n fill: rgb(55, 55, 55);\n}\n\n.road {\n position: absolute;\n margin-top: -4px;\n width: 100%;\n height: 10px;\n border-radius: 5em;\n background-color: rgb(55, 55, 55);\n animation: road-move 2s linear infinite;\n}\n\n@keyframes rolling {\n to {\n transform: rotate(-360deg);\n }\n}\n\n@keyframes road-move {\n from {\n transform: translateX(-140%);\n }\n\n to {\n transform: translateX(100%);\n }\n}\n"},{"created":"2024-01-22T16:54:25.000Z","isPrivate":0,"projectId":"6c4832","snapshot":null,"tags":null,"title":"loader by mrhyddenn","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":77,"cssLen":707,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n uiverse\n uiverse\n

","css":".loader {\n position: relative;\n}\n\n.loader span {\n position: absolute;\n color: #fff;\n transform: translate(-50%, -50%);\n font-size: 38px;\n letter-spacing: 5px;\n}\n\n.loader span:nth-child(1) {\n color: transparent;\n -webkit-text-stroke: 0.3px rgb(128, 198, 255);\n}\n\n.loader span:nth-child(2) {\n color: rgb(128, 198, 255);\n -webkit-text-stroke: 1px rgb(128, 198, 255);\n animation: uiverse723 3s ease-in-out infinite;\n}\n\n@keyframes uiverse723 {\n 0%, 100% {\n clip-path: polygon(0% 45%, 15% 44%, 32% 50%, \n 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);\n }\n\n 50% {\n clip-path: polygon(0% 60%, 16% 65%, 34% 66%, \n 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);\n }\n}"},{"created":"2024-01-22T16:54:25.000Z","isPrivate":0,"projectId":"ef3297","snapshot":null,"tags":null,"title":"loader by adilsarfraz02","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":34,"cssLen":856,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".custom-loader {\n width: 40px;\n height: 10px;\n color: #f000b4;\n background: radial-gradient(farthest-side, currentColor 90%, #0000) left /\n 10px 10px,\n radial-gradient(farthest-side, currentColor 90%, #0000) center/10px 10px,\n radial-gradient(farthest-side, currentColor 90%, #0000) right / 10px 10px,\n linear-gradient(currentColor 0 0) center/100% 4px;\n background-repeat: no-repeat;\n position: relative;\n animation: s6 2s infinite linear;\n}\n.custom-loader:before,\n.custom-loader:after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: inherit;\n animation: inherit;\n --s: calc(50% - 5px);\n animation-direction: reverse;\n}\n.custom-loader:after {\n --s: calc(5px - 50%);\n}\n\n@keyframes s6 {\n 0% {\n transform: translate(var(--s, 0)) rotate(0);\n }\n 100% {\n transform: translate(var(--s, 0)) rotate(1turn);\n }\n}\n"},{"created":"2024-01-22T16:54:25.000Z","isPrivate":0,"projectId":"e58341","snapshot":null,"tags":null,"title":"loader by csozidev","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1348,"cssLen":679,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Works with any svg logo

\n \n

","css":"/* SVG loader made by: csozi | Website: www.csozi.hu*/\n\n/*You dont need this \"p\" style*/\n.text {\n font-weight: bolder;\n font-size: 17px;\n color: black;\n position: absolute;\n translate: -50% 0px;\n left: 50%;\n text-align: center;\n}\n\n.loader {\n overflow: visible;\n height: fit-content;\n width: fit-content;\n padding: 20px;\n display: flex;\n}\n\n.logo {\n fill: none;\n stroke-dasharray: 20px;\n /*<-- Play with this number until it look cool */\n stroke: black;\n animation: load 15s infinite linear;\n}\n\n@keyframes load {\n 0% {\n stroke-dashoffset: 0px;\n }\n\n 100% {\n stroke-dashoffset: 200px;\n /* <-- This number should always be 10 times the number up there*/\n }\n}"},{"created":"2024-01-22T16:54:25.000Z","isPrivate":0,"projectId":"9fe0f5","snapshot":null,"tags":null,"title":"loader by Alderx","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":472,"cssLen":2065,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n ","css":"/* heart beat */\n.heartbeatloader {\n position: absolute;\n width: 10vmin;\n height: 10vmin;\n z-index: -2;\n margin: auto;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n}\n\n.svgdraw {\n top: 30%;\n left: 26%;\n position: absolute;\n width: 50%;\n height: 50%;\n color: #fff;\n transform: scale(1.4);\n z-index: 3;\n}\n\n.path {\n stroke: rgba(255, 255, 255, 0.95);\n stroke-width: 4;\n stroke-dasharray: 1000px;\n stroke-dashoffset: 1000px;\n animation: draw 1.5s infinite forwards normal linear;\n animation-delay: 0.1s;\n position: relative;\n}\n\n@keyframes draw {\n to {\n stroke-dashoffset: 0;\n }\n}\n\n.innercircle {\n position: absolute;\n top: 17%;\n left: 100.5%;\n transform: translate(-50%, -50%) scale(1.2);\n width: 160%;\n height: auto;\n z-index: 1;\n opacity: 0.97;\n animation: innerbeat 1.5s infinite linear forwards;\n}\n\n.innercircle:before,\n.innercircle:after {\n position: absolute;\n content: \"\";\n left: 25%;\n top: 0;\n width: 25%;\n height: auto;\n padding-bottom: 40%;\n background: rgb(225, 95, 95);\n border-radius: 50px 50px 0 0;\n transform: rotate(-45deg);\n transform-origin: 0 100%;\n}\n\n.innercircle:after {\n left: 0;\n transform: rotate(45deg);\n transform-origin: 100% 100%;\n}\n\n@keyframes innerbeat {\n 0% {\n transform: translate(-50%, -50%) scale(1.2);\n }\n\n 10% {\n transform: translate(-50%, -50%) scale(1.2);\n }\n\n 50% {\n transform: translate(-50%, -50%) scale(1.3);\n }\n\n 60% {\n transform: translate(-50%, -50%) scale(1.25);\n }\n\n 75% {\n transform: translate(-50%, -50%) scale(1.3);\n }\n}\n\n.outercircle {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: rgba(238, 92, 92, 0.9);\n box-shadow: 0 0 30px 0px #fff;\n position: absolute;\n z-index: -1;\n opacity: 0.7;\n top: 0;\n left: 0;\n transform: scale(1.2);\n animation: outerbeat 1.5s infinite linear forwards;\n}\n\n@keyframes outerbeat {\n 0% {\n transform: scale(1.2);\n }\n\n 10% {\n transform: scale(1.2);\n }\n\n 50% {\n transform: scale(1.3);\n }\n\n 60% {\n transform: scale(1.25);\n }\n\n 75% {\n transform: scale(1.3);\n }\n}"},{"created":"2024-01-22T16:54:25.000Z","isPrivate":0,"projectId":"3120bb","snapshot":null,"tags":null,"title":"loader by Srivatsajbhat","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":370,"cssLen":14829,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n","css":"#loader {\n width: 80px;\n height: 40px;\n position: absolute;\n top: 50%;\n left: 50%;\n margin: -20px -40px;\n z-index: 1000;\n}\n\n.lightsaber {\n position: absolute;\n width: 4px;\n height: 12px;\n background-color: #666;\n border-radius: 1px;\n bottom: 0;\n}\n\n.lightsaber.ls-left {\n left: 0;\n}\n\n.lightsaber.ls-right {\n right: 0;\n}\n\n.lightsaber:before {\n position: absolute;\n content: ' ';\n display: block;\n width: 2px;\n height: 25px;\n max-height: 1px;\n left: 1px;\n top: 1px;\n background-color: #fff;\n border-radius: 1px;\n -webkit-transform: rotateZ(180deg);\n transform: rotateZ(180deg);\n -webkit-transform-origin: center top;\n -ms-transform-origin: center top;\n transform-origin: center top;\n}\n\n.lightsaber:after {\n position: absolute;\n content: ' ';\n display: block;\n width: 2px;\n height: 2px;\n left: 1px;\n top: 4px;\n background-color: #fff;\n border-radius: 50%;\n}\n\n.ls-particles {\n position: absolute;\n left: 42px;\n top: 10px;\n width: 1px;\n height: 5px;\n background-color: rgb(51, 51, 51, 0);\n -webkit-transform: rotateZ(0deg);\n transform: rotateZ(0deg);\n}\n\n.lightsaber.ls-green:before {\n -webkit-animation: showlightgreen 2s ease-in-out infinite 1s;\n animation: showlightgreen 2s ease-in-out infinite 1s;\n}\n\n.lightsaber.ls-red:before {\n -webkit-animation: showlightred 2s ease-in-out infinite 1s;\n animation: showlightred 2s ease-in-out infinite 1s;\n}\n\n.lightsaber.ls-left {\n -webkit-animation: fightleft 2s ease-in-out infinite 1s;\n animation: fightleft 2s ease-in-out infinite 1s;\n}\n\n.lightsaber.ls-right {\n -webkit-animation: fightright 2s ease-in-out infinite 1s;\n animation: fightright 2s ease-in-out infinite 1s;\n}\n\n.ls-particles.ls-part-1 {\n -webkit-animation: particles1 2s ease-out infinite 1s;\n animation: particles1 2s ease-out infinite 1s;\n}\n\n.ls-particles.ls-part-2 {\n -webkit-animation: particles2 2s ease-out infinite 1s;\n animation: particles2 2s ease-out infinite 1s;\n}\n\n.ls-particles.ls-part-3 {\n -webkit-animation: particles3 2s ease-out infinite 1s;\n animation: particles3 2s ease-out infinite 1s;\n}\n\n.ls-particles.ls-part-4 {\n -webkit-animation: particles4 2s ease-out infinite 1s;\n animation: particles4 2s ease-out infinite 1s;\n}\n\n.ls-particles.ls-part-5 {\n -webkit-animation: particles5 2s ease-out infinite 1s;\n animation: particles5 2s ease-out infinite 1s;\n}\n\n@-webkit-keyframes showlightgreen {\n 0% {\n max-height: 0;\n box-shadow: 0 0 0 0 #87c054;\n }\n\n 5% {\n box-shadow: 0 0 4px 2px #87c054;\n }\n\n 10% {\n max-height: 22px;\n }\n\n 80% {\n max-height: 22px;\n }\n\n 85% {\n box-shadow: 0 0 4px 2px #87c054;\n }\n\n 100% {\n max-height: 0;\n box-shadow: 0 0 0 0 #87c054;\n }\n}\n\n@-webkit-keyframes showlightred {\n 0% {\n max-height: 0;\n box-shadow: 0 0 0 0 #f06363;\n }\n\n 20% {\n box-shadow: 0 0 4px 2px #f06363;\n }\n\n 25% {\n max-height: 22px;\n }\n\n 80% {\n max-height: 22px;\n }\n\n 85% {\n box-shadow: 0 0 4px 2px #f06363;\n }\n\n 100% {\n max-height: 0;\n box-shadow: 0 0 0 0 #f06363;\n }\n}\n\n@-webkit-keyframes fightleft {\n 0% {\n -webkit-transform: rotateZ(0deg);\n transform: rotateZ(0deg);\n left: 0;\n bottom: 0;\n }\n\n 30% {\n -webkit-transform: rotateZ(0deg);\n transform: rotateZ(0deg);\n bottom: 0;\n }\n\n 40% {\n -webkit-transform: rotateZ(45deg);\n transform: rotateZ(45deg);\n left: 0;\n bottom: 2px;\n }\n\n 45% {\n -webkit-transform: rotateZ(65deg);\n transform: rotateZ(65deg);\n left: 0;\n }\n\n 65% {\n -webkit-transform: rotateZ(410deg);\n transform: rotateZ(410deg);\n left: 30px;\n bottom: 10px;\n }\n\n 95% {\n -webkit-transform: rotateZ(410deg);\n transform: rotateZ(410deg);\n left: 0;\n bottom: 0;\n }\n\n 100% {\n -webkit-transform: rotateZ(360deg);\n transform: rotateZ(360deg);\n left: 0;\n bottom: 0;\n }\n}\n\n@-webkit-keyframes fightright {\n 0% {\n -webkit-transform: rotateZ(0deg);\n transform: rotateZ(0deg);\n right: 0;\n bottom: 0;\n }\n\n 30% {\n -webkit-transform: rotateZ(0deg);\n transform: rotateZ(0deg);\n bottom: 0;\n }\n\n 45% {\n -webkit-transform: rotateZ(-45deg);\n transform: rotateZ(-45deg);\n right: 0;\n bottom: 2px;\n }\n\n 50% {\n -webkit-transform: rotateZ(-65deg);\n transform: rotateZ(-65deg);\n right: 0;\n }\n\n 68% {\n -webkit-transform: rotateZ(-410deg);\n transform: rotateZ(-410deg);\n right: 27px;\n bottom: 13px;\n }\n\n 95% {\n -webkit-transform: rotateZ(-410deg);\n transform: rotateZ(-410deg);\n right: 0;\n bottom: 0;\n }\n\n 100% {\n -webkit-transform: rotateZ(-360deg);\n transform: rotateZ(-360deg);\n right: 0;\n bottom: 0;\n }\n}\n\n@-webkit-keyframes particles1 {\n 0% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(35deg) translateY(0px);\n transform: rotateZ(35deg) translateY(0px);\n }\n\n 63% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(35deg) translateY(0px);\n transform: rotateZ(35deg) translateY(0px);\n }\n\n 64% {\n background-color: rgba(51, 51, 51,1);\n -webkit-transform: rotateZ(35deg) translateY(0px);\n transform: rotateZ(35deg) translateY(0px);\n }\n\n 100% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(35deg) translateY(-30px);\n transform: rotateZ(35deg) translateY(-30px);\n }\n}\n\n@-webkit-keyframes particles2 {\n 0% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-65deg) translateY(0px);\n transform: rotateZ(-65deg) translateY(0px);\n }\n\n 63% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-65deg) translateY(0px);\n transform: rotateZ(-65deg) translateY(0px);\n }\n\n 64% {\n background-color: rgba(51, 51, 51,1);\n -webkit-transform: rotateZ(-65deg) translateY(0px);\n transform: rotateZ(-65deg) translateY(0px);\n }\n\n 95% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-65deg) translateY(-40px);\n transform: rotateZ(-65deg) translateY(-40px);\n }\n\n 100% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-65deg) translateY(-40px);\n transform: rotateZ(-65deg) translateY(-40px);\n }\n}\n\n@-webkit-keyframes particles3 {\n 0% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-75deg) translateY(0px);\n transform: rotateZ(-75deg) translateY(0px);\n }\n\n 63% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-75deg) translateY(0px);\n transform: rotateZ(-75deg) translateY(0px);\n }\n\n 64% {\n background-color: rgba(51, 51, 51,1);\n -webkit-transform: rotateZ(-75deg) translateY(0px);\n transform: rotateZ(-75deg) translateY(0px);\n }\n\n 97% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-75deg) translateY(-35px);\n transform: rotateZ(-75deg) translateY(-35px);\n }\n\n 100% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-75deg) translateY(-35px);\n transform: rotateZ(-75deg) translateY(-35px);\n }\n}\n\n@-webkit-keyframes particles4 {\n 0% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-25deg) translateY(0px);\n transform: rotateZ(-25deg) translateY(0px);\n }\n\n 63% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-25deg) translateY(0px);\n transform: rotateZ(-25deg) translateY(0px);\n }\n\n 64% {\n background-color: rgba(51, 51, 51,1);\n -webkit-transform: rotateZ(-25deg) translateY(0px);\n transform: rotateZ(-25deg) translateY(0px);\n }\n\n 97% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-25deg) translateY(-30px);\n transform: rotateZ(-25deg) translateY(-30px);\n }\n\n 100% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-25deg) translateY(-30px);\n transform: rotateZ(-25deg) translateY(-30px);\n }\n}\n\n@-webkit-keyframes particles5 {\n 0% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(65deg) translateY(0px);\n transform: rotateZ(65deg) translateY(0px);\n }\n\n 63% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(65deg) translateY(0px);\n transform: rotateZ(65deg) translateY(0px);\n }\n\n 64% {\n background-color: rgba(51, 51, 51,1);\n -webkit-transform: rotateZ(65deg) translateY(0px);\n transform: rotateZ(65deg) translateY(0px);\n }\n\n 97% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(65deg) translateY(-35px);\n transform: rotateZ(65deg) translateY(-35px);\n }\n\n 100% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(65deg) translateY(-35px);\n transform: rotateZ(65deg) translateY(-35px);\n }\n}\n\n@keyframes showlightgreen {\n 0% {\n max-height: 0;\n box-shadow: 0 0 0 0 #87c054;\n }\n\n 5% {\n box-shadow: 0 0 4px 2px #87c054;\n }\n\n 10% {\n max-height: 22px;\n }\n\n 80% {\n max-height: 22px;\n }\n\n 85% {\n box-shadow: 0 0 4px 2px #87c054;\n }\n\n 100% {\n max-height: 0;\n box-shadow: 0 0 0 0 #87c054;\n }\n}\n\n@keyframes showlightred {\n 0% {\n max-height: 0;\n box-shadow: 0 0 0 0 #f06363;\n }\n\n 20% {\n box-shadow: 0 0 4px 2px #f06363;\n }\n\n 25% {\n max-height: 22px;\n }\n\n 80% {\n max-height: 22px;\n }\n\n 85% {\n box-shadow: 0 0 4px 2px #f06363;\n }\n\n 100% {\n max-height: 0;\n box-shadow: 0 0 0 0 #f06363;\n }\n}\n\n@keyframes fightleft {\n 0% {\n -webkit-transform: rotateZ(0deg);\n transform: rotateZ(0deg);\n left: 0;\n bottom: 0;\n }\n\n 30% {\n -webkit-transform: rotateZ(0deg);\n transform: rotateZ(0deg);\n bottom: 0;\n }\n\n 40% {\n -webkit-transform: rotateZ(45deg);\n transform: rotateZ(45deg);\n left: 0;\n bottom: 2px;\n }\n\n 45% {\n -webkit-transform: rotateZ(65deg);\n transform: rotateZ(65deg);\n left: 0;\n }\n\n 65% {\n -webkit-transform: rotateZ(410deg);\n transform: rotateZ(410deg);\n left: 30px;\n bottom: 10px;\n }\n\n 95% {\n -webkit-transform: rotateZ(410deg);\n transform: rotateZ(410deg);\n left: 0;\n bottom: 0;\n }\n\n 100% {\n -webkit-transform: rotateZ(360deg);\n transform: rotateZ(360deg);\n left: 0;\n bottom: 0;\n }\n}\n\n@keyframes fightright {\n 0% {\n -webkit-transform: rotateZ(0deg);\n transform: rotateZ(0deg);\n right: 0;\n bottom: 0;\n }\n\n 30% {\n -webkit-transform: rotateZ(0deg);\n transform: rotateZ(0deg);\n bottom: 0;\n }\n\n 45% {\n -webkit-transform: rotateZ(-45deg);\n transform: rotateZ(-45deg);\n right: 0;\n bottom: 2px;\n }\n\n 50% {\n -webkit-transform: rotateZ(-65deg);\n transform: rotateZ(-65deg);\n right: 0;\n }\n\n 68% {\n -webkit-transform: rotateZ(-410deg);\n transform: rotateZ(-410deg);\n right: 27px;\n bottom: 13px;\n }\n\n 95% {\n -webkit-transform: rotateZ(-410deg);\n transform: rotateZ(-410deg);\n right: 0;\n bottom: 0;\n }\n\n 100% {\n -webkit-transform: rotateZ(-360deg);\n transform: rotateZ(-360deg);\n right: 0;\n bottom: 0;\n }\n}\n\n@keyframes particles1 {\n 0% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(35deg) translateY(0px);\n transform: rotateZ(35deg) translateY(0px);\n }\n\n 63% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(35deg) translateY(0px);\n transform: rotateZ(35deg) translateY(0px);\n }\n\n 64% {\n background-color: rgba(51, 51, 51,1);\n -webkit-transform: rotateZ(35deg) translateY(0px);\n transform: rotateZ(35deg) translateY(0px);\n }\n\n 100% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(35deg) translateY(-30px);\n transform: rotateZ(35deg) translateY(-30px);\n }\n}\n\n@keyframes particles2 {\n 0% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-65deg) translateY(0px);\n transform: rotateZ(-65deg) translateY(0px);\n }\n\n 63% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-65deg) translateY(0px);\n transform: rotateZ(-65deg) translateY(0px);\n }\n\n 64% {\n background-color: rgba(51, 51, 51,1);\n -webkit-transform: rotateZ(-65deg) translateY(0px);\n transform: rotateZ(-65deg) translateY(0px);\n }\n\n 95% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-65deg) translateY(-40px);\n transform: rotateZ(-65deg) translateY(-40px);\n }\n\n 100% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-65deg) translateY(-40px);\n transform: rotateZ(-65deg) translateY(-40px);\n }\n}\n\n@keyframes particles3 {\n 0% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-75deg) translateY(0px);\n transform: rotateZ(-75deg) translateY(0px);\n }\n\n 63% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-75deg) translateY(0px);\n transform: rotateZ(-75deg) translateY(0px);\n }\n\n 64% {\n background-color: rgba(51, 51, 51,1);\n -webkit-transform: rotateZ(-75deg) translateY(0px);\n transform: rotateZ(-75deg) translateY(0px);\n }\n\n 97% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-75deg) translateY(-35px);\n transform: rotateZ(-75deg) translateY(-35px);\n }\n\n 100% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-75deg) translateY(-35px);\n transform: rotateZ(-75deg) translateY(-35px);\n }\n}\n\n@keyframes particles4 {\n 0% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-25deg) translateY(0px);\n transform: rotateZ(-25deg) translateY(0px);\n }\n\n 63% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-25deg) translateY(0px);\n transform: rotateZ(-25deg) translateY(0px);\n }\n\n 64% {\n background-color: rgba(51, 51, 51,1);\n -webkit-transform: rotateZ(-25deg) translateY(0px);\n transform: rotateZ(-25deg) translateY(0px);\n }\n\n 97% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-25deg) translateY(-30px);\n transform: rotateZ(-25deg) translateY(-30px);\n }\n\n 100% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(-25deg) translateY(-30px);\n transform: rotateZ(-25deg) translateY(-30px);\n }\n}\n\n@keyframes particles5 {\n 0% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(65deg) translateY(0px);\n transform: rotateZ(65deg) translateY(0px);\n }\n\n 63% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(65deg) translateY(0px);\n transform: rotateZ(65deg) translateY(0px);\n }\n\n 64% {\n background-color: rgba(51, 51, 51,1);\n -webkit-transform: rotateZ(65deg) translateY(0px);\n transform: rotateZ(65deg) translateY(0px);\n }\n\n 97% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(65deg) translateY(-35px);\n transform: rotateZ(65deg) translateY(-35px);\n }\n\n 100% {\n background-color: rgba(51, 51, 51,0);\n -webkit-transform: rotateZ(65deg) translateY(-35px);\n transform: rotateZ(65deg) translateY(-35px);\n }\n}\n\n\n\n"},{"created":"2024-01-22T16:54:25.000Z","isPrivate":0,"projectId":"c7b4b9","snapshot":null,"tags":null,"title":"loader by Pradeepsaranbishnoi","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":179,"cssLen":2216,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Loading . . .

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

","css":".loader {\n width: 50px;\n height: 50px;\n position: relative;\n z-index: 1;\n transform: translateX(-50%);\n}\n\n.loader::before, \n.loader::after {\n content: '';\n position: absolute;\n width: inherit;\n height: inherit;\n border-radius: 50%;\n mix-blend-mode: multiply;\n animation: rotate92523 2s infinite cubic-bezier(0.77, 0, 0.175, 1);\n}\n\n.loader::before {\n background-color: #75e2ff;\n}\n\n.loader::after {\n background-color: #ff8496;\n animation-delay: 1s;\n}\n\n@keyframes rotate92523 {\n 0%, 100% {\n left: 35px;\n }\n\n 25% {\n transform: scale(.3);\n }\n\n 50% {\n left: 0%;\n }\n\n 75% {\n transform: scale(1);\n }\n}"}]}},"actionData":null,"errors":null}