{"loaderData":{"0":null,"0-3":{"total":7424,"projects":[{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"afc7ad","snapshot":null,"tags":null,"title":"loader by Ratinax","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":146,"cssLen":1505,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".loader {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: not-allowed;\n scale: 0.7;\n}\n\n.central {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 10em;\n height: 10em;\n border-radius: 50%;\n box-shadow: 0.5em 1em 1em red,\n -0.5em 0.5em 1em lime,\n 0.5em -0.5em 1em purple,\n -0.5em -0.5em 1em yellow;\n}\n\n.external-shadow {\n width: 10em;\n height: 10em;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n box-shadow: 0.5em 0.5em 3em red,\n -0.5em 0.5em 3em lime,\n 0.5em -0.5em 3em purple,\n -0.5em -0.5em 3em yellow;\n z-index: 999;\n animation: rotate 3s linear infinite;\n background-color: #212121;\n}\n\n.intern {\n position: absolute;\n color: white;\n z-index: 9999;\n}\n\n.intern::before {\n content: \"100%\";\n animation: percent 2s ease-in-out infinite;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(180deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes percent {\n 0% {\n content: '0%';\n }\n\n 25% {\n content: '25%';\n }\n\n 33% {\n content: '33%';\n }\n\n 42% {\n content: '42%';\n }\n\n 51% {\n content: '51%';\n }\n\n 67% {\n content: '67%';\n }\n\n 74% {\n content: '74%';\n }\n\n 75% {\n content: '75%';\n }\n\n 86% {\n content: '86%';\n }\n\n 95% {\n content: '95%';\n }\n\n 98% {\n content: '98%';\n }\n\n 99% {\n content: '99%';\n }\n}"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"521f26","snapshot":null,"tags":null,"title":"loader by Smit-Prajapati","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":19611,"cssLen":10362,"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 2s 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 box-shadow: 0px 0px 5px 0px rgb(255, 255, 255);\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.0444444444s;\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.0888888889s;\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.1333333333s;\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.1777777778s;\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.2222222222s;\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.2666666667s;\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.3111111111s;\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.3555555556s;\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: 0.4s;\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: 0.4444444444s;\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: 0.4888888889s;\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: 0.5333333333s;\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: 0.5777777778s;\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: 0.6222222222s;\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: 0.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: 0.7111111111s;\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: 0.7555555556s;\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: 0.8s;\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: 0.8444444444s;\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: 0.8888888889s;\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: 0.9333333333s;\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: 0.9777777778s;\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: 1.0222222222s;\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: 1.0666666667s;\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: 1.1111111111s;\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: 1.1555555556s;\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: 1.2s;\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: 1.2444444444s;\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: 1.2888888889s;\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: 1.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: 1.3777777778s;\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: 1.4222222222s;\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: 1.4666666667s;\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: 1.5111111111s;\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: 1.5555555556s;\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: 1.6s;\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: 1.6444444444s;\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: 1.6888888889s;\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: 1.7333333333s;\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: 1.7777777778s;\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: 1.8222222222s;\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: 1.8666666667s;\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: 1.9111111111s;\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: 1.9555555556s;\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 20% {\n background: white;\n }\n\n 70% {\n background: grey;\n box-shadow: 0px 0px 2px rgba(255, 255, 255, 0);\n }\n}"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"452c99","snapshot":null,"tags":null,"title":"loader by Cornerstone-04","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":398,"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 border: 7px double;\n border-color: #43cec7 transparent;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n animation: spin13213 2s linear infinite;\n}\n\n.loader div {\n width: 50%;\n height: 50%;\n background-color: #43cec7;\n border-radius: 50%;\n}\n\n@keyframes spin13213 {\n to {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"a55579","snapshot":null,"tags":null,"title":"loader by adamgiebl","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":208,"cssLen":1019,"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 align-items: center;\n justify-content: center;\n flex-direction: row;\n}\n\n.slider {\n overflow: hidden;\n background-color: white;\n margin: 0 15px;\n height: 85px;\n width: 16px;\n border-radius: 15px;\n box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1), -15px -15px 30px #fff,\n inset -5px -5px 10px rgba(0, 0, 255, 0.1),\n inset 5px 5px 10px rgba(0, 0, 0, 0.1);\n position: relative;\n transform: translateY(-7px);\n}\n\n.slider::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n height: 25px;\n width: 25px;\n border-radius: 100%;\n box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.3), 0px 420px 0 400px #FF6B6B,\n inset 0px 0px 0px rgba(0, 0, 0, 0.1);\n animation: animate-2 2s ease-in-out infinite;\n animation-delay: calc(-1s * var(--i));\n}\n\n@keyframes animate-2 {\n 0% {\n transform: translateY(60px);\n filter: hue-rotate(0deg);\n }\n\n 50% {\n transform: translateY(0);\n }\n\n 100% {\n transform: translateY(60px);\n filter: hue-rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"a66211","snapshot":null,"tags":null,"title":"loader by Srivatsajbhat","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1266,"cssLen":1276,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n\t\n

\n","css":":root {\n --hue: 223px;\n --bg: hsl(var(--hue),90%,95%);\n --fg: hsl(var(--hue),90%,5%);\n --trans-dur: 0.3s;\n font-size: calc(16px + (24px - 16px) * (690px - 320px) / (1280px - 320px));\n}\n\n.body {\n background-color: var(--bg);\n color: var(--fg);\n font: 16px/1.5 sans-serif;\n height: 100px;\n display: grid;\n place-items: center;\n transition: background-color var(--trans-dur);\n}\n\nmain {\n padding: 24px 0;\n}\n\n.ip {\n width: 100px;\n height: 50px;\n}\n\n.ip__track {\n stroke: hsl(var(--hue),90%,90%);\n transition: stroke var(--trans-dur);\n}\n\n.ip__worm1,\n.ip__worm2 {\n animation: worm1 2s linear infinite;\n}\n\n.ip__worm2 {\n animation-name: worm2;\n}\n\n/* Dark theme */\n@media (prefers-color-scheme: dark) {\n :root {\n --bg: hsl(var(--hue),90%,5%);\n --fg: hsl(var(--hue),90%,95%);\n }\n\n .ip__track {\n stroke: hsl(var(--hue),90%,15%);\n }\n}\n\n/* Animation */\n@keyframes worm1 {\n from {\n stroke-dashoffset: 0;\n }\n\n 50% {\n animation-timing-function: steps(1);\n stroke-dashoffset: -358;\n }\n\n 50.01% {\n animation-timing-function: linear;\n stroke-dashoffset: 358;\n }\n\n to {\n stroke-dashoffset: 0;\n }\n}\n\n@keyframes worm2 {\n from {\n stroke-dashoffset: 358;\n }\n\n 50% {\n stroke-dashoffset: 0;\n }\n\n to {\n stroke-dashoffset: -358;\n }\n}"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"2fd004","snapshot":null,"tags":null,"title":"loader by PriyanshuGupta28","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":207,"cssLen":1393,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader-container {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%\n}\n\n.loader {\n width: 80px;\n height: 80px;\n position: relative;\n}\n\n.loader .circle {\n position: absolute;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n animation: pulse 1.2s infinite ease-in-out;\n}\n\n.loader .circle:nth-child(1) {\n top: 0;\n left: 30px;\n background-color: #4158D0;\n background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);\n box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;\n}\n\n.loader .circle:nth-child(2) {\n top: 30px;\n left: 60px;\n background-color: #0093E9;\n background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);\n animation-delay: 0.4s;\n box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;\n}\n\n.loader .circle:nth-child(3) {\n top: 60px;\n left: 30px;\n background-color: #00DBDE;\n background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);\n animation-delay: 0.8s;\n box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;\n}\n\n.loader .circle:nth-child(4) {\n top: 30px;\n left: 0;\n background-color: #3EECAC;\n background-image: linear-gradient(19deg, #3EECAC 0%, #EE74E1 100%);\n animation-delay: 1.2s;\n box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.2);\n opacity: 0.5;\n }\n\n 100% {\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"76e97d","snapshot":null,"tags":null,"title":"loader by jeremyssocial","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":512,"cssLen":1147,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

Status

\n Loading\n .\n .\n .\n

\n","css":"/* Terminal Window */\n.terminal {\n width: 500px;\n background-color: #000;\n color: #0f0;\n font-family: \"Courier New\", Courier, monospace;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);\n}\n\n/* Terminal Header */\n.terminal-header {\n background-color: #333;\n padding: 5px;\n display: flex;\n align-items: center;\n color: #fff;\n}\n\n.buttons {\n display: flex;\n margin-right: 15px;\n}\n\n.buttons span {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n display: inline-block;\n margin-right: 5px;\n}\n\n.close {\n background-color: #ff605c;\n}\n.minimize {\n background-color: #ffbd44;\n}\n.maximize {\n background-color: #00ca4e;\n}\n\n.title {\n flex-grow: 1;\n text-align: center;\n}\n\n/* Terminal Body */\n.terminal-body {\n padding: 10px;\n}\n\n.terminal-loader {\n display: inline-flex;\n align-items: center;\n}\n\n.loader-text {\n margin-right: 5px;\n}\n\n.dot {\n opacity: 0;\n animation: dotFadeInOut 1.5s infinite;\n}\n\n@keyframes dotFadeInOut {\n 0%,\n 100% {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n}\n\n#dot1 {\n animation-delay: 0.5s;\n}\n\n#dot2 {\n animation-delay: 0.6s;\n}\n\n#dot3 {\n animation-delay: 0.7s;\n}\n"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"d45118","snapshot":null,"tags":null,"title":"loader by bernethe","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":745,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 2rem;\n height: 2rem;\n clear: both;\n margin: 1rem auto;\n border: 0.0625rem #000 solid;\n border-radius: .25rem;\n overflow: hidden;\n position: relative;\n}\n\n.loader:after, .loader:before {\n content: '';\n border-radius: 50%;\n position: absolute;\n width: inherit;\n height: inherit;\n animation: spVortex 2s infinite linear;\n}\n\n.loader:before {\n border-top: 0.375rem #000 solid;\n top: -0.1875rem;\n left: calc( -50% - 0.1875rem );\n transform-origin: right center;\n}\n\n.loader:after {\n border-bottom: 0.375rem #000 solid;\n top: 0.1875rem;\n right: calc( -50% - 0.1875rem );\n transform-origin: left center;\n}\n\n@keyframes spVortex {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(359deg);\n }\n}"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"306173","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":955,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n height: 150px;\n width: 100px;\n border-radius: 55px 55px 10px 10px;\n position: relative;\n background: #FF3D00;\n background-image: linear-gradient(0deg,\n #f63a99 25%,\n #30dcf6 25%,\n #30dcf6 25%,\n #30dcf6 50%,\n #f2d200 50%,\n #f2d200 50%,\n #f2d200 75%,\n #70ca5c 75%);\n background-position: 0px 0px;\n background-size: auto 175px;\n background-repeat: repeat-y;\n animation: colorShift 6s linear infinite;\n}\n\n.loader:before {\n content: '';\n position: absolute;\n left: 10px;\n bottom: 15px;\n width: 15px;\n height: 100px;\n border-radius: 50px;\n background: rgba(255, 255, 255, 0.5);\n}\n\n.loader:after {\n content: \"\";\n position: absolute;\n left: 50%;\n top: 100%;\n transform: translate(-50% , 0);\n box-shadow: 0 15px 2px rgba(0, 0, 0, 0.25) inset;\n width: 32px;\n height: 45px;\n background: #E09C5F;\n border-radius: 0 0 12px 12px;\n}\n\n@keyframes colorShift {\n to {\n background-position: 0 175px\n }\n}\n\n "},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"5a3566","snapshot":null,"tags":null,"title":"loader by TimTrayler","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":340,"cssLen":709,"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

","css":".spinner {\n --accent: fuchsia;\n --max-scale: 4;\n --speed: 0.2;\n display: flex;\n gap: 0.3em;\n transform: skew(15deg, 10deg);\n}\n\n.spinner span {\n display: block;\n background-color: var(--accent);\n box-shadow: 1px 1px 5px 0.2px var(--accent);\n width: 0.7px;\n height: 0.6em;\n}\n\n.spinner .spinner-part-0 {\n animation: load432 calc(1s/var(--speed)) linear infinite;\n}\n\n.spinner .spinner-part-1 {\n animation: load432 calc(0.16s/var(--speed)) linear infinite;\n}\n\n.spinner .spinner-part-2 {\n animation: load432 calc(0.4s/var(--speed)) linear infinite;\n}\n\n.spinner .spinner-part-3 {\n animation: load432 calc(0.5s/var(--speed)) linear infinite;\n}\n\n@keyframes load432 {\n 50% {\n transform: scaleY(var(--max-scale));\n }\n}\n"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"ff1010","snapshot":null,"tags":null,"title":"loader by Markoslc","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":111,"cssLen":1017,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".item1, .item2, .item3 {\n position: absolute;\n background-color: transparent;\n left: calc(50% - (var(--size) / 2));\n top: calc(50% - (var(--size) / 2));\n height: var(--size);\n width: var(--size);\n border-radius: 50%;\n}\n\n.loader .item1 {\n --size: 90px;\n animation: size1_1 2.5s infinite alternate;\n z-index: 1;\n}\n\n.loader .item2 {\n --size: 60px;\n animation: size1_2 2.5s infinite alternate;\n z-index: 2;\n}\n\n.loader .item3 {\n --size: 30px;\n animation: size1_3 2.5s infinite alternate;\n z-index: 3;\n}\n\n@keyframes size1_1 {\n 0%,\n 10% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(1);\n box-shadow: 8px 8px 14px #c5c5c5, -8px -8px 14px #ffffff;\n }\n}\n\n@keyframes size1_2 {\n 0%,\n 40% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(1);\n box-shadow: 8px 8px 14px #c5c5c5, -8px -8px 14px #ffffff;\n }\n}\n\n@keyframes size1_3 {\n 0%,\n 70% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(1);\n box-shadow: 8px 8px 14px #c5c5c5, -8px -8px 14px #ffffff;\n }\n}"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"a30ae1","snapshot":null,"tags":null,"title":"loader by Vazafirst","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":241,"cssLen":1454,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"#page {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n#container {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n}\n\n#h3 {\n color: rgb(82, 79, 79);\n}\n\n#ring {\n width: 190px;\n height: 190px;\n border: 1px solid transparent;\n border-radius: 50%;\n position: absolute;\n}\n\n#ring:nth-child(1) {\n border-bottom: 8px solid rgb(240, 42, 230);\n animation: rotate1 2s linear infinite;\n}\n\n@keyframes rotate1 {\n from {\n transform: rotateX(50deg) rotateZ(110deg);\n }\n\n to {\n transform: rotateX(50deg) rotateZ(470deg);\n }\n}\n\n#ring:nth-child(2) {\n border-bottom: 8px solid rgb(240, 19, 67);\n animation: rotate2 2s linear infinite;\n}\n\n@keyframes rotate2 {\n from {\n transform: rotateX(20deg) rotateY(50deg) rotateZ(20deg);\n }\n\n to {\n transform: rotateX(20deg) rotateY(50deg) rotateZ(380deg);\n }\n}\n\n#ring:nth-child(3) {\n border-bottom: 8px solid rgb(3, 170, 170);\n animation: rotate3 2s linear infinite;\n}\n\n@keyframes rotate3 {\n from {\n transform: rotateX(40deg) rotateY(130deg) rotateZ(450deg);\n }\n\n to {\n transform: rotateX(40deg) rotateY(130deg) rotateZ(90deg);\n }\n}\n\n#ring:nth-child(4) {\n border-bottom: 8px solid rgb(207, 135, 1);\n animation: rotate4 2s linear infinite;\n}\n\n@keyframes rotate4 {\n from {\n transform: rotateX(70deg) rotateZ(270deg);\n }\n\n to {\n transform: rotateX(70deg) rotateZ(630deg);\n }\n}\n/* Improving visualization in light mode */"}]}},"actionData":null,"errors":null}