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

\n loading...\n

\n","css":".loader {\n --col1: rgba(228, 19, 141, 0.925);\n --col2: rgb(255, 179, 80);\n font-size: 2em;\n font-weight: 600;\n perspective: 800px;\n position: relative;\n}\n\n.loader::after,\n.loader::before,\n.loader .text::after,\n.loader .text::before {\n perspective: 800px;\n animation: anim 2s ease-in-out infinite, dotMove 10s ease-out alternate infinite, move 10s linear infinite 1s;\n ;\n content: '●';\n color: var(--col1);\n position: absolute;\n translate: -60px 500px;\n width: 5px;\n height: 5px;\n}\n\n.loader::before {\n animation-delay: 3s;\n color: var(--col1);\n}\n\n.loader .text::before {\n color: var(--col2);\n animation-delay: 2s;\n}\n\n.loader .text::after {\n color: var(--col2);\n}\n\n.loader .text {\n animation: anim 20s linear infinite, move 10s linear infinite 1s;\n color: transparent;\n background-image: linear-gradient(90deg, \n var(--col1) 0%,\n var(--col2) 100%);\n background-clip: text;\n background-size: 100%;\n background-repeat: no-repeat;\n transform: skew(5deg, -5deg);\n -webkit-background-clip: text;\n position: relative;\n}\n\n@keyframes anim {\n 0%, 100% {\n text-shadow: 2px 0px 2px rgba(179, 158, 158, .5);\n }\n\n 50% {\n background-size: 0%;\n background-position-x: left;\n text-shadow: 2px 10px 6px rgba(179, 158, 158, 1);\n }\n}\n\n@keyframes move {\n 50% {\n translate: 0px 0px;\n rotate: x 60deg;\n transform: skew(-5deg, 5deg);\n }\n}\n\n@keyframes dotMove {\n 0%, 100% {\n translate: -60px 300px;\n }\n\n 50% {\n translate: 160px -250px;\n scale: .5;\n opacity: .85;\n }\n}"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"ca9146","snapshot":null,"tags":null,"title":"loader by Ratinax","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":293,"cssLen":1735,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".sun {\n position: relative;\n animation: rotate 4s linear infinite;\n --color: yellow;\n --scale: 0.4;\n}\n\n.center {\n height: calc(var(--scale) * 10em);\n width: calc(var(--scale) * 10em);\n transition: background-color 2s linear, box-shadow 2s linear;\n background-color: var(--color);\n border-radius: 50%;\n box-shadow: 0 0 calc(var(--scale) * 3em) var(--color);\n}\n\n.ray {\n position: absolute;\n height: calc(var(--scale) * 3em);\n width: calc(var(--scale) * 0.5em);\n transition: background-color 2s ease-in-out, box-shadow 2s ease-in-out;\n box-shadow: 0 0 calc(var(--scale) * 1em) var(--color);\n background-color: var(--color);\n}\n\n.r-1 {\n margin-left: calc(var(--scale) * 4.75em);\n margin-top: calc(var(--scale) * 1em);\n}\n\n.r-2 {\n margin-left: calc(var(--scale) * 12.25em);\n margin-top: calc(var(--scale) * -6.25em);\n transform: rotate(90deg);\n}\n\n.r-3 {\n margin-left: calc(var(--scale) * 4.75em);\n margin-top: calc(var(--scale) * -14em);\n}\n\n.r-4 {\n margin-left: calc(var(--scale) * -2.75em);\n margin-top: calc(var(--scale) * -6.25em);\n transform: rotate(90deg);\n}\n\n.r-5 {\n margin-left: calc(var(--scale) * -0.5em);\n margin-top: calc(var(--scale) * -1em);\n transform: rotate(45deg);\n}\n\n.r-6 {\n margin-left: calc(var(--scale) * 9.75em);\n margin-top: calc(var(--scale) * -1em);\n transform: rotate(-45deg);\n}\n\n.r-7 {\n margin-left: calc(var(--scale) * 10.25em);\n margin-top: calc(var(--scale) * -11.75em);\n transform: rotate(45deg);\n}\n\n.r-8 {\n margin-left: calc(var(--scale) * -0.5em);\n margin-top: calc(var(--scale) * -11.75em);\n transform: rotate(-45deg);\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n --color: yellow;\n }\n\n 100% {\n transform: rotate(360deg);\n --color: orange;\n }\n}"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"5916bd","snapshot":null,"tags":null,"title":"loader by Victan78","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":54,"cssLen":497,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 100px;\n height: 100px;\n border: solid 4px rgba(231, 231, 231, 0);\n border-top: solid 5px rgb(241, 68, 68);\n border-radius: 50%;\n transition: all 0.5s;\n animation: rotation_51512 1.2s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n\n@keyframes rotation_51512 {\n 70% {\n box-shadow: 0px 0px 10px 50px rgba(241, 57, 57, 0.526);\n }\n\n 90% {\n box-shadow: 0px 0px 10px 50px rgba(241, 57, 57, 0.04);\n }\n\n 100% {\n opacity: 0.5;\n transform: rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"ee7c7e","snapshot":null,"tags":null,"title":"loader by Leoodaviid","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":66,"cssLen":495,"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 justify-content: center;\n align-items: center;\n}\n\n.loader {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);\n }\n\n 50% {\n transform: rotate(180deg);\n box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);\n }\n\n 100% {\n transform: rotate(360deg);\n box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);\n }\n}"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"d92e2b","snapshot":null,"tags":null,"title":"loader by satyamchaudharydev","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":447,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".ball {\n --size: 20px;\n --timing: 0.7s;\n --displace: 70px;\n border-radius: 50%;\n width: var(--size);\n height: var(--size);\n background: #000;\n margin-right: var(--displace);\n animation: animation321 var(--timing) infinite alternate\n cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n@keyframes animation321 {\n 0% {\n background: #4284f3;\n transform: translateX(var(--displace));\n }\n\n 100% {\n background: #ea4335;\n transform: translateX(00px);\n }\n}\n"},{"created":"2024-01-22T16:54:30.000Z","isPrivate":0,"projectId":"f86779","snapshot":null,"tags":null,"title":"loader by KSAplay","updated":"2024-01-22T16:54:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":33,"cssLen":971,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n font-weight: bold;\n font-size: 12px;\n color: #f2df95;\n height: 150px;\n width: 250px;\n background-color: #907A24;\n border-style: solid;\n border-width: 50px 250px 50px 0px;\n border-color: #C9B656 #AD9531 #87621B #AD9531;\n animation: camera_effect 4s infinite linear;\n}\n\n@keyframes camera_effect {\n 0% {\n border-width: 0px 250px 0px 0px;\n }\n\n 10% {\n border-width: 45px 250px 45px 0px;\n }\n\n 20% {\n border-width: 50px 160px 50px 0px;\n }\n\n 30% {\n border-width: 50px 80px 50px 80px;\n }\n\n 45% {\n border-width: 45px 75px 55px 85px;\n }\n\n 55% {\n border-width: 55px 70px 45px 90px;\n }\n\n 65% {\n border-width: 55px 85px 45px 75px;\n }\n\n 70% {\n border-width: 50px 80px 50px 80px;\n }\n\n 80% {\n border-width: 50px 0px 50px 160px;\n }\n\n 90% {\n border-width: 45px 0px 45px 250px;\n }\n\n 100% {\n border-width: 0px 0px 0px 250px;\n }\n}"},{"created":"2024-01-22T16:54:30.000Z","isPrivate":0,"projectId":"2747ff","snapshot":null,"tags":null,"title":"loader by Yaya12085","updated":"2024-01-22T16:54:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":324,"cssLen":787,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n ","css":".flex{display:flex}.h-12{height:3rem}.h-4{height:1rem}.w-12{width:3rem}.w-\\[170px\\]{width:170px}.w-\\[200px\\]{width:200px}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.items-center{align-items:center}.space-x-2 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.5rem * var(--tw-space-x-reverse));margin-left:calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-2 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.rounded-full{border-radius:9999px}.rounded-md{border-radius:0.375rem}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}"},{"created":"2024-01-22T16:54:30.000Z","isPrivate":0,"projectId":"22dbcf","snapshot":null,"tags":null,"title":"loader by omar-alghaish","updated":"2024-01-22T16:54:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":106,"cssLen":659,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loading {\n background-color: rgba(255, 0, 0, 0);\n align-items: center;\n justify-content: center;\n display: flex;\n}\n\n.loading div {\n background-color: rgb(255, 217, 0);\n width: 20px;\n height: 20px;\n margin: 20px;\n border-radius: 50px;\n animation-name: load912355;\n animation-duration: .9s;\n animation-iteration-count: infinite;\n animation-direction: alternate;\n text-align: center;\n justify-content: center;\n}\n\n.loading .a {\n animation-delay: .3s;\n}\n\n.loading .u {\n animation-delay: .6s;\n}\n\n@keyframes load912355 {\n 0% {\n transform: translateY(50px) scale(1);\n }\n\n 100% {\n transform: translateY(10px) scale(1.8) rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:30.000Z","isPrivate":0,"projectId":"ac0a1b","snapshot":null,"tags":null,"title":"loader by dvhoang2106","updated":"2024-01-22T16:54:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":546,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner {\n display: inline-block;\n transform: translateZ(1px);\n}\n\n.spinner > div {\n display: inline-block;\n width: 64px;\n height: 64px;\n margin: 8px;\n border-radius: 50%;\n background: #fff;\n animation: spinner8344 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;\n}\n\n@keyframes spinner8344 {\n 0%,\n 100% {\n animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);\n }\n\n 0% {\n transform: rotateY(0deg);\n }\n\n 50% {\n transform: rotateY(1800deg);\n animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);\n }\n\n 100% {\n transform: rotateY(3600deg);\n }\n}"},{"created":"2024-01-22T16:54:30.000Z","isPrivate":0,"projectId":"3b32b6","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:54:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":571,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Text writing!

","css":"@keyframes typing {\n from {\n width: 0;\n }\n}\n\n@keyframes blink-caret {\n 50% {\n border-color: transparent;\n }\n}\n/* When you change the amount of characters in the h1, you have to change \nthe with: 14ch and steps(14, end), if there is 14 characters, put 14, \nif there is 20 put 20 */\n.animation {\n font: bold 200% Consolas, Monaco, monospace;\n border-right: .1em solid black;\n width: 13.20ch;\n margin: 2em 2em;\n white-space: nowrap;\n overflow: hidden;\n -webkit-animation: typing 5s steps(13, end),\n\t blink-caret .5s step-end infinite alternate;\n}"},{"created":"2024-01-22T16:54:30.000Z","isPrivate":0,"projectId":"84c268","snapshot":null,"tags":null,"title":"loader by Deri-Kurniawan","updated":"2024-01-22T16:54:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":259,"cssLen":893,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n perspective: 600px;\n width: 100px;\n height: 100px;\n}\n\n.cube {\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n animation: rotate 4s linear infinite;\n}\n\n.face {\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(45deg, #3498db, #e74c3c);\n opacity: 0.8;\n border: 0.5px solid #fff;\n}\n\n.face:nth-child(1) {\n transform: rotateX(90deg) translateZ(50px);\n}\n\n.face:nth-child(2) {\n transform: rotateX(-90deg) translateZ(50px);\n}\n\n.face:nth-child(3) {\n transform: translateZ(50px);\n}\n\n.face:nth-child(4) {\n transform: rotateY(90deg) translateZ(50px);\n}\n\n.face:nth-child(5) {\n transform: rotateY(-90deg) translateZ(50px);\n}\n\n.face:nth-child(6) {\n transform: rotateY(180deg) translateZ(50px);\n}\n\n@keyframes rotate {\n 0% {\n transform: rotateX(0deg) rotateY(0deg);\n }\n\n 100% {\n transform: rotateX(360deg) rotateY(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:30.000Z","isPrivate":0,"projectId":"5c8bb1","snapshot":null,"tags":null,"title":"loader by eslam-hany","updated":"2024-01-22T16:54:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":298,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 100px;\n height: 100px;\n border-radius: 50%;\n box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;\n animation: rotate 2.0s infinite linear;\n}\n\n@keyframes rotate {\n 100% {\n transform: rotate(1turn);\n }\n}\n"}]}},"actionData":null,"errors":null}