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

\n \n

","css":".loader {\n position: relative;\n background-color: white;\n padding-left: 1.5em;\n padding-right: 1.5em;\n padding-top: 3em;\n top: -0.4em;\n border-radius: 25px;\n z-index: -1;\n box-shadow: 5px 2px 0px #666666;\n}\n\n.clock {\n position: relative;\n top: -1.4em;\n left: 0.05em;\n}\n\n.stage {\n position: relative;\n left: 0.5em;\n background-color: black;\n width: 4em;\n height: .4em;\n border-radius: 15px;\n box-shadow: 2px 2px 0px #666666;\n z-index: 4;\n}\n\n.hold {\n position: relative;\n background-color: limegreen;\n width: 0.1em;\n height: 4em;\n left: 2.5em;\n top: -.25em;\n animation: 1.3s dangle infinite;\n box-shadow: 4px 4px 0px #666666;\n z-index: -1;\n}\n\n@keyframes dangle {\n 0% {\n transform-origin: top center;\n transform: rotate(45deg);\n }\n\n 50% {\n transform-origin: top center;\n transform: rotate(-45deg);\n }\n\n 100% {\n transform-origin: top center;\n transform: rotate(45deg);\n }\n}\n\n.ball {\n display: inline-block;\n position: relative;\n top: 3em;\n left: -1.2em;\n width: 2.5em;\n height: 2.5em;\n margin: 0;\n border-radius: 50%;\n background: #171717;\n box-shadow: 1px 1px 0px #666666;\n}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"70f315","snapshot":null,"tags":null,"title":"loader by ChaudaryHammad","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":287,"cssLen":899,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\r\n

\n","css":".loader {\n perspective: 800px;\n}\n\n.cube {\n width: 40px;\n height: 40px;\n position: relative;\n transform-style: preserve-3d;\n animation: spin 3s linear infinite;\n}\n\n.face {\n width: 40px;\n height: 40px;\n position: absolute;\n opacity: 0.8;\n}\n\n.front {\n transform: translateZ(20px);\n background-color: #3498db;\n}\n\n.back {\n transform: translateZ(-20px);\n background-color: #e74c3c;\n}\n\n.left {\n transform: rotateY(90deg) translateZ(20px);\n background-color: #2ecc71;\n}\n\n.right {\n transform: rotateY(-90deg) translateZ(20px);\n background-color: #f39c12;\n}\n\n.top {\n transform: rotateX(90deg) translateZ(20px);\n background-color: #9b59b6;\n}\n\n.bottom {\n transform: rotateX(-90deg) translateZ(20px);\n background-color: #e67e22;\n}\n\n@keyframes spin {\n 0% {\n transform: rotateX(0) rotateY(0) rotateZ(0);\n }\n\n 100% {\n transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"83a494","snapshot":null,"tags":null,"title":"loader by Pradeepsaranbishnoi","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":1375,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n animation: rotate 1s infinite;\n height: 50px;\n width: 50px;\n}\n\n.loader:before,\n.loader:after {\n border-radius: 50%;\n content: '';\n display: block;\n height: 20px;\n width: 20px;\n}\n\n.loader:before {\n animation: ball1 1s infinite;\n background-color: #cb2025;\n box-shadow: 30px 0 0 #f8b334;\n margin-bottom: 10px;\n}\n\n.loader:after {\n animation: ball2 1s infinite;\n background-color: #00a096;\n box-shadow: 30px 0 0 #97bf0d;\n}\n\n@keyframes rotate {\n 0% {\n -webkit-transform: rotate(0deg) scale(0.8);\n -moz-transform: rotate(0deg) scale(0.8);\n }\n\n 50% {\n -webkit-transform: rotate(360deg) scale(1.2);\n -moz-transform: rotate(360deg) scale(1.2);\n }\n\n 100% {\n -webkit-transform: rotate(720deg) scale(0.8);\n -moz-transform: rotate(720deg) scale(0.8);\n }\n}\n\n@keyframes ball1 {\n 0% {\n box-shadow: 30px 0 0 #f8b334;\n }\n\n 50% {\n box-shadow: 0 0 0 #f8b334;\n margin-bottom: 0;\n -webkit-transform: translate(15px,15px);\n -moz-transform: translate(15px, 15px);\n }\n\n 100% {\n box-shadow: 30px 0 0 #f8b334;\n margin-bottom: 10px;\n }\n}\n\n@keyframes ball2 {\n 0% {\n box-shadow: 30px 0 0 #97bf0d;\n }\n\n 50% {\n box-shadow: 0 0 0 #97bf0d;\n margin-top: -20px;\n -webkit-transform: translate(15px,15px);\n -moz-transform: translate(15px, 15px);\n }\n\n 100% {\n box-shadow: 30px 0 0 #97bf0d;\n margin-top: 0;\n }\n}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"b16ccd","snapshot":null,"tags":null,"title":"loader by usmonovdev","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":52,"cssLen":1384,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner {\n position: relative;\n width: 56px;\n height: 56px;\n}\n\n.spinner > div {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n border: 13px solid rgba(181, 126, 16, 0.196);\n position: absolute;\n top: 0;\n left: 0;\n animation: spinner-g7vlvwmd 0.65s linear infinite;\n z-index: 0;\n}\n\n.spinner > div::before {\n content: '';\n height: 13px;\n width: 13px;\n border-radius: 50%;\n background: #ff8a23;\n position: absolute;\n top: 50%;\n animation: spinner-h1vps1md 1.3s infinite reverse steps(1);\n transform: translate(calc(2 * var(--translate-2)), calc(var(--translate) * 1%));\n z-index: 1;\n}\n\n.spinner > div:nth-of-type(1) {\n --translate: -50;\n --translate-2: calc(56px / 8);\n}\n\n.spinner > div:nth-of-type(1)::before {\n right: 0;\n}\n\n.spinner > div:nth-of-type(2) {\n --translate: 50;\n --translate-2: calc(-56px / 8);\n animation-delay: 0.65s;\n animation-direction: reverse;\n transform: translate(21.5px, 0);\n}\n\n.spinner > div:nth-of-type(2)::before {\n left: 0;\n transform: translate(calc(-56px / 4), -50%);\n animation-direction: normal;\n}\n\n@keyframes spinner-h1vps1md {\n 0% {\n opacity: 0;\n }\n\n 50% {\n opacity: 1;\n }\n}\n\n@keyframes spinner-g7vlvwmd {\n from {\n transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2)), 0) rotate(0deg);\n }\n\n to {\n transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2)), 0) rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"3a0347","snapshot":null,"tags":null,"title":"loader by Nawsome","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":219,"cssLen":1121,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".container {\n width: 200px;\n height: 150px;\n margin: 0 auto;\n}\n\n.ball {\n width: 10px;\n height: 10px;\n margin: 10px auto;\n border-radius: 50px;\n}\n\n.ball:nth-child(1) {\n background: #ffffff;\n animation: right2 1s infinite ease-in-out;\n}\n\n.ball:nth-child(2) {\n background: #ffffff;\n animation: left2 1.1s infinite ease-in-out;\n}\n\n.ball:nth-child(3) {\n background: #ffffff;\n animation: right2 1.05s infinite ease-in-out;\n}\n\n.ball:nth-child(4) {\n background: #ffffff;\n animation: left2 1.15s infinite ease-in-out;\n}\n\n.ball:nth-child(5) {\n background: #ffffff;\n animation: right2 1.1s infinite ease-in-out;\n}\n\n.ball:nth-child(6) {\n background: #ffffff;\n animation: left2 1.05s infinite ease-in-out;\n}\n\n.ball:nth-child(7) {\n background: #ffffff;\n animation: right2 1s infinite ease-in-out;\n}\n\n@keyframes right2 {\n 0% {\n transform: translate(-15px);\n }\n\n 50% {\n transform: translate(15px);\n }\n\n 100% {\n transform: translate(-15px);\n }\n}\n\n@keyframes left2 {\n 0% {\n transform: translate(15px);\n }\n\n 50% {\n transform: translate(-15px);\n }\n\n 100% {\n transform: translate(15px);\n }\n}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"27fc02","snapshot":null,"tags":null,"title":"loader by SmookyDev","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":855,"cssLen":2447,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n\n","css":".absolute{position:absolute}.relative{position:relative}.z-40{z-index:40}.z-\\[60\\]{z-index:60}.flex{display:flex}.aspect-square{aspect-ratio:1 / 1}.w-32{width:8rem}.w-\\[85\\%\\]{width:85%}@keyframes spin{to{transform:rotate(360deg)}}.animate-\\[spin_3s_linear_infinite\\]{animation:spin 3s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.animate-\\[spin_5s_linear_infinite\\]{animation:spin 5s linear infinite}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-full{border-radius:9999px}.bg-\\[conic-gradient\\(\\#34d399_0deg\\2c \\#34d399_180deg\\2c transparent_180deg\\2c transparent_360deg\\)\\]{background-image:conic-gradient(#34d399 0deg,#34d399 180deg,transparent 180deg,transparent 360deg)}.bg-\\[conic-gradient\\(white_0deg\\2c white_300deg\\2c transparent_270deg\\2c transparent_360deg\\)\\]{background-image:conic-gradient(white 0deg,white 300deg,transparent 270deg,transparent 360deg)}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:z-\\[80\\]::before{content:var(--tw-content);z-index:80}.before\\:aspect-square::before{content:var(--tw-content);aspect-ratio:1 / 1}.before\\:w-\\[60\\%\\]::before{content:var(--tw-content);width:60%}@keyframes spin{to{content:var(--tw-content);transform:rotate(360deg)}}.before\\:animate-\\[spin_2s_linear_infinite\\]::before{content:var(--tw-content);animation:spin 2s linear infinite}.before\\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\\:bg-\\[conic-gradient\\(white_0deg\\2c white_270deg\\2c transparent_180deg\\2c transparent_360deg\\)\\]::before{content:var(--tw-content);background-image:conic-gradient(white 0deg,white 270deg,transparent 180deg,transparent 360deg)}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:z-\\[60\\]::after{content:var(--tw-content);z-index:60}.after\\:aspect-square::after{content:var(--tw-content);aspect-ratio:1 / 1}.after\\:w-3\\/4::after{content:var(--tw-content);width:75%}@keyframes spin{to{content:var(--tw-content);transform:rotate(360deg)}}.after\\:animate-\\[spin_3s_linear_infinite\\]::after{content:var(--tw-content);animation:spin 3s linear infinite}.after\\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\\:bg-\\[conic-gradient\\(\\#065f46_0deg\\2c \\#065f46_180deg\\2c transparent_180deg\\2c transparent_360deg\\)\\]::after{content:var(--tw-content);background-image:conic-gradient(#065f46 0deg,#065f46 180deg,transparent 180deg,transparent 360deg)}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"876f74","snapshot":null,"tags":null,"title":"loader by Satwinder04","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":350,"cssLen":1005,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader3 {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.bars {\n width: 10px;\n height: 20px;\n margin: 0 2px;\n border-radius: 4px;\n animation: loader3 3s ease-in-out infinite;\n}\n\n.bar1 {\n background-color: #4285F4;\n animation-delay: -0.8s;\n}\n\n.bar2 {\n background-color: #4285F4;\n animation-delay: -0.7s;\n}\n\n.bar3 {\n background-color: #4285F4;\n animation-delay: -0.6s;\n}\n\n.bar4 {\n background-color: #4285F4;\n animation-delay: -0.5s;\n}\n\n.bar5 {\n background-color: #4285F4;\n animation-delay: -0.4s;\n}\n\n.bar6 {\n background-color: #4285F4;\n animation-delay: -0.3s;\n}\n\n.bar7 {\n background-color: #4285F4;\n animation-delay: -0.2s;\n}\n\n.bar8 {\n background-color: #4285F4;\n animation-delay: -0.1s;\n}\n\n.bar9 {\n background-color: #4285F4;\n animation-delay: 0s;\n}\n\n.bar10 {\n background-color: #4285F4;\n animation-delay: 0.1s;\n}\n\n@keyframes loader3 {\n 0% {\n transform: scale(1);\n }\n\n 20% {\n transform: scale(1, 2.32);\n }\n\n 40% {\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"e019ab","snapshot":null,"tags":null,"title":"loader by mrhyddenn","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":57,"cssLen":982,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%,-50%);\n overflow: hidden;\n height: 80px;\n width: 80px;\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px rgb(25, 116, 253);\n border-radius: 50%;\n}\n\n.waves {\n position: relative;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background: rgb(30, 146, 255);\n box-shadow: inset 0 0 50px rgb(0,0,0,.3);\n}\n\n.waves::before,\n.waves::after {\n content: '';\n position: absolute;\n width: 200%;\n height: 200%;\n top: 0;\n left: 50%;\n transform: translate(-50%, -75%);\n background: #000;\n}\n\n.waves::before {\n border-radius: 45%;\n background: rgb(248, 248, 248);\n animation: wave91234 5s linear infinite;\n}\n\n.waves::after {\n border-radius: 40%;\n background: rgb(255,255,255,.5);\n animation: wave91234 10s linear infinite;\n}\n\n@keyframes wave91234 {\n 0% {\n transform: translate(-50%, -75%) rotate(0deg);\n }\n\n 100% {\n transform: translate(-50%, -75%) rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"631e5f","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1162,"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 height: 200px;\n width: 200px;\n border-bottom: 3px solid #ff3d00;\n box-sizing: border-box;\n animation: drawLine 4s linear infinite;\n}\n\n.loader:before {\n content: \"\";\n position: absolute;\n left: calc(100% + 14px);\n bottom: -6px;\n width: 16px;\n height: 100px;\n border-radius: 20px 20px 50px 50px;\n background-repeat: no-repeat;\n background-image: linear-gradient(#ff3d00 6px, transparent 0),\n linear-gradient(45deg, rgba(0, 0, 0, 0.02) 49%, white 51%),\n linear-gradient(315deg, rgba(0, 0, 0, 0.02) 49%, white 51%),\n linear-gradient( to bottom, #ffffff 10%, #ff3d00 10%, #ff3d00 90%, #ffffff 90% );\n background-size: 3px 3px, 8px 8px, 8px 8px, 16px 88px;\n background-position: center bottom, left 88px, right 88px, left top;\n transform: rotate(25deg);\n animation: pencilRot 4s linear infinite;\n}\n\n@keyframes drawLine {\n 0%, 100% {\n width: 0px\n }\n\n 45%, 55% {\n width: 200px\n }\n}\n\n@keyframes pencilRot {\n 0%, 45% {\n bottom: -6px;\n left: calc(100% + 14px);\n transform: rotate(25deg);\n }\n\n 55%,\n 100% {\n bottom: -12px;\n left: calc(100% + 16px);\n transform: rotate(220deg);\n }\n}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"b88bfc","snapshot":null,"tags":null,"title":"loader by Yaya12085","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":257,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n height: 20px;\n width: 20px;\n border-radius: 50%;\n background-color: #69ffa8;\n animation: 1.5s pulse infinite ease-in-out;\n}\n\n@keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 #69ffa8;\n }\n\n 100% {\n box-shadow: 0 0 0 14px #69ffa800;\n }\n}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"b7b4a7","snapshot":null,"tags":null,"title":"loader by KhaledMatalkah","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":1215,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n width: 100px;\n height: 100px;\n border: 8px solid #ffcc00;\n border-radius: 50%;\n border-top-color: transparent;\n position: relative;\n animation: loaderAnimation 1.5s linear infinite;\n}\n\n.loader::before,\n.loader::after {\n content: '';\n position: absolute;\n height: 20px;\n width: 20px;\n left: 50%;\n top: 50%;\n background-color: #ffcc00;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n}\n\n.loader::before {\n animation: loaderAnimationBefore 1s linear infinite;\n}\n\n.loader::after {\n animation: loaderAnimationAfter 1s linear infinite;\n}\n\n@keyframes loaderAnimation {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes loaderAnimationBefore {\n 0% {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n\n 50% {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0);\n }\n\n 100% {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n}\n\n@keyframes loaderAnimationAfter {\n 0% {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0);\n }\n\n 50% {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n\n 100% {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0);\n }\n}\n"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"d039e4","snapshot":null,"tags":null,"title":"loader by JaydipPrajapati1910","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":545,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".loader {\n display: block;\n --height-of-loader: 4px;\n --loader-color: blueviolet;\n width: 130px;\n height: var(--height-of-loader);\n border-radius: 30px;\n background-color: rgba(0,0,0,0.2);\n position: relative;\n}\n\n.loader::before {\n content: \"\";\n position: absolute;\n background: var(--loader-color);\n top: 0;\n left: 0;\n width: 0%;\n height: 100%;\n border-radius: 30px;\n animation: moving 1s ease-in-out infinite;\n ;\n}\n\n@keyframes moving {\n 50% {\n width: 100%;\n }\n\n 100% {\n width: 0;\n right: 0;\n left: unset;\n }\n}"}]}},"actionData":null,"errors":null}