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

\n \n

\n ","css":"/* heart beat */\n.heartbeatloader {\n position: absolute;\n width: 10vmin;\n height: 10vmin;\n z-index: -2;\n margin: auto;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n}\n\n.svgdraw {\n top: 30%;\n left: 26%;\n position: absolute;\n width: 50%;\n height: 50%;\n transform: scale(1.4);\n z-index: 3;\n}\n\n.path {\n stroke: rgba(0, 0, 0, 0.95);\n stroke-width: 4;\n stroke-dasharray: 1000px;\n stroke-dashoffset: 1000px;\n animation: draw 1.5s infinite forwards normal linear;\n animation-delay: 0.1s;\n position: relative;\n}\n\n@keyframes draw {\n to {\n stroke-dashoffset: 0;\n }\n}\n\n.innercircle {\n position: absolute;\n top: 17%;\n left: 100.5%;\n transform: translate(-50%, -50%) scale(1.2);\n width: 160%;\n height: auto;\n z-index: 1;\n opacity: 0.97;\n animation: innerbeat 1.5s infinite linear forwards;\n}\n\n.innercircle:before,\n.innercircle:after {\n position: absolute;\n content: \"\";\n left: 25%;\n top: 0;\n width: 25%;\n height: auto;\n padding-bottom: 40%;\n background: rgb(225, 95, 95);\n border-radius: 50px 50px 0 0;\n transform: rotate(-45deg);\n transform-origin: 0 100%;\n}\n\n.innercircle:after {\n left: 0;\n transform: rotate(45deg);\n transform-origin: 100% 100%;\n}\n\n@keyframes innerbeat {\n 0% {\n transform: translate(-50%, -50%) scale(1.2);\n }\n\n 10% {\n transform: translate(-50%, -50%) scale(1.2);\n }\n\n 50% {\n transform: translate(-50%, -50%) scale(1.3);\n }\n\n 60% {\n transform: translate(-50%, -50%) scale(1.25);\n }\n\n 75% {\n transform: translate(-50%, -50%) scale(1.3);\n }\n}\n\n.outercircle {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: rgba(230, 92, 92, 0.774);\n box-shadow: 0 0 30px 0px #000;\n position: absolute;\n z-index: -1;\n opacity: 0.7;\n top: 0;\n left: 0;\n transform: scale(1.2);\n animation: outerbeat 1.5s infinite linear forwards;\n}\n\n@keyframes outerbeat {\n 0% {\n transform: scale(1.2);\n }\n\n 10% {\n transform: scale(1.2);\n }\n\n 50% {\n transform: scale(1.3);\n }\n\n 60% {\n transform: scale(1.25);\n }\n\n 75% {\n transform: scale(1.3);\n }\n}"},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"26c70d","snapshot":null,"tags":null,"title":"loader by Gianluks90","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":219,"cssLen":962,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n height: 50px;\n display: flex;\n align-items: flex-end;\n gap: 3px;\n}\n\n.bar {\n height: 5px;\n width: 12px;\n animation-duration: 0.45s;\n animation-name: changeHeight;\n animation-iteration-count: infinite;\n animation-direction: alternate;\n}\n\n.red {\n background-color: #E50000;\n box-shadow: 1px 1px 10px #E50000;\n animation-delay: 0.10s;\n}\n\n.orange {\n background-color: #FF8D00;\n box-shadow: 1px 1px 10px #FF8D00;\n animation-delay: 0.20s;\n}\n\n.yellow {\n background-color: #FFEE00;\n box-shadow: 1px 1px 10px #FFEE00;\n animation-delay: 0.25s;\n}\n\n.green {\n background-color: #008121;\n box-shadow: 1px 1px 10px #008121;\n animation-delay: 0.30s;\n}\n\n.blue {\n background-color: #004CFF;\n box-shadow: 1px 1px 10px #004CFF;\n animation-delay: 0.35s;\n}\n\n.violet {\n background-color: #760188;\n box-shadow: 1px 1px 10px #760188;\n animation-delay: 0.40s;\n}\n\n@keyframes changeHeight {\n from {\n height: 5px;\n }\n\n to {\n height: 40px;\n }\n}"},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"7d7840","snapshot":null,"tags":null,"title":"loader by mrhyddenn","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":557,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n position: relative;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.loader::before,\n.loader::after {\n content: \"\";\n position: absolute;\n border-radius: inherit;\n}\n\n.loader::before {\n width: 100%;\n height: 100%;\n background-image: linear-gradient(0deg, #ff00cc 0%, #333399 100%);\n animation: load012323 .5s infinite linear;\n}\n\n.loader::after {\n width: 85%;\n height: 85%;\n background-color: #222;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n@keyframes load012323 {\n to {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"15589c","snapshot":null,"tags":null,"title":"loader by mrhyddenn","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":69,"cssLen":570,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".progress-loader {\n top: 50%;\n left: 50%;\n position: absolute;\n transform: translate(-50%, -50%);\n}\n\n.progress-loader {\n width: 150px;\n background: rgba(236, 236, 238, 0.253);\n height: 3px;\n border-radius: 7px;\n}\n\n.progress {\n content: '';\n width: 1px;\n height: 3px;\n border-radius: 7px;\n background: rgb(255, 255, 255);\n transition: 0.5s;\n animation: loading1274 2s ease infinite;\n}\n\n@keyframes loading1274 {\n 0% {\n width: 0%;\n }\n\n 10% {\n width: 10%;\n }\n\n 50% {\n width: 40%;\n }\n\n 60% {\n width: 60%;\n }\n\n 100% {\n width: 100%;\n }\n}"},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"bc3259","snapshot":null,"tags":null,"title":"loader by angelo2004-mateus","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":832,"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: 10rem;\n height: 10rem;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n border-radius: 50%;\n box-shadow: -5px -5px 9px rgba(255,255,255,0.45), 5px 5px 9px rgba(94, 104, 121, 0.137);\n}\n\n.loader:before {\n height: 4rem;\n width: 4rem;\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 10;\n background: #ececec;\n border-radius: 50%;\n border: 2px solid #e2e1e1;\n box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), 5px 5px 9px rgba(94,104,121,0.3);\n}\n\n.loader span {\n width: 80%;\n height: 80%;\n border-radius: 50%;\n background: linear-gradient(to bottom, rgb(89, 92, 252), rgb(226, 57, 241));\n animation: rotate 1s infinite linear;\n}\n\n@keyframes rotate {\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"c1857f","snapshot":null,"tags":null,"title":"loader by sabbircoder07","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":193,"cssLen":999,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".progress {\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n text-align: center;\n width: 300px;\n margin-top: 30%;\n backface-visibility: hidden;\n}\n\n.inner:nth-child(1),\n.inner:nth-child(2),\n.inner:nth-child(3),\n.inner:nth-child(4),\n.inner:nth-child(5) {\n height: 20px;\n width: 20px;\n border-radius: 3px;\n animation: progress 1.2s ease-in infinite;\n}\n\n.inner:nth-child(1) {\n background-color: #2193b0;\n animation-delay: 0.15s;\n}\n\n.inner:nth-child(2) {\n background-color: #48b1bf;\n animation-delay: 0.25s;\n}\n\n.inner:nth-child(3) {\n background-color: #56ab2f;\n animation-delay: 0.35s;\n}\n\n.inner:nth-child(4) {\n background-color: #614385;\n animation-delay: 0.45s;\n}\n\n.inner:nth-child(5) {\n background-color: #185a9d;\n animation-delay: 0.55s;\n}\n\n@keyframes progress {\n 0% {\n transform: translateY(0px);\n opacity: 1;\n }\n\n 50% {\n transform: translateY(-60px);\n opacity: 0.8;\n }\n\n 100% {\n transform: translateY(0px);\n opacity: 1;\n }\n}\n"},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"be1737","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":783,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 16px;\n height: 16px;\n position: relative;\n left: -32px;\n border-radius: 50%;\n color: #fff;\n background: currentColor;\n box-shadow: 32px 0 , -32px 0 , 64px 0;\n}\n\n.loader::after {\n content: '';\n position: absolute;\n left: -32px;\n top: 0;\n width: 16px;\n height: 16px;\n border-radius: 10px;\n background: #FF3D00;\n animation: move_351 3s linear infinite alternate;\n}\n\n@keyframes move_351 {\n 0% , 5% {\n left: -32px;\n width: 16px;\n }\n\n 15% , 20% {\n left: -32px;\n width: 48px;\n }\n\n 30% , 35% {\n left: 0px;\n width: 16px;\n }\n\n 45% , 50% {\n left: 0px;\n width: 48px;\n }\n\n 60% , 65% {\n left: 32px;\n width: 16px;\n }\n\n 75% , 80% {\n left: 32px;\n width: 48px;\n }\n\n 95%, 100% {\n left: 64px;\n width: 16px;\n }\n}"},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"d4bfe0","snapshot":null,"tags":null,"title":"loader by 00Kubi","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":962,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n width: 48px;\n height: 48px;\n margin: auto;\n position: relative;\n}\n\n.loader:before {\n content: '';\n width: 48px;\n height: 5px;\n background: #FFD700;\n position: absolute;\n top: 60px;\n left: 0;\n border-radius: 50%;\n animation: shadow324 0.5s linear infinite;\n}\n\n.loader:after {\n content: '';\n width: 100%;\n height: 100%;\n background: #FFD700;\n position: absolute;\n top: 0;\n left: 0;\n border-radius: 50%;\n animation: jump7456 0.5s linear infinite;\n}\n\n@keyframes jump7456 {\n 15% {\n border-bottom-right-radius: 50%;\n }\n\n 25% {\n transform: translateY(9px) rotate(22.5deg);\n }\n\n 50% {\n transform: translateY(18px) scale(1, .9) rotate(45deg);\n border-bottom-right-radius: 40px;\n }\n\n 75% {\n transform: translateY(9px) rotate(67.5deg);\n }\n\n 100% {\n transform: translateY(0) rotate(90deg);\n }\n}\n\n@keyframes shadow324 {\n\n 0%,\n 100% {\n transform: scale(1, 1);\n }\n\n 50% {\n transform: scale(1.2, 1);\n }\n}"},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"0e6f67","snapshot":null,"tags":null,"title":"loader by ClawHack1","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":176,"cssLen":735,"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 height: 100%;\n}\n\n.loader__circle {\n width: 14px;\n height: 14px;\n border-radius: 50%;\n margin: 0 4px;\n animation: loader_901 1s ease-in-out infinite;\n}\n\n.loader__circle:nth-of-type(1) {\n background-color: #007aff;\n animation-delay: 0;\n}\n\n.loader__circle:nth-of-type(2) {\n background-color: #ff2d55;\n animation-delay: 0.25s;\n}\n\n.loader__circle:nth-of-type(3) {\n background-color: #34c759;\n animation-delay: 0.5s;\n}\n\n.loader__circle:nth-of-type(4) {\n background-color: #ff9500;\n animation-delay: 0.75s;\n}\n\n@keyframes loader_901 {\n 0% {\n transform: scale(1);\n }\n\n 20% {\n transform: scale(1.2);\n }\n\n 40% {\n transform: scale(1);\n }\n}\n"},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"5fcedc","snapshot":null,"tags":null,"title":"loader by doniaskima","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":539,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: fit-content;\n font-weight: bold;\n font-family: monospace;\n font-size: 30px;\n background: radial-gradient(circle closest-side,#000 94%,#0000) right/calc(200% - 1em) 100%;\n animation: l24 1s infinite alternate linear;\n}\n\n.loader::before {\n content: \"Loading...\";\n line-height: 1em;\n color: #0000;\n background: inherit;\n background-image: radial-gradient(circle closest-side,#fff 94%,#000);\n -webkit-background-clip: text;\n background-clip: text;\n}\n\n@keyframes l24 {\n 100% {\n background-position: left\n }\n}"},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"ec5a78","snapshot":null,"tags":null,"title":"loader by G4b413l","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":181,"cssLen":1090,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".dot-wave {\n --uib-size: 50px;\n --uib-speed: 0.6s;\n --uib-color: #0d0909;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: space-between;\n width: var(--uib-size);\n height: calc(var(--uib-size) * 0.17);\n padding-top: calc(var(--uib-size) * 0.34);\n}\n\n.dot-wave__dot {\n flex-shrink: 0;\n width: calc(var(--uib-size) * 0.17);\n height: calc(var(--uib-size) * 0.17);\n border-radius: 50%;\n background-color: var(--uib-color);\n will-change: transform;\n}\n\n.dot-wave__dot:nth-child(1) {\n animation: jump824 var(--uib-speed) ease-in-out\n calc(var(--uib-speed) * -0.45) infinite;\n}\n\n.dot-wave__dot:nth-child(2) {\n animation: jump824 var(--uib-speed) ease-in-out\n calc(var(--uib-speed) * -0.3) infinite;\n}\n\n.dot-wave__dot:nth-child(3) {\n animation: jump824 var(--uib-speed) ease-in-out\n calc(var(--uib-speed) * -0.15) infinite;\n}\n\n.dot-wave__dot:nth-child(4) {\n animation: jump824 var(--uib-speed) ease-in-out infinite;\n}\n\n@keyframes jump824 {\n 0%,\n 100% {\n transform: translateY(0px);\n }\n\n 50% {\n transform: translateY(-200%);\n }\n}\n"},{"created":"2024-01-22T16:54:08.000Z","isPrivate":0,"projectId":"7b3c06","snapshot":null,"tags":null,"title":"loader by Juanes200122","updated":"2024-01-22T16:54:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":780,"cssLen":3080,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".pl {\n width: 6em;\n height: 6em;\n}\n\n.pl__ring {\n animation: ringA 2s linear infinite;\n}\n\n.pl__ring--a {\n stroke: #000000;\n}\n\n.pl__ring--b {\n animation-name: ringB;\n stroke: #7e7e7e;\n}\n\n.pl__ring--c {\n animation-name: ringC;\n stroke: #686868;\n}\n\n.pl__ring--d {\n animation-name: ringD;\n stroke: #000000;\n}\n \n /* Animations */\n@keyframes ringA {\n from, 4% {\n stroke-dasharray: 0 660;\n stroke-width: 20;\n stroke-dashoffset: -330;\n }\n\n 12% {\n stroke-dasharray: 60 600;\n stroke-width: 30;\n stroke-dashoffset: -335;\n }\n\n 32% {\n stroke-dasharray: 60 600;\n stroke-width: 30;\n stroke-dashoffset: -595;\n }\n\n 40%, 54% {\n stroke-dasharray: 0 660;\n stroke-width: 20;\n stroke-dashoffset: -660;\n }\n\n 62% {\n stroke-dasharray: 60 600;\n stroke-width: 30;\n stroke-dashoffset: -665;\n }\n\n 82% {\n stroke-dasharray: 60 600;\n stroke-width: 30;\n stroke-dashoffset: -925;\n }\n\n 90%, to {\n stroke-dasharray: 0 660;\n stroke-width: 20;\n stroke-dashoffset: -990;\n }\n}\n\n@keyframes ringB {\n from, 12% {\n stroke-dasharray: 0 220;\n stroke-width: 20;\n stroke-dashoffset: -110;\n }\n\n 20% {\n stroke-dasharray: 20 200;\n stroke-width: 30;\n stroke-dashoffset: -115;\n }\n\n 40% {\n stroke-dasharray: 20 200;\n stroke-width: 30;\n stroke-dashoffset: -195;\n }\n\n 48%, 62% {\n stroke-dasharray: 0 220;\n stroke-width: 20;\n stroke-dashoffset: -220;\n }\n\n 70% {\n stroke-dasharray: 20 200;\n stroke-width: 30;\n stroke-dashoffset: -225;\n }\n\n 90% {\n stroke-dasharray: 20 200;\n stroke-width: 30;\n stroke-dashoffset: -305;\n }\n\n 98%, to {\n stroke-dasharray: 0 220;\n stroke-width: 20;\n stroke-dashoffset: -330;\n }\n}\n\n@keyframes ringC {\n from {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: 0;\n }\n\n 8% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -5;\n }\n\n 28% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -175;\n }\n\n 36%, 58% {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: -220;\n }\n\n 66% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -225;\n }\n\n 86% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -395;\n }\n\n 94%, to {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: -440;\n }\n}\n\n@keyframes ringD {\n from, 8% {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: 0;\n }\n\n 16% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -5;\n }\n\n 36% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -175;\n }\n\n 44%, 50% {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: -220;\n }\n\n 58% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -225;\n }\n\n 78% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -395;\n }\n\n 86%, to {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: -440;\n }\n}"}]}},"actionData":null,"errors":null}