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

\n\n","css":".spinner {\n background-image: linear-gradient(rgb(0, 144, 255) 35%, rgb(0, 0, 255));\n width: 100px;\n height: 100px;\n animation: spinning82341 1.7s linear infinite;\n text-align: center;\n border-radius: 50px;\n filter: blur(1px);\n box-shadow: 0px -5px 20px 0px rgb(0, 144, 255), 0px 5px 20px 0px rgb(0, 0, 255);\n position: relative;\n}\n\n.spinner1 {\n background-color: rgb(0, 0, 255);\n width: 100px;\n height: 100px;\n border-radius: 50px;\n filter: blur(10px);\n animation: flickeringGlow 2s linear infinite;\n}\n\n.circle {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 10px;\n height: 10px;\n background-color: white;\n border-radius: 50%;\n}\n\n@keyframes spinning82341 {\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes flickeringGlow {\n 0% {\n box-shadow: 0px -10px 40px 0px rgb(0, 144, 255), 0px 10px 40px 0px rgb(0, 0, 255), 0px 0px 20px 0px white;\n }\n \n /* ...rest of the keyframes remain the same... */\n}\n"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"188db9","snapshot":null,"tags":null,"title":"loader by abrahamcalsin","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":96,"cssLen":1318,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loaderRectangle {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 0 3px;\n}\n\n.loaderRectangle div {\n width: 10px;\n height: 16px;\n animation: .9s ease-in-out infinite;\n background: #183153;\n box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);\n}\n\n.loaderRectangle div:nth-child(1) {\n animation-name: rectangleOneAnim;\n animation-delay: 1s;\n}\n\n@keyframes rectangleOneAnim {\n 0% {\n height: 15px;\n }\n\n 40% {\n height: 30px;\n }\n\n 100% {\n height: 15px;\n }\n}\n\n.loaderRectangle div:nth-child(2) {\n animation-name: rectangleTwoAnim;\n animation-delay: 1.1s;\n}\n\n@keyframes rectangleTwoAnim {\n 0% {\n height: 15px;\n }\n\n 40% {\n height: 40px;\n }\n\n 100% {\n height: 15px;\n }\n}\n\n.loaderRectangle div:nth-child(3) {\n animation-name: rectangleThreeAnim;\n animation-delay: 1.2s;\n}\n\n@keyframes rectangleThreeAnim {\n 0% {\n height: 15px;\n }\n\n 40% {\n height: 50px;\n }\n\n 100% {\n height: 15px;\n }\n}\n\n.loaderRectangle div:nth-child(4) {\n animation-name: rectangleFourAnim;\n animation-delay: 1.3s;\n}\n\n@keyframes rectangleFourAnim {\n 0% {\n height: 15px;\n }\n\n 40% {\n height: 40px;\n }\n\n 100% {\n height: 15px;\n }\n}\n\n.loaderRectangle div:nth-child(5) {\n animation-name: rectangleFiveAnim;\n animation-delay: 1.4s;\n}\n\n@keyframes rectangleFiveAnim {\n 0% {\n height: 15px;\n }\n\n 40% {\n height: 30px;\n }\n\n 100% {\n height: 15px;\n }\n}"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"db1eaa","snapshot":null,"tags":null,"title":"loader by SouravBandyopadhyay","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":223,"cssLen":6861,"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\n\t\t\n\t

\n\t

","css":".cssload-main {\n position: absolute;\n content: '';\n left: 50%;\n transform: translate(-100%, -240%);\n -o-transform: translate(-100%, -240%);\n -ms-transform: translate(-100%, -240%);\n -webkit-transform: translate(-100%, -240%);\n -moz-transform: translate(-100%, -240%);\n}\n\n.cssload-main * {\n font-size: 62px;\n}\n\n.cssload-heart {\n animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n -o-animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n -ms-animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n -webkit-animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n -moz-animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n top: 50%;\n content: '';\n left: 50%;\n position: absolute;\n}\n\n.cssload-heartL {\n width: 1em;\n height: 1em;\n border: 1px solid rgb(252, 0, 101);\n background-color: rgb(252, 0, 101);\n content: '';\n position: absolute;\n display: block;\n border-radius: 100%;\n animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n -o-animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n -ms-animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n -webkit-animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n -moz-animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n transform: translate(-28px, -27px);\n -o-transform: translate(-28px, -27px);\n -ms-transform: translate(-28px, -27px);\n -webkit-transform: translate(-28px, -27px);\n -moz-transform: translate(-28px, -27px);\n}\n\n.cssload-heartR {\n width: 1em;\n height: 1em;\n border: 1px solid rgb(252, 0, 101);\n background-color: rgb(252, 0, 101);\n content: '';\n position: absolute;\n display: block;\n border-radius: 100%;\n transform: translate(28px, -27px);\n -o-transform: translate(28px, -27px);\n -ms-transform: translate(28px, -27px);\n -webkit-transform: translate(28px, -27px);\n -moz-transform: translate(28px, -27px);\n animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n -o-animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n -ms-animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n -webkit-animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n -moz-animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n}\n\n.cssload-square {\n width: 1em;\n height: 1em;\n border: 1px solid rgb(252, 0, 101);\n background-color: rgb(252, 0, 101);\n position: relative;\n display: block;\n content: '';\n transform: scale(1) rotate(-45deg);\n -o-transform: scale(1) rotate(-45deg);\n -ms-transform: scale(1) rotate(-45deg);\n -webkit-transform: scale(1) rotate(-45deg);\n -moz-transform: scale(1) rotate(-45deg);\n animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n -o-animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n -ms-animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n -webkit-animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n -moz-animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n}\n\n.cssload-shadow {\n top: 97px;\n left: 50%;\n content: '';\n position: relative;\n display: block;\n bottom: -.5em;\n width: 1em;\n height: .24em;\n background-color: rgb(215,215,215);\n border: 1px solid rgb(215,215,215);\n border-radius: 50%;\n animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n -o-animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n -ms-animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n -webkit-animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n -moz-animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;\n}\n\n@keyframes cssload-square {\n 50% {\n border-radius: 100%;\n transform: scale(0.5) rotate(-45deg);\n }\n\n 100% {\n transform: scale(1) rotate(-45deg);\n }\n}\n\n@-o-keyframes cssload-square {\n 50% {\n border-radius: 100%;\n -o-transform: scale(0.5) rotate(-45deg);\n }\n\n 100% {\n -o-transform: scale(1) rotate(-45deg);\n }\n}\n\n@-ms-keyframes cssload-square {\n 50% {\n border-radius: 100%;\n -ms-transform: scale(0.5) rotate(-45deg);\n }\n\n 100% {\n -ms-transform: scale(1) rotate(-45deg);\n }\n}\n\n@-webkit-keyframes cssload-square {\n 50% {\n border-radius: 100%;\n -webkit-transform: scale(0.5) rotate(-45deg);\n }\n\n 100% {\n -webkit-transform: scale(1) rotate(-45deg);\n }\n}\n\n@-moz-keyframes cssload-square {\n 50% {\n border-radius: 100%;\n -moz-transform: scale(0.5) rotate(-45deg);\n }\n\n 100% {\n -moz-transform: scale(1) rotate(-45deg);\n }\n}\n\n@keyframes cssload-heart {\n 50% {\n transform: rotate(360deg);\n }\n\n 100% {\n transform: rotate(720deg);\n }\n}\n\n@-o-keyframes cssload-heart {\n 50% {\n -o-transform: rotate(360deg);\n }\n\n 100% {\n -o-transform: rotate(720deg);\n }\n}\n\n@-ms-keyframes cssload-heart {\n 50% {\n -ms-transform: rotate(360deg);\n }\n\n 100% {\n -ms-transform: rotate(720deg);\n }\n}\n\n@-webkit-keyframes cssload-heart {\n 50% {\n -webkit-transform: rotate(360deg);\n }\n\n 100% {\n -webkit-transform: rotate(720deg);\n }\n}\n\n@-moz-keyframes cssload-heart {\n 50% {\n -moz-transform: rotate(360deg);\n }\n\n 100% {\n -moz-transform: rotate(720deg);\n }\n}\n\n@keyframes cssload-heartL {\n 60% {\n transform: scale(0.4);\n }\n}\n\n@-o-keyframes cssload-heartL {\n 60% {\n -o-transform: scale(0.4);\n }\n}\n\n@-ms-keyframes cssload-heartL {\n 60% {\n -ms-transform: scale(0.4);\n }\n}\n\n@-webkit-keyframes cssload-heartL {\n 60% {\n -webkit-transform: scale(0.4);\n }\n}\n\n@-moz-keyframes cssload-heartL {\n 60% {\n -moz-transform: scale(0.4);\n }\n}\n\n@keyframes cssload-heartR {\n 40% {\n transform: scale(0.4);\n }\n}\n\n@-o-keyframes cssload-heartR {\n 40% {\n -o-transform: scale(0.4);\n }\n}\n\n@-ms-keyframes cssload-heartR {\n 40% {\n -ms-transform: scale(0.4);\n }\n}\n\n@-webkit-keyframes cssload-heartR {\n 40% {\n -webkit-transform: scale(0.4);\n }\n}\n\n@-moz-keyframes cssload-heartR {\n 40% {\n -moz-transform: scale(0.4);\n }\n}\n\n@keyframes cssload-shadow {\n 50% {\n transform: scale(0.5);\n border-color: rgb(228,228,228);\n }\n}\n\n@-o-keyframes cssload-shadow {\n 50% {\n -o-transform: scale(0.5);\n border-color: rgb(228,228,228);\n }\n}\n\n@-ms-keyframes cssload-shadow {\n 50% {\n -ms-transform: scale(0.5);\n border-color: rgb(228,228,228);\n }\n}\n\n@-webkit-keyframes cssload-shadow {\n 50% {\n -webkit-transform: scale(0.5);\n border-color: rgb(228,228,228);\n }\n}\n\n@-moz-keyframes cssload-shadow {\n 50% {\n -moz-transform: scale(0.5);\n border-color: rgb(228,228,228);\n }\n}"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"b8fc63","snapshot":null,"tags":null,"title":"loader by AqFox","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":673,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".spinner {\n width: 56px;\n height: 56px;\n border-radius: 50%;\n color: #004dff;\n background: linear-gradient(currentColor 0 0) center/100% 4px,\n linear-gradient(currentColor 0 0) center/4px 100%,\n radial-gradient(farthest-side,#0000 calc(100% - 7px),currentColor calc(100% - 6px)),\n radial-gradient(circle 7px,currentColor 94%,#0000 0);\n background-repeat: no-repeat;\n animation: spinner-mu2ebf 1s infinite linear;\n position: relative;\n}\n\n.spinner::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background: inherit;\n transform: rotate(45deg);\n}\n\n@keyframes spinner-mu2ebf {\n to {\n transform: rotate(.5turn);\n }\n}"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"ed5173","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":35,"cssLen":574,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"Loading","css":".loader {\n font-size: 48px;\n display: inline-block;\n font-family: Arial, Helvetica, sans-serif;\n font-weight: bold;\n color: #FFF;\n letter-spacing: 2px;\n position: relative;\n box-sizing: border-box;\n}\n\n.loader::after {\n content: 'Loading';\n position: absolute;\n left: 0;\n top: 0;\n color: #263238;\n text-shadow: 0 0 2px #FFF, 0 0 1px #FFF, 0 0 1px #FFF;\n width: 100%;\n height: 100%;\n overflow: hidden;\n box-sizing: border-box;\n animation: animloader 6s linear infinite;\n}\n\n@keyframes animloader {\n 0% {\n height: 100%;\n }\n\n 100% {\n height: 0%;\n }\n}"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"fc5baf","snapshot":null,"tags":null,"title":"loader by Nawsome","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1455,"cssLen":4196,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".pl {\n width: 8em;\n height: 8em;\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:10.000Z","isPrivate":0,"projectId":"03b8b7","snapshot":null,"tags":null,"title":"loader by FWDJc","updated":"2024-01-22T16:54:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":728,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 7em;\n height: 5em;\n position: relative;\n animation: beat 1s infinite;\n}\n\n.loader::before,\n.loader::after {\n content: \"\";\n position: absolute;\n top: 0;\n width: 50px;\n height: 80px;\n border-radius: 5em 5em 0 0;\n animation: coldblue 1s infinite;\n}\n\n.loader::before {\n left: 50px;\n transform: rotate(-45deg);\n transform-origin: 0 100%;\n}\n\n.loader::after {\n left: 0;\n transform: rotate(45deg);\n transform-origin: 100% 100%;\n}\n\n@keyframes beat {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.2);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes coldblue {\n 0%, 100% {\n background-color: rgb(255, 255, 255);\n }\n\n 50% {\n background-color: rgb(91, 91, 241);\n }\n}"},{"created":"2024-01-22T16:54:10.000Z","isPrivate":0,"projectId":"aeefc1","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":1201,"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: 140px;\n background-image: radial-gradient(circle 30px, #fff 100%, transparent 0),\n radial-gradient(circle 5px, #fff 100%, transparent 0),\n radial-gradient(circle 5px, #fff 100%, transparent 0),\n linear-gradient(#FFF 20px, transparent 0);\n background-position: center 127px , 94px 102px , 16px 18px, center 114px;\n background-size: 60px 60px, 10px 10px , 10px 10px , 4px 14px;\n background-repeat: no-repeat;\n z-index: 10;\n perspective: 500px;\n}\n\n.loader::before {\n content: '';\n position: absolute;\n width: 100px;\n height: 100px;\n border-radius: 50%;\n border: 3px solid #fff;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -55%) rotate(-45deg);\n border-right-color: transparent;\n box-sizing: border-box;\n}\n\n.loader::after {\n content: '';\n position: absolute;\n height: 80px;\n width: 80px;\n transform: translate(-50%, -55%) rotate(-45deg) rotateY(0deg);\n left: 50%;\n top: 50%;\n box-sizing: border-box;\n border: 7px solid #FF3D00;\n border-radius: 50%;\n animation: rotate_4191 0.5s linear infinite;\n}\n\n@keyframes rotate_4191 {\n to {\n transform: translate(-50%, -55%) rotate(-45deg) rotateY(360deg)\n }\n}"},{"created":"2024-01-22T16:54:10.000Z","isPrivate":0,"projectId":"04ae38","snapshot":null,"tags":null,"title":"loader by Navarog21","updated":"2024-01-22T16:54:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":148,"cssLen":2538,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n background-color: black;\n position: relative;\n width: 2.5em;\n height: 2.5em;\n transform-origin: center;\n transition: 1s;\n border-radius: 50px;\n box-shadow: inset 0px 0px 10px purple,\n inset 5px 5px 12px rgba(44, 0, 114, 0.8),\n inset 8px 8px 1px rgba(160, 120, 255, 0.7),\n 0px 0px 1px rgba(160, 120, 255, 0.6);\n animation: 1.2s linear infinite 0s running first682;\n}\n\n.loader div {\n width: inherit;\n height: inherit;\n position: absolute;\n}\n\n#first {\n transform: rotate(90deg)\n}\n\n#first::before {\n --width: 1em;\n --height: 1em;\n content: \"\";\n position: absolute;\n top: 100%;\n left: calc(50% - var(--width)/2);\n width: 1em;\n height: 1em;\n background-color: rgb(44, 0, 114);\n box-shadow: inset 5px 5px 10px rgb(160, 120, 255),\n 0px 0px 2px white;\n border-radius: 50px;\n animation: 0.8s ease-in 0s infinite running jump2;\n}\n\n#second {\n transform: rotate(90deg);\n}\n\n#second::before {\n --width: 1em;\n --height: 1em;\n content: \"\";\n position: absolute;\n top: 100%;\n left: calc(50% - var(--width)/2);\n width: 1em;\n height: 1em;\n background-color: rgb(44, 0, 114);\n box-shadow: inset 5px 5px 10px rgb(160, 120, 255),\n 0px 0px 2px white;\n border-radius: 50px;\n animation: 1.5s ease-in 0s infinite running jump2;\n}\n\n#third {\n transform: rotate(90deg)\n}\n\n#third::before {\n --width: 1em;\n --height: 1em;\n content: \"\";\n position: absolute;\n top: 100%;\n left: calc(50% - var(--width)/2);\n width: 1em;\n height: 1em;\n background-color: rgb(44, 0, 114);\n box-shadow: inset 5px 5px 10px rgb(160, 120, 255),\n 0px 0px 2px white;\n border-radius: 50px;\n animation: 1.6s ease-in 0s infinite running jump2;\n}\n\n.loader::after {\n --width: 1em;\n --height: 1em;\n content: \"\";\n position: absolute;\n top: 100%;\n left: calc(50% - var(--width)/2);\n width: 1em;\n height: 1em;\n background-color: rgb(44, 0, 114);\n box-shadow: inset 5px 5px 10px rgb(160, 120, 255),\n 0px 0px 2px white;\n border-radius: 50px;\n animation: 1.2s ease-in 1s alternate infinite running jump2;\n}\n\n@keyframes first682 {\n 0% {\n transform: rotate(0deg);\n }\n\n 25% {\n transform: rotate(0deg);\n transform: rotate(90deg)\n }\n\n 50% {\n transform: rotate(90deg);\n transform: rotate(180deg);\n }\n\n 75% {\n transform: rotate(180deg);\n transform: rotate(270deg)\n }\n\n 100% {\n transform: rotate(270deg);\n transform: rotate(360deg);\n }\n}\n\n@keyframes jump2 {\n 0% {\n top: 100%;\n }\n\n 25% {\n top: 230%\n }\n\n 50% {\n top: 100%;\n }\n\n 75% {\n height: 0.6em\n }\n\n 100% {\n height: 1em\n }\n}"},{"created":"2024-01-22T16:54:10.000Z","isPrivate":0,"projectId":"627d19","snapshot":null,"tags":null,"title":"loader by pradipkaityuiux","updated":"2024-01-22T16:54:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":50,"cssLen":1378,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Loading\n \n

","css":".loader {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 150px;\n height: 150px;\n background: transparent;\n border: 3px solid rgba(0, 102, 255, 0.1);\n border-radius: 50%;\n text-align: center;\n line-height: 150px;\n font-family: sans-serif;\n font-size: 20px;\n color: #0066ff;\n letter-spacing: 2px;\n text-transform: uppercase;\n text-shadow: 0 0 10px #0066ff;\n box-shadow: 0 0 20px rgba(0, 0, 0, .15);\n}\n\n.loader::before {\n content: '';\n position: absolute;\n top: -3px;\n left: -3px;\n width: 100%;\n height: 100%;\n border: 3px solid transparent;\n border-top: 3px solid #0066ff;\n border-right: 3px solid #0066ff;\n border-radius: 50%;\n animation: animateC 2s linear infinite;\n}\n\n.loader span {\n display: block;\n position: absolute;\n top: calc(50% - 2px);\n left: 50%;\n width: 50%;\n height: 4px;\n background: transparent;\n transform-origin: left;\n animation: animate 2s linear infinite;\n}\n\n.loader span::before {\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #00aeff;\n top: -6px;\n right: -8px;\n box-shadow: 0 0 20px 5px #0066ff;\n}\n\n@keyframes animateC {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes animate {\n 0% {\n transform: rotate(45deg);\n }\n\n 100% {\n transform: rotate(405deg);\n }\n}"},{"created":"2024-01-22T16:54:10.000Z","isPrivate":0,"projectId":"585132","snapshot":null,"tags":null,"title":"loader by escannord","updated":"2024-01-22T16:54:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":404,"cssLen":1241,"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 width: 220px;\n height: 220px;\n border-radius: 50%;\n position: relative;\n border: solid 5px transparent;\n box-shadow: 5px 5px 5px rgb(12, 12, 12), inset 5px 5px 5px rgb(24, 23, 23),\n inset -1px -1px 10px rgba(153, 148, 148, 0.432),\n -1px -1px 10px rgba(206, 198, 198, 0.281);\n}\n\n.loader::before {\n content: \"\";\n display: inline-block;\n position: absolute;\n width: 180px;\n height: 180px;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 5px 5px 20px black, -2px -2px 40px black;\n background: repeating-conic-gradient(\n rgb(61, 59, 59) 0%,\n rgba(248, 248, 246, 0.534) 15%,\n rgb(54, 52, 52) 33.33%\n );\n}\n\n.ball {\n width: 15px;\n height: 15px;\n display: inline-block;\n background: radial-gradient(\n circle at 5px 5px,\n rgb(255, 255, 255) 1%,\n rgb(5, 5, 5) 50%\n );\n border-radius: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) translateX(97.5px);\n animation: rotate 5s calc(var(--delay) * 0.2s) infinite linear;\n}\n\n@keyframes rotate {\n 0% {\n transform: translate(-50%, -50%) rotate(0deg) translateX(97.5px);\n }\n\n 100% {\n transform: translate(-50%, -50%) rotate(360deg) translateX(97.5px);\n }\n}\n"},{"created":"2024-01-22T16:54:10.000Z","isPrivate":0,"projectId":"a5b2cb","snapshot":null,"tags":null,"title":"loader by fanishah","updated":"2024-01-22T16:54:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":317,"cssLen":839,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".center {\n height: 50px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.wave {\n width: 6px;\n height: 50px;\n background: linear-gradient(45deg, cyan, #fff);\n margin: 10px;\n animation: wave 1s linear infinite;\n border-radius: 20px;\n}\n\n.wave:nth-child(2) {\n animation-delay: 0.1s;\n}\n\n.wave:nth-child(3) {\n animation-delay: 0.2s;\n}\n\n.wave:nth-child(4) {\n animation-delay: 0.3s;\n}\n\n.wave:nth-child(5) {\n animation-delay: 0.4s;\n}\n\n.wave:nth-child(6) {\n animation-delay: 0.5s;\n}\n\n.wave:nth-child(7) {\n animation-delay: 0.6s;\n}\n\n.wave:nth-child(8) {\n animation-delay: 0.7s;\n}\n\n.wave:nth-child(9) {\n animation-delay: 0.8s;\n}\n\n.wave:nth-child(10) {\n animation-delay: 0.9s;\n}\n\n@keyframes wave {\n 0% {\n transform: scale(0);\n }\n\n 50% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n"}]}},"actionData":null,"errors":null}