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

","css":".loader {\n background: linear-gradient(to right, #2cc16f 50%, #fafafa 50%);\n border-radius: 100%;\n height: 70px;\n width: 70px;\n animation: loader-circle-time 8s steps(800, start) infinite;\n}\n\n.loader:after {\n content: \"\";\n border-radius: 100% 0 0 100% / 50% 0 0 50%;\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 50%;\n animation: loader-circle-mask 8s steps(250, start) infinite;\n transform-origin: 100% 50%;\n}\n\n@keyframes loader-circle-time {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes loader-circle-mask {\n 0% {\n background: #fafafa;\n transform: rotate(0deg);\n }\n\n 50% {\n background: #fafafa;\n transform: rotate(-180deg);\n }\n\n 50.01% {\n background: #2cc16f;\n transform: rotate(0deg);\n }\n\n 100% {\n background: #2cc16f;\n transform: rotate(-180deg);\n }\n}\n\n \n"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"087c34","snapshot":null,"tags":null,"title":"loader by Pradeepsaranbishnoi","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":592,"cssLen":1906,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

","css":"/* The loader container */\n.loader {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 200px;\n height: 100px;\n margin-top: -100px;\n margin-left: -100px;\n perspective: 1000px;\n transform-style: preserv3d;\n}\n\n.loader--reflect {\n margin-top: 0;\n}\n\n.loader--reflect:after {\n content: '';\n position: absolute;\n top: 0;\n left: -25%;\n width: 150%;\n height: 110%;\n background: linear-gradient(0deg, rgba(238, 238, 238, 1), rgba(238, 238, 238, 1) 20%, rgba(238, 238, 238, 0.3));\n}\n\n\n/* The bar */\n.bar {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 20px;\n height: 100px;\n background-color: #1e3f57;\n transform: scaleY(0);\n transform-style: preserve3d;\n animation: bar 3s cubic-bezier(.81,.04,.4,.7) infinite;\n}\n\n.bar:nth-child(2) {\n left: 20px;\n background-color: #264a63;\n animation-delay: 50ms;\n}\n\n.bar:nth-child(3) {\n left: 40px;\n background-color: #2d566f;\n animation-delay: 100ms;\n}\n\n.bar:nth-child(4) {\n left: 60px;\n background-color: #35617a;\n animation-delay: 150ms;\n}\n\n.bar:nth-child(5) {\n left: 80px;\n background-color: #3d6d86;\n animation-delay: 200ms;\n}\n\n.bar:nth-child(6) {\n left: 100px;\n background-color: #447892;\n animation-delay: 250ms;\n}\n\n.bar:nth-child(7) {\n left: 120px;\n background-color: #4c849e;\n animation-delay: 300ms;\n}\n\n.bar:nth-child(8) {\n left: 140px;\n background-color: #548fa9;\n animation-delay: 350ms;\n}\n\n.bar:nth-child(9) {\n left: 160px;\n background-color: #5c9bb5;\n animation-delay: 400ms;\n}\n\n.bar:nth-child(10) {\n left: 180px;\n background-color: #63a6c1;\n animation-delay: 450ms;\n}\n\n.loader--reflect .bar {\n animation-name: bar-reflect;\n}\n\n@keyframes bar {\n 0% {\n transform: rotateZ(-180deg) rotateX(-360deg);\n }\n\n 75%,100% {\n transform: rotateZ(0) rotateX(0);\n }\n}\n\n@keyframes bar-reflect {\n 0% {\n transform: rotateZ(180deg) rotateX(360deg);\n }\n\n 75%,100% {\n transform: rotateZ(0) rotateX(0);\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"0dafd7","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":156,"cssLen":2205,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".frame {\n position: absolute;\n top: 50%;\n left: 50%;\n margin-top: -200px;\n margin-left: -200px;\n}\n\n.center {\n position: absolute;\n width: 220px;\n height: 220px;\n top: 90px;\n left: 90px;\n}\n\n.dot-1 {\n position: absolute;\n z-index: 3;\n width: 30px;\n height: 30px;\n top: 95px;\n left: 95px;\n background: #fff;\n border-radius: 50%;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n -webkit-animation: jump-jump-1 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;\n animation: jump-jump-1 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;\n}\n\n.dot-2 {\n position: absolute;\n z-index: 2;\n width: 60px;\n height: 60px;\n top: 80px;\n left: 80px;\n background: #fff;\n border-radius: 50%;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n -webkit-animation: jump-jump-2 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;\n animation: jump-jump-2 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;\n}\n\n.dot-3 {\n position: absolute;\n z-index: 1;\n width: 90px;\n height: 90px;\n top: 65px;\n left: 65px;\n background: #fff;\n border-radius: 50%;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n -webkit-animation: jump-jump-3 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;\n animation: jump-jump-3 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;\n}\n\n@keyframes jump-jump-1 {\n 0%, 70% {\n box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);\n -webkit-transform: scale(0);\n transform: scale(0);\n }\n\n 100% {\n box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n@keyframes jump-jump-2 {\n 0%, 40% {\n box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);\n -webkit-transform: scale(0);\n transform: scale(0);\n }\n\n 100% {\n box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n@keyframes jump-jump-3 {\n 0%, 10% {\n box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);\n -webkit-transform: scale(0);\n transform: scale(0);\n }\n\n 100% {\n box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"7aec4b","snapshot":null,"tags":null,"title":"loader by Saiyed-Tanvir","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":23,"cssLen":460,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".box {\n height: 5cm;\n width: 5cm;\n border: 5px solid #ffa600;\n box-shadow: inset 0 0 0 #ffa600;\n animation: load 2s ease-in-out infinite;\n}\n\n@keyframes load {\n 0% {\n box-shadow: inset -2.5cm -2.5cm 0 #ffa600;\n }\n\n 25% {\n box-shadow: inset 2.5cm -2.5cm 0 #ffa600;\n }\n\n 50% {\n box-shadow: inset 2.5cm 2.5cm 0 #ffa600;\n }\n\n 75% {\n box-shadow: inset -2.5cm 2.5cm 0 #ffa600;\n }\n\n 100% {\n box-shadow: inset -2.5cm -2.5cm 0 #ffa600;\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"e55ee1","snapshot":null,"tags":null,"title":"loader by AqFox","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":229,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".spinner {\n width: 6px;\n height: 6px;\n animation: spinner-xp626r 1.1s infinite;\n border-radius: 50%;\n box-shadow: 24px 0 0 6px #004dff, -24px 0 0 6px #004dff;\n}\n\n@keyframes spinner-xp626r {\n to {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"cc98c1","snapshot":null,"tags":null,"title":"loader by bernethe","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":628,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n clear: both;\n width: 2rem;\n height: 2rem;\n margin: 1rem auto;\n border: 0.0625rem #000 solid;\n border-radius: 0.25rem;\n position: relative;\n background: linear-gradient(45deg, transparent 49%, #000 50%, #000 50%, transparent 51%, transparent),\n\t\t\t\tlinear-gradient(-45deg, transparent 49%, #000 50%, #000 50%, transparent 51%, transparent);\n background-size: 1rem 1rem;\n background-position: 0% 0%;\n -webkit-animation: spTexture 1s infinite linear;\n animation: spTexture 1s infinite linear;\n}\n\n@keyframes spTexture {\n from {\n background-position: 0 0;\n }\n\n to {\n background-position: -1rem 0;\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"cedd43","snapshot":null,"tags":null,"title":"loader by shadowfax29","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":156,"cssLen":1185,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".sharingon {\n width: 6em;\n height: 6em;\n background-color: red;\n border: 6px solid black;\n animation: rot 1s ease-in-out infinite;\n}\n\n.ring {\n position: absolute;\n content: \"\";\n left: 50%;\n top: 50%;\n width: 3.5em;\n height: 3.5em;\n border: 4px solid rgb(110, 13 ,13 ,0.5);\n transform: translate(-50%,-50%);\n}\n\n.sharingon, .ring, .to,.circle {\n border-radius: 50%;\n}\n\n.to,.circle {\n position: absolute;\n content: \"\";\n width: 0.9em;\n height: 0.9em;\n background-color: black;\n}\n\n.to:nth-child(1) {\n top: -0.5em;\n left: 50%;\n transform: translate(-40%);\n}\n\n.to::before {\n content: \"\";\n position: absolute;\n top: -0.5em;\n right: -0.2em;\n width: 1.1em;\n height: 0.9em;\n box-sizing: border-box;\n border-left: 16px solid black;\n border-radius: 100% 0 0;\n}\n\n.to:nth-child(2) {\n bottom: 0.5em;\n left: -0.35em;\n transform: rotate(-120deg);\n}\n\n.to:nth-child(3) {\n bottom: 0.5em;\n right: -0.35em;\n transform: rotate(120deg);\n}\n\n.circle {\n top: 50%;\n left: 50%;\n transform: translate(-50%,-50%);\n box-shadow: 0 0 20px 1px;\n width: 1em;\n height: 1em;\n}\n\n@keyframes rot {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"6017eb","snapshot":null,"tags":null,"title":"loader by Cebucoder","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":90,"cssLen":839,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Redirecting...\n

\n","css":".loader {\n width: 350px;\n height: 180px;\n border-radius: 10px;\n background: #fff;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-evenly;\n padding: 30px;\n box-shadow: 2px 2px 10px -5px lightgrey;\n}\n.loading {\n width: 100%;\n height: 10px;\n background: lightgrey;\n border-radius: 10px;\n position: relative;\n}\n.loading::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 50%;\n height: 10px;\n background: #002;\n border-radius: 10px;\n z-index: 1;\n animation: loading 0.6s alternate infinite;\n}\nlabel {\n color: #002;\n font-size: 18px;\n animation: bit 0.6s alternate infinite;\n}\n\n@keyframes bit {\n from {\n opacity: 0.3;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes loading {\n 0% {\n left: 25%;\n }\n 100% {\n left: 50%;\n }\n 0% {\n left: 0%;\n }\n}\n"},{"created":"2024-01-22T16:54:12.000Z","isPrivate":0,"projectId":"5965b5","snapshot":null,"tags":null,"title":"loader by Ratinax","updated":"2024-01-22T16:54:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":146,"cssLen":1515,"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 orange,\n 0.5em -0.5em 1em orangered,\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 orange,\n 0.5em -0.5em 3em orangered,\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:12.000Z","isPrivate":0,"projectId":"83a5c7","snapshot":null,"tags":null,"title":"loader by akshat-patel28","updated":"2024-01-22T16:54:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":71,"cssLen":595,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\nLoading...\n

","css":".loader {\n position: relative;\n overflow: hidden;\n border-right: 3px solid;\n width: 0px;\n animation: typewriter 2s steps(10) infinite alternate , blink 0.5s steps(10) infinite;\n}\n\n.loader-text {\n font-size: 40px;\n font-weight: 700;\n background: linear-gradient(to right,#159957, #155799);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n@keyframes typewriter {\n 0% {\n width: 0px;\n }\n\n 100% {\n width: 240px;\n }\n}\n\n@keyframes blink {\n 0% {\n border-right-color: rgba(255,255,255,.75);\n ;\n }\n\n 100% {\n border-right-color: transparent;\n }\n}"},{"created":"2024-01-22T16:54:12.000Z","isPrivate":0,"projectId":"e38575","snapshot":null,"tags":null,"title":"loader by G4b413l","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":263,"cssLen":1165,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".pinwheel {\n --uib-size: 45px;\n --uib-speed: 0.8s;\n --uib-color: #312f2b;\n --uib-line-weight: 4px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--uib-size);\n width: var(--uib-size);\n}\n\n.pinwheel__line {\n position: absolute;\n top: calc(50% - var(--uib-line-weight) / 2);\n left: 0;\n height: var(--uib-line-weight);\n width: 100%;\n border-radius: calc(var(--uib-line-weight) / 2);\n background-color: var(--uib-color);\n animation: rotate81232 var(--uib-speed) ease-in-out infinite;\n}\n\n.pinwheel__line:nth-child(2) {\n animation-delay: calc(var(--uib-speed) * 0.075);\n opacity: 0.8;\n}\n\n.pinwheel__line:nth-child(3) {\n animation-delay: calc(var(--uib-speed) * 0.15);\n opacity: 0.6;\n}\n\n.pinwheel__line:nth-child(4) {\n animation-delay: calc(var(--uib-speed) * 0.225);\n opacity: 0.4;\n}\n\n.pinwheel__line:nth-child(5) {\n animation-delay: calc(var(--uib-speed) * 0.3);\n opacity: 0.2;\n}\n\n.pinwheel__line:nth-child(6) {\n animation-delay: calc(var(--uib-speed) * 0.375);\n opacity: 0.1;\n}\n\n@keyframes rotate81232 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(180deg);\n }\n}\n"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"3fcdd7","snapshot":null,"tags":null,"title":"loader by vk-uiux","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":138,"cssLen":526,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".card {\n width: 18rem;\n padding: 1rem;\n text-align: center;\n border-radius: .8rem;\n background-color: white;\n}\n\n.card__skeleton {\n background-image: linear-gradient(\n\t\t90deg,\n\t\t#ccc 0px,\n\t\trgb(229 229 229 / 90%) 40px,\n\t\t#ccc 80px\n\t);\n background-size: 300%;\n background-position: 100% 0;\n border-radius: inherit;\n animation: shimmer 1.5s infinite;\n}\n\n.card__title {\n height: 15px;\n margin-bottom: 15px;\n}\n\n.card__description {\n height: 100px;\n}\n\n@keyframes shimmer {\n to {\n background-position: -100% 0;\n }\n}"}]}},"actionData":null,"errors":null}