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

","css":".loader {\n border: 16px solid #f3f3f3;\n border-top: 16px solid #3498db;\n border-radius: 50%;\n width: 120px;\n height: 120px;\n animation: spin 2s linear infinite;\n}\n\n/* Add some glow effect */\n.loader::after {\n content: \"\";\n position: absolute;\n top: -5px;\n left: -5px;\n right: -5px;\n bottom: -5px;\n border-radius: 50%;\n box-shadow: inset 0px 0px 20px #3498db;\n}\n\n/* Rotate the circle */\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"26da8e","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":37,"cssLen":605,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Loading\n

","css":".loader {\n font-size: 2rem;\n font-family: sans-serif;\n font-variant: small-caps;\n font-weight: 900;\n background: conic-gradient(\n #dff2ae 0 25%,\n #ff904f 25% 50%,\n #feefe7 50% 75%,\n #ffde2b 75%\n );\n background-size: 200% 200%;\n animation: animateBackground 4.5s ease-in-out infinite;\n color: transparent;\n background-clip: text;\n -webkit-background-clip: text;\n}\n\n@keyframes animateBackground {\n 25% {\n background-position: 0 100%;\n }\n\n 50% {\n background-position: 100% 100%;\n }\n\n 75% {\n background-position: 100% 0%;\n }\n\n 100% {\n background-position: 0 0;\n }\n}\n"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"d30c21","snapshot":null,"tags":null,"title":"loader by uxRakhal","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":126,"cssLen":6868,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".typewriter {\n --blue: #5cbbff;\n --blue-dark: #162d72;\n --key: #fff;\n --paper: #eef0fd;\n --text: #00000049;\n --tool: #ffbb00;\n --duration: 3s;\n position: relative;\n -webkit-animation: bounce05 var(--duration) linear infinite;\n animation: bounce05 var(--duration) linear infinite;\n}\n\n.typewriter .slide {\n width: 92px;\n height: 20px;\n border-radius: 3px;\n margin-left: 14px;\n transform: translateX(14px);\n background: linear-gradient(var(--blue), var(--blue-dark));\n -webkit-animation: slide05 var(--duration) ease infinite;\n animation: slide05 var(--duration) ease infinite;\n}\n\n.typewriter .slide:before,\n.typewriter .slide:after,\n.typewriter .slide i:before {\n content: \"\";\n position: absolute;\n background: var(--tool);\n}\n\n.typewriter .slide:before {\n width: 2px;\n height: 8px;\n top: 6px;\n left: 100%;\n}\n\n.typewriter .slide:after {\n left: 94px;\n top: 3px;\n height: 14px;\n width: 6px;\n border-radius: 3px;\n}\n\n.typewriter .slide i {\n display: block;\n position: absolute;\n right: 100%;\n width: 6px;\n height: 4px;\n top: 4px;\n background: var(--tool);\n}\n\n.typewriter .slide i:before {\n right: 100%;\n top: -2px;\n width: 4px;\n border-radius: 2px;\n height: 14px;\n}\n\n.typewriter .paper {\n position: absolute;\n left: 24px;\n top: -26px;\n width: 40px;\n height: 46px;\n border-radius: 5px;\n background: var(--paper);\n transform: translateY(46px);\n -webkit-animation: paper05 var(--duration) linear infinite;\n animation: paper05 var(--duration) linear infinite;\n}\n\n.typewriter .paper:before {\n content: \"\";\n position: absolute;\n left: 6px;\n right: 6px;\n top: 7px;\n border-radius: 2px;\n height: 4px;\n transform: scaleY(0.8);\n background: var(--text);\n box-shadow: 0 12px 0 var(--text), 0 24px 0 var(--text), 0 36px 0 var(--text);\n}\n\n.typewriter .keyboard {\n width: 120px;\n height: 56px;\n margin-top: -10px;\n z-index: 1;\n position: relative;\n}\n\n.typewriter .keyboard:before,\n.typewriter .keyboard:after {\n content: \"\";\n position: absolute;\n}\n\n.typewriter .keyboard:before {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 7px;\n background: linear-gradient(135deg, var(--blue), var(--blue-dark));\n transform: perspective(10px) rotateX(2deg);\n transform-origin: 50% 100%;\n}\n\n.typewriter .keyboard:after {\n left: 2px;\n top: 25px;\n width: 11px;\n height: 4px;\n border-radius: 2px;\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),\n 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),\n 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),\n 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n -webkit-animation: keyboard05 var(--duration) linear infinite;\n animation: keyboard05 var(--duration) linear infinite;\n}\n\n@keyframes bounce05 {\n 85%,\n 92%,\n 100% {\n transform: translateY(0);\n }\n\n 89% {\n transform: translateY(-4px);\n }\n\n 95% {\n transform: translateY(2px);\n }\n}\n\n@keyframes slide05 {\n 5% {\n transform: translateX(14px);\n }\n\n 15%,\n 30% {\n transform: translateX(6px);\n }\n\n 40%,\n 55% {\n transform: translateX(0);\n }\n\n 65%,\n 70% {\n transform: translateX(-4px);\n }\n\n 80%,\n 89% {\n transform: translateX(-12px);\n }\n\n 100% {\n transform: translateX(14px);\n }\n}\n\n@keyframes paper05 {\n 5% {\n transform: translateY(46px);\n }\n\n 20%,\n 30% {\n transform: translateY(34px);\n }\n\n 40%,\n 55% {\n transform: translateY(22px);\n }\n\n 65%,\n 70% {\n transform: translateY(10px);\n }\n\n 80%,\n 85% {\n transform: translateY(0);\n }\n\n 92%,\n 100% {\n transform: translateY(46px);\n }\n}\n\n@keyframes keyboard05 {\n 5%,\n 12%,\n 21%,\n 30%,\n 39%,\n 48%,\n 57%,\n 66%,\n 75%,\n 84% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),\n 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),\n 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),\n 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 9% {\n box-shadow: 15px 2px 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),\n 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),\n 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),\n 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 18% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),\n 60px 2px 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),\n 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),\n 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 27% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),\n 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),\n 22px 12px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),\n 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 36% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),\n 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),\n 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 12px 0 var(--key),\n 60px 12px 0 var(--key), 68px 12px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 45% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),\n 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 2px 0 var(--key),\n 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),\n 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 54% {\n box-shadow: 15px 0 0 var(--key), 30px 2px 0 var(--key), 45px 0 0 var(--key),\n 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),\n 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),\n 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 63% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),\n 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),\n 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),\n 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 12px 0 var(--key);\n }\n\n 72% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 2px 0 var(--key),\n 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),\n 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),\n 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n\n 81% {\n box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),\n 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),\n 22px 10px 0 var(--key), 37px 12px 0 var(--key), 52px 10px 0 var(--key),\n 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);\n }\n}\n"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"acd71b","snapshot":null,"tags":null,"title":"loader by coding-masala","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":160,"cssLen":361,"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}\n\n.loader-bar {\n width: 4px;\n height: 18px;\n margin: 0 8px;\n border-radius: 4px;\n animation: loading_3194 1s ease-in-out infinite;\n background-color: #333;\n}\n\n@keyframes loading_3194 {\n 0% {\n transform: scale(1);\n }\n\n 20% {\n transform: scaleY(3);\n }\n\n 40% {\n transform: scale(1);\n }\n}\n"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"11a697","snapshot":null,"tags":null,"title":"loader by Mike11jr","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":103,"cssLen":635,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner {\n flex-direction: row;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.dot1, .dot2, .dot3 {\n width: 15px;\n height: 15px;\n border: double;\n border-color: white;\n border-radius: 50%;\n margin: 10px;\n}\n\n.dot1 {\n animation: jump765 1.6s -0.32s linear infinite;\n background: #2495ff;\n}\n\n.dot2 {\n animation: jump765 1.6s -0.16s linear infinite;\n background: #2495ff;\n}\n\n.dot3 {\n animation: jump765 1.6s linear infinite;\n background: #2495ff;\n}\n\n@keyframes jump765 {\n 0%, 80%, 100% {\n -webkit-transform: scale(0);\n transform: scale(0);\n }\n\n 40% {\n -webkit-transform: scale(2.0);\n transform: scale(2.0);\n }\n}\n\n"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"c94424","snapshot":null,"tags":null,"title":"loader by Smit-Prajapati","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":19611,"cssLen":10384,"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: 120px;\n aspect-ratio: 1;\n background: #bcbcbc;\n border-radius: 50%;\n position: relative;\n padding: 4px;\n box-shadow: 2px 2px 5px 0px rgb(255, 255, 255), -2px -2px 5px -2px rgb(0, 0, 0);\n}\n\n.loader .dots-container {\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n.loader .dots-container .dot-row {\n position: absolute;\n top: 50%;\n transform: translateY(-50%) rotate(0deg);\n transform-origin: right center;\n width: 50%;\n height: 5px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.loader .dots-container .dot-row > * {\n animation: blink 5s linear infinite;\n}\n\n.loader .dots-container .dot-row .dot {\n width: 4%;\n aspect-ratio: 1;\n background: #8b8b8b;\n border-radius: 50%;\n}\n\n.loader .dots-container .dot-row:nth-child(1) {\n transform: translateY(-50%) rotate(0deg);\n}\n\n.loader .dots-container .dot-row:nth-child(1) .dot {\n animation-delay: 0s;\n}\n\n.loader .dots-container .dot-row:nth-child(2) {\n transform: translateY(-50%) rotate(8deg);\n}\n\n.loader .dots-container .dot-row:nth-child(2) .dot {\n animation-delay: 0.1111111111s;\n}\n\n.loader .dots-container .dot-row:nth-child(3) {\n transform: translateY(-50%) rotate(16deg);\n}\n\n.loader .dots-container .dot-row:nth-child(3) .dot {\n animation-delay: 0.2222222222s;\n}\n\n.loader .dots-container .dot-row:nth-child(4) {\n transform: translateY(-50%) rotate(24deg);\n}\n\n.loader .dots-container .dot-row:nth-child(4) .dot {\n animation-delay: 0.3333333333s;\n}\n\n.loader .dots-container .dot-row:nth-child(5) {\n transform: translateY(-50%) rotate(32deg);\n}\n\n.loader .dots-container .dot-row:nth-child(5) .dot {\n animation-delay: 0.4444444444s;\n}\n\n.loader .dots-container .dot-row:nth-child(6) {\n transform: translateY(-50%) rotate(40deg);\n}\n\n.loader .dots-container .dot-row:nth-child(6) .dot {\n animation-delay: 0.5555555556s;\n}\n\n.loader .dots-container .dot-row:nth-child(7) {\n transform: translateY(-50%) rotate(48deg);\n}\n\n.loader .dots-container .dot-row:nth-child(7) .dot {\n animation-delay: 0.6666666667s;\n}\n\n.loader .dots-container .dot-row:nth-child(8) {\n transform: translateY(-50%) rotate(56deg);\n}\n\n.loader .dots-container .dot-row:nth-child(8) .dot {\n animation-delay: 0.7777777778s;\n}\n\n.loader .dots-container .dot-row:nth-child(9) {\n transform: translateY(-50%) rotate(64deg);\n}\n\n.loader .dots-container .dot-row:nth-child(9) .dot {\n animation-delay: 0.8888888889s;\n}\n\n.loader .dots-container .dot-row:nth-child(10) {\n transform: translateY(-50%) rotate(72deg);\n}\n\n.loader .dots-container .dot-row:nth-child(10) .dot {\n animation-delay: 1s;\n}\n\n.loader .dots-container .dot-row:nth-child(11) {\n transform: translateY(-50%) rotate(80deg);\n}\n\n.loader .dots-container .dot-row:nth-child(11) .dot {\n animation-delay: 1.1111111111s;\n}\n\n.loader .dots-container .dot-row:nth-child(12) {\n transform: translateY(-50%) rotate(88deg);\n}\n\n.loader .dots-container .dot-row:nth-child(12) .dot {\n animation-delay: 1.2222222222s;\n}\n\n.loader .dots-container .dot-row:nth-child(13) {\n transform: translateY(-50%) rotate(96deg);\n}\n\n.loader .dots-container .dot-row:nth-child(13) .dot {\n animation-delay: 1.3333333333s;\n}\n\n.loader .dots-container .dot-row:nth-child(14) {\n transform: translateY(-50%) rotate(104deg);\n}\n\n.loader .dots-container .dot-row:nth-child(14) .dot {\n animation-delay: 1.4444444444s;\n}\n\n.loader .dots-container .dot-row:nth-child(15) {\n transform: translateY(-50%) rotate(112deg);\n}\n\n.loader .dots-container .dot-row:nth-child(15) .dot {\n animation-delay: 1.5555555556s;\n}\n\n.loader .dots-container .dot-row:nth-child(16) {\n transform: translateY(-50%) rotate(120deg);\n}\n\n.loader .dots-container .dot-row:nth-child(16) .dot {\n animation-delay: 1.6666666667s;\n}\n\n.loader .dots-container .dot-row:nth-child(17) {\n transform: translateY(-50%) rotate(128deg);\n}\n\n.loader .dots-container .dot-row:nth-child(17) .dot {\n animation-delay: 1.7777777778s;\n}\n\n.loader .dots-container .dot-row:nth-child(18) {\n transform: translateY(-50%) rotate(136deg);\n}\n\n.loader .dots-container .dot-row:nth-child(18) .dot {\n animation-delay: 1.8888888889s;\n}\n\n.loader .dots-container .dot-row:nth-child(19) {\n transform: translateY(-50%) rotate(144deg);\n}\n\n.loader .dots-container .dot-row:nth-child(19) .dot {\n animation-delay: 2s;\n}\n\n.loader .dots-container .dot-row:nth-child(20) {\n transform: translateY(-50%) rotate(152deg);\n}\n\n.loader .dots-container .dot-row:nth-child(20) .dot {\n animation-delay: 2.1111111111s;\n}\n\n.loader .dots-container .dot-row:nth-child(21) {\n transform: translateY(-50%) rotate(160deg);\n}\n\n.loader .dots-container .dot-row:nth-child(21) .dot {\n animation-delay: 2.2222222222s;\n}\n\n.loader .dots-container .dot-row:nth-child(22) {\n transform: translateY(-50%) rotate(168deg);\n}\n\n.loader .dots-container .dot-row:nth-child(22) .dot {\n animation-delay: 2.3333333333s;\n}\n\n.loader .dots-container .dot-row:nth-child(23) {\n transform: translateY(-50%) rotate(176deg);\n}\n\n.loader .dots-container .dot-row:nth-child(23) .dot {\n animation-delay: 2.4444444444s;\n}\n\n.loader .dots-container .dot-row:nth-child(24) {\n transform: translateY(-50%) rotate(184deg);\n}\n\n.loader .dots-container .dot-row:nth-child(24) .dot {\n animation-delay: 2.5555555556s;\n}\n\n.loader .dots-container .dot-row:nth-child(25) {\n transform: translateY(-50%) rotate(192deg);\n}\n\n.loader .dots-container .dot-row:nth-child(25) .dot {\n animation-delay: 2.6666666667s;\n}\n\n.loader .dots-container .dot-row:nth-child(26) {\n transform: translateY(-50%) rotate(200deg);\n}\n\n.loader .dots-container .dot-row:nth-child(26) .dot {\n animation-delay: 2.7777777778s;\n}\n\n.loader .dots-container .dot-row:nth-child(27) {\n transform: translateY(-50%) rotate(208deg);\n}\n\n.loader .dots-container .dot-row:nth-child(27) .dot {\n animation-delay: 2.8888888889s;\n}\n\n.loader .dots-container .dot-row:nth-child(28) {\n transform: translateY(-50%) rotate(216deg);\n}\n\n.loader .dots-container .dot-row:nth-child(28) .dot {\n animation-delay: 3s;\n}\n\n.loader .dots-container .dot-row:nth-child(29) {\n transform: translateY(-50%) rotate(224deg);\n}\n\n.loader .dots-container .dot-row:nth-child(29) .dot {\n animation-delay: 3.1111111111s;\n}\n\n.loader .dots-container .dot-row:nth-child(30) {\n transform: translateY(-50%) rotate(232deg);\n}\n\n.loader .dots-container .dot-row:nth-child(30) .dot {\n animation-delay: 3.2222222222s;\n}\n\n.loader .dots-container .dot-row:nth-child(31) {\n transform: translateY(-50%) rotate(240deg);\n}\n\n.loader .dots-container .dot-row:nth-child(31) .dot {\n animation-delay: 3.3333333333s;\n}\n\n.loader .dots-container .dot-row:nth-child(32) {\n transform: translateY(-50%) rotate(248deg);\n}\n\n.loader .dots-container .dot-row:nth-child(32) .dot {\n animation-delay: 3.4444444444s;\n}\n\n.loader .dots-container .dot-row:nth-child(33) {\n transform: translateY(-50%) rotate(256deg);\n}\n\n.loader .dots-container .dot-row:nth-child(33) .dot {\n animation-delay: 3.5555555556s;\n}\n\n.loader .dots-container .dot-row:nth-child(34) {\n transform: translateY(-50%) rotate(264deg);\n}\n\n.loader .dots-container .dot-row:nth-child(34) .dot {\n animation-delay: 3.6666666667s;\n}\n\n.loader .dots-container .dot-row:nth-child(35) {\n transform: translateY(-50%) rotate(272deg);\n}\n\n.loader .dots-container .dot-row:nth-child(35) .dot {\n animation-delay: 3.7777777778s;\n}\n\n.loader .dots-container .dot-row:nth-child(36) {\n transform: translateY(-50%) rotate(280deg);\n}\n\n.loader .dots-container .dot-row:nth-child(36) .dot {\n animation-delay: 3.8888888889s;\n}\n\n.loader .dots-container .dot-row:nth-child(37) {\n transform: translateY(-50%) rotate(288deg);\n}\n\n.loader .dots-container .dot-row:nth-child(37) .dot {\n animation-delay: 4s;\n}\n\n.loader .dots-container .dot-row:nth-child(38) {\n transform: translateY(-50%) rotate(296deg);\n}\n\n.loader .dots-container .dot-row:nth-child(38) .dot {\n animation-delay: 4.1111111111s;\n}\n\n.loader .dots-container .dot-row:nth-child(39) {\n transform: translateY(-50%) rotate(304deg);\n}\n\n.loader .dots-container .dot-row:nth-child(39) .dot {\n animation-delay: 4.2222222222s;\n}\n\n.loader .dots-container .dot-row:nth-child(40) {\n transform: translateY(-50%) rotate(312deg);\n}\n\n.loader .dots-container .dot-row:nth-child(40) .dot {\n animation-delay: 4.3333333333s;\n}\n\n.loader .dots-container .dot-row:nth-child(41) {\n transform: translateY(-50%) rotate(320deg);\n}\n\n.loader .dots-container .dot-row:nth-child(41) .dot {\n animation-delay: 4.4444444444s;\n}\n\n.loader .dots-container .dot-row:nth-child(42) {\n transform: translateY(-50%) rotate(328deg);\n}\n\n.loader .dots-container .dot-row:nth-child(42) .dot {\n animation-delay: 4.5555555556s;\n}\n\n.loader .dots-container .dot-row:nth-child(43) {\n transform: translateY(-50%) rotate(336deg);\n}\n\n.loader .dots-container .dot-row:nth-child(43) .dot {\n animation-delay: 4.6666666667s;\n}\n\n.loader .dots-container .dot-row:nth-child(44) {\n transform: translateY(-50%) rotate(344deg);\n}\n\n.loader .dots-container .dot-row:nth-child(44) .dot {\n animation-delay: 4.7777777778s;\n}\n\n.loader .dots-container .dot-row:nth-child(45) {\n transform: translateY(-50%) rotate(352deg);\n}\n\n.loader .dots-container .dot-row:nth-child(45) .dot {\n animation-delay: 4.8888888889s;\n}\n\n.loader .center-div {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 36%;\n aspect-ratio: 1;\n border-radius: 50%;\n display: grid;\n place-content: center;\n background: linear-gradient(135deg, rgb(130, 130, 130) 0%, rgb(73, 73, 73) 100%);\n box-shadow: rgba(39, 39, 39, 0.3) 8px 8px 5px -5px, rgba(39, 39, 39, 0.5) 8px 8px 10px 0px;\n border-right: 1px solid rgb(63, 63, 63);\n border-bottom: 1px solid rgb(63, 63, 63);\n}\n\n.loader .center-div .svg {\n width: 15px;\n aspect-ratio: 1;\n fill: rgba(0, 0, 0, 0.293);\n}\n\n.loader .glass {\n position: absolute;\n height: 50%;\n width: 80%;\n top: 0;\n left: 50%;\n transform: translateX(-50%) rotate(-45deg);\n transform-origin: bottom center;\n background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.879) 100%);\n border-radius: inherit;\n border-radius: 51% 49% 51% 49%/59% 60% 40% 41%;\n}\n\n@keyframes blink {\n 0% {\n background: white;\n box-shadow: 0px 0px 2px rgb(255, 255, 255);\n }\n\n 10% {\n background: white;\n box-shadow: 0px 0px 2px rgb(255, 255, 255);\n }\n\n 20% {\n background: white;\n box-shadow: 0px 0px 2px rgb(255, 255, 255);\n }\n\n 21% {\n background: grey;\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"d3a4a1","snapshot":null,"tags":null,"title":"loader by emmanuelh-dev","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5554,"cssLen":4974,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\n\t\t

\n\t","css":".socket {\n width: 200px;\n height: 200px;\n position: absolute;\n left: 50%;\n margin-left: -100px;\n top: 50%;\n margin-top: -100px;\n}\n\n.hex-brick {\n background: violet;\n width: 30px;\n height: 17px;\n position: absolute;\n top: 5px;\n animation-name: fade00;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n -webkit-animation-name: fade00;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n}\n\n.h2 {\n transform: rotate(60deg);\n -webkit-transform: rotate(60deg);\n}\n\n.h3 {\n transform: rotate(-60deg);\n -webkit-transform: rotate(-60deg);\n}\n\n.gel {\n height: 30px;\n width: 30px;\n transition: all .3s;\n -webkit-transition: all .3s;\n position: absolute;\n top: 50%;\n left: 50%;\n}\n\n.center-gel {\n margin-left: -15px;\n margin-top: -15px;\n animation-name: pulse00;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n -webkit-animation-name: pulse00;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n}\n\n.c1 {\n margin-left: -47px;\n margin-top: -15px;\n}\n\n.c2 {\n margin-left: -31px;\n margin-top: -43px;\n}\n\n.c3 {\n margin-left: 1px;\n margin-top: -43px;\n}\n\n.c4 {\n margin-left: 17px;\n margin-top: -15px;\n}\n\n.c5 {\n margin-left: -31px;\n margin-top: 13px;\n}\n\n.c6 {\n margin-left: 1px;\n margin-top: 13px;\n}\n\n.c7 {\n margin-left: -63px;\n margin-top: -43px;\n}\n\n.c8 {\n margin-left: 33px;\n margin-top: -43px;\n}\n\n.c9 {\n margin-left: -15px;\n margin-top: 41px;\n}\n\n.c10 {\n margin-left: -63px;\n margin-top: 13px;\n}\n\n.c11 {\n margin-left: 33px;\n margin-top: 13px;\n}\n\n.c12 {\n margin-left: -15px;\n margin-top: -71px;\n}\n\n.c13 {\n margin-left: -47px;\n margin-top: -71px;\n}\n\n.c14 {\n margin-left: 17px;\n margin-top: -71px;\n}\n\n.c15 {\n margin-left: -47px;\n margin-top: 41px;\n}\n\n.c16 {\n margin-left: 17px;\n margin-top: 41px;\n}\n\n.c17 {\n margin-left: -79px;\n margin-top: -15px;\n}\n\n.c18 {\n margin-left: 49px;\n margin-top: -15px;\n}\n\n.c19 {\n margin-left: -63px;\n margin-top: -99px;\n}\n\n.c20 {\n margin-left: 33px;\n margin-top: -99px;\n}\n\n.c21 {\n margin-left: 1px;\n margin-top: -99px;\n}\n\n.c22 {\n margin-left: -31px;\n margin-top: -99px;\n}\n\n.c23 {\n margin-left: -63px;\n margin-top: 69px;\n}\n\n.c24 {\n margin-left: 33px;\n margin-top: 69px;\n}\n\n.c25 {\n margin-left: 1px;\n margin-top: 69px;\n}\n\n.c26 {\n margin-left: -31px;\n margin-top: 69px;\n}\n\n.c27 {\n margin-left: -79px;\n margin-top: -15px;\n}\n\n.c28 {\n margin-left: -95px;\n margin-top: -43px;\n}\n\n.c29 {\n margin-left: -95px;\n margin-top: 13px;\n}\n\n.c30 {\n margin-left: 49px;\n margin-top: 41px;\n}\n\n.c31 {\n margin-left: -79px;\n margin-top: -71px;\n}\n\n.c32 {\n margin-left: -111px;\n margin-top: -15px;\n}\n\n.c33 {\n margin-left: 65px;\n margin-top: -43px;\n}\n\n.c34 {\n margin-left: 65px;\n margin-top: 13px;\n}\n\n.c35 {\n margin-left: -79px;\n margin-top: 41px;\n}\n\n.c36 {\n margin-left: 49px;\n margin-top: -71px;\n}\n\n.c37 {\n margin-left: 81px;\n margin-top: -15px;\n}\n\n.r1 {\n animation-name: pulse00;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n animation-delay: .2s;\n -webkit-animation-name: pulse00;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n -webkit-animation-delay: .2s;\n}\n\n.r2 {\n animation-name: pulse00;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n animation-delay: .4s;\n -webkit-animation-name: pulse00;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n -webkit-animation-delay: .4s;\n}\n\n.r3 {\n animation-name: pulse00;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n animation-delay: .6s;\n -webkit-animation-name: pulse00;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n -webkit-animation-delay: .6s;\n}\n\n.r1 > .hex-brick {\n animation-name: fade00;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n animation-delay: .2s;\n -webkit-animation-name: fade00;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n -webkit-animation-delay: .2s;\n}\n\n.r2 > .hex-brick {\n animation-name: fade00;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n animation-delay: .4s;\n -webkit-animation-name: fade00;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n -webkit-animation-delay: .4s;\n}\n\n.r3 > .hex-brick {\n animation-name: fade00;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n animation-delay: .6s;\n -webkit-animation-name: fade00;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n -webkit-animation-delay: .6s;\n}\n\n@keyframes pulse00 {\n 0% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n\n 50% {\n -webkit-transform: scale(0.01);\n transform: scale(0.01);\n }\n\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n@keyframes fade00 {\n 0% {\n background: rgb(228, 0, 228);\n }\n\n 50% {\n background: red;\n }\n\n 100% {\n background: violet;\n }\n}\n"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"312c3b","snapshot":null,"tags":null,"title":"loader by vikas7754","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":368,"cssLen":1274,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Status

\n","css":"@keyframes blinkCursor {\n 50% {\n border-right-color: transparent;\n }\n}\n\n@keyframes typeAndDelete {\n 0%,\n 10% {\n width: 0;\n }\n\n 45%,\n 55% {\n width: 5em;\n }\n\n 90%,\n 100% {\n width: 0;\n }\n}\n\n.terminal-loader {\n width: 100%;\n max-width: 400px;\n height: 200px;\n background: #1c1c1c;\n border: 1px solid #ffffff3e;\n border-radius: 10px;\n overflow: hidden;\n margin: 20px;\n box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);\n}\n\n.terminal-header {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #343434;\n padding: 6px;\n}\n\n.terminal-controls {\n position: absolute;\n left: 10px;\n display: flex;\n gap: 7px;\n}\n\n.control {\n display: inline-block;\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: #777;\n}\n\n.control.close {\n background-color: #e33;\n}\n\n.control.minimize {\n background-color: #ee0;\n}\n\n.control.maximize {\n background-color: #0b0;\n}\n\n.terminal-title {\n color: #eeeeeec1;\n}\n\n.content {\n padding: 10px;\n}\n.text {\n display: inline-block;\n white-space: nowrap;\n overflow: hidden;\n border-right: 2px solid green;\n animation: typeAndDelete 4s steps(11) infinite,\n blinkCursor 0.5s step-end infinite alternate;\n color: rgb(0, 196, 0);\n font-weight: 600;\n}\n"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"cde5f6","snapshot":null,"tags":null,"title":"loader by G4b413l","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":638,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".pulsar {\n --uib-size: 40px;\n --uib-speed: 0.9s;\n --uib-color: white;\n position: relative;\n height: var(--uib-size);\n width: var(--uib-size);\n}\n\n.pulsar::before,\n.pulsar::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n border-radius: 50%;\n background-color: var(--uib-color);\n animation: pulse9173412 var(--uib-speed) ease-in-out infinite;\n transform: scale(0);\n}\n\n.pulsar::after {\n animation-delay: calc(var(--uib-speed) / -2);\n}\n\n@keyframes pulse9173412 {\n 0%,\n 100% {\n transform: scale(0);\n opacity: 1;\n }\n\n 50% {\n transform: scale(1);\n opacity: 0.25;\n }\n}\n"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"9bbe1c","snapshot":null,"tags":null,"title":"loader by bociKond","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":96,"cssLen":1299,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Loading...\n

","css":"/* phone */\n.phone {\n --screen-clr: #0d85aa;\n --border-clr: #29536d;\n --loader-clr: #CCE3DE;\n background-color: var(--screen-clr);\n height: 13rem;\n aspect-ratio: 10/16;\n border-radius: .5rem;\n border: 5px solid var(--border-clr);\n border-top: 10px solid var(--border-clr);\n border-bottom: 10px solid var(--border-clr);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n animation: shake .5s infinite linear;\n position: relative;\n}\n\n/* camera */\n.phone::after {\n content: '';\n position: absolute;\n top: -7px;\n left: 50%;\n transform: translateX(-50%);\n width: 1rem;\n height: 5px;\n background-color: var(--loader-clr);\n border-radius: .5rem;\n}\n\n/* loader */\n.loader {\n border: 10px dashed var(--loader-clr);\n width: 2rem;\n height: 2rem;\n padding: 1.7rem;\n border-radius: 50%;\n animation: loading 2s infinite ease-in-out;\n}\n\n/* loading text */\n.text {\n color: var(--loader-clr);\n}\n\n/* loader spinning */\n@keyframes loading {\n 0% {\n rotate: 0deg;\n }\n\n 100% {\n rotate: 360deg;\n }\n}\n\n/* phone shaking */\n@keyframes shake {\n 0% {\n rotate: 0deg;\n }\n\n 10% {\n rotate: .5deg;\n }\n\n 20% {\n rotate: 0deg;\n }\n\n 30% {\n rotate: -.5deg;\n }\n\n 50% {\n rotate: 0deg;\n }\n\n 100% {\n rotate: 0deg;\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"114e52","snapshot":null,"tags":null,"title":"loader by garerim","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":300,"cssLen":801,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".anim-box {\n width: 200px;\n height: 200px;\n border: 5px solid #333;\n margin: 100px auto;\n position: relative;\n}\n\n.anim-interieur {\n width: 100px;\n height: 50px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n /* background-color: orange; */\n text-align: center;\n}\n\n.rect {\n background-color: #333;\n display: inline-block;\n height: 60px;\n width: 6px;\n margin: 0px 1px;\n animation: etire 1.2s infinite ease-in-out;\n}\n\n@keyframes etire {\n 0% {\n transform: scaleY(0.4);\n }\n\n 20% {\n transform: scaleY(1);\n }\n\n 40% {\n transform: scaleY(0.4);\n }\n\n 100% {\n transform: scaleY(0.4);\n }\n}\n\n.rect2 {\n animation-delay: -1.1s;\n}\n\n.rect3 {\n animation-delay: -1s;\n}\n\n.rect4 {\n animation-delay: -0.9s;\n}\n\n.rect5 {\n animation-delay: -0.8s;\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"604f62","snapshot":null,"tags":null,"title":"loader by davidhbt","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":339,"cssLen":987,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"@keyframes bounce {\n 0%, 80%, 100% {\n transform: scale(0);\n opacity: 0;\n }\n\n 40% {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n.loader {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n width: 100px;\n height: 100px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.circle {\n width: 20px;\n height: 20px;\n background-color: rgb(83, 82, 82);\n border-radius: 50%;\n margin: 2px;\n animation: bounce 1.2s infinite ease-in-out;\n}\n\n.circle:nth-child(2) {\n animation-delay: -0.1s;\n}\n\n.circle:nth-child(3) {\n animation-delay: -0.2s;\n}\n\n.circle:nth-child(4) {\n animation-delay: -0.3s;\n}\n\n.circle:nth-child(5) {\n animation-delay: -0.4s;\n}\n\n.circle:nth-child(6) {\n animation-delay: -0.5s;\n}\n\n.circle:nth-child(7) {\n animation-delay: -0.6s;\n}\n\n.circle:nth-child(8) {\n animation-delay: -0.7s;\n}\n\n.circle:nth-child(9) {\n animation-delay: -0.8s;\n}\n\n.circle:nth-child(10) {\n animation-delay: -0.9s;\n}"}]}},"actionData":null,"errors":null}