{"loaderData":{"0":null,"0-3":{"total":7498,"projects":[{"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"},{"created":"2024-01-22T16:54:30.000Z","isPrivate":0,"projectId":"f5e9af","snapshot":null,"tags":null,"title":"loader by JaydipPrajapati1910","updated":"2024-01-22T16:54:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":305,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: calc(160px / 0.707);\n height: 28px;\n background: repeating-linear-gradient(-45deg, #766DF4 0 30px,#0000 0 40px) left/200% 100%;\n animation: i3 2s infinite linear;\n border-radius: 10px;\n border: 1px solid #766DF4;\n}\n\n@keyframes i3 {\n 100% {\n background-position: right\n }\n}\n \n"},{"created":"2024-01-22T16:54:30.000Z","isPrivate":0,"projectId":"38651c","snapshot":null,"tags":null,"title":"loader by ahmed150up","updated":"2024-01-22T16:54:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":133,"cssLen":555,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n","css":".loader {\n display: flex;\n justify-content: center;\n}\n\n.bar {\n width: 7px;\n height: 18px;\n margin: 0 9px;\n border-radius: 10px;\n animation: loading_5192 1s ease-in-out infinite;\n background-color: aqua;\n}\n\n.bar:nth-child(1) {\n animation-delay: 0.01s;\n}\n\n.bar:nth-child(2) {\n animation-delay: 0.09s;\n}\n\n.bar:nth-child(3) {\n animation-delay: 0.19s;\n}\n\n.bar:nth-child(4) {\n animation-delay: 0.29s;\n}\n\n@keyframes loading_5192 {\n 0% {\n transform: scale(1);\n }\n\n 20% {\n transform: scale(1, 2.5);\n }\n\n 40% {\n transform: scale(1);\n }\n}\n"},{"created":"2024-01-22T16:54:30.000Z","isPrivate":0,"projectId":"84bc43","snapshot":null,"tags":null,"title":"loader by timlmit","updated":"2024-01-22T16:54:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1295,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n display: block;\n position: relative;\n height: 32px;\n width: 200px;\n background: #fff;\n border: 2px solid #fff;\n color: rgb(223, 60, 60);\n overflow: hidden;\n}\n\n.loader::before {\n content: '';\n background: rgb(223, 60, 60);\n position: absolute;\n left: 0;\n top: 0;\n width: 0;\n height: 100%;\n animation: loading_302 10s linear infinite;\n}\n\n.loader:after {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n text-align: center;\n font-size: 18px;\n line-height: 32px;\n color: rgb(0,255,255);\n mix-blend-mode: difference;\n animation: percentage_302 10s linear infinite;\n}\n\n@keyframes loading_302 {\n 0% {\n width: 0\n }\n\n 100% {\n width: 100%\n }\n}\n\n@keyframes percentage_302 {\n 0% {\n content: \"0%\"\n }\n\n 5% {\n content: \"5%\"\n }\n\n 10% {\n content: \"10%\"\n }\n\n 20% {\n content: \"20%\"\n }\n\n 30% {\n content: \"30%\"\n }\n\n 40% {\n content: \"40%\"\n }\n\n 50% {\n content: \"50%\"\n }\n\n 60% {\n content: \"60%\"\n }\n\n 70% {\n content: \"70%\"\n }\n\n 80% {\n content: \"80%\"\n }\n\n 90% {\n content: \"90%\"\n }\n\n 95% {\n content: \"95%\"\n }\n\n 96% {\n content: \"96%\"\n }\n\n 97% {\n content: \"97%\"\n }\n\n 98% {\n content: \"98%\"\n }\n\n 99% {\n content: \"99%\"\n }\n\n 100% {\n content: \"100%\"\n }\n}\n \n "},{"created":"2024-01-22T16:54:30.000Z","isPrivate":0,"projectId":"f327e1","snapshot":null,"tags":null,"title":"loader by StealthWorm","updated":"2024-01-22T16:54:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1281,"cssLen":3722,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n margin: 0 auto;\n display: flex;\n width: 12rem;\n height: 12rem;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n overflow: hidden;\n position: relative;\n border-radius: 50%;\n border: 0.4rem solid #52c5ff;\n}\n\n.container[class*=\"1\"] {\n animation-delay: 1s;\n}\n\n.container[class*=\"2\"] {\n animation-delay: 1.3s;\n}\n\n.container[class*=\"3\"] {\n animation-delay: 1.6s;\n}\n\n.container[class*=\"4\"] {\n animation-delay: 1.9s;\n}\n\n.tars {\n z-index: 0;\n position: absolute;\n height: 100px;\n width: 130px;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n transform-style: preserve-3d;\n animation: rotateX3D 6s ease-in-out infinite;\n animation-delay: 1s;\n}\n\n.container {\n position: relative;\n display: flex;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n animation: rotateY3D 3s ease-in infinite both;\n}\n\n.shape {\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n position: relative;\n z-index: -1;\n}\n\n.shape div {\n display: block;\n position: absolute;\n text-align: center;\n}\n\n.container:nth-child(2) .f::after,\n.container:nth-child(3) .f::after {\n position: absolute;\n content: '';\n width: 100%;\n z-index: -1;\n height: 20px;\n background-image: radial-gradient(#54ff6e 2px, transparent 1%);\n background-size: 20px 5px;\n left: 0;\n top: 20%;\n border: 0;\n animation: animMove 2s linear infinite alternate-reverse;\n overflow: hidden;\n}\n\n.container:nth-child(2) .f::before,\n.container:nth-child(3) .f::before {\n position: absolute;\n content: '';\n width: 85%;\n z-index: -1;\n height: 20px;\n left: 0;\n top: 20%;\n border: 0;\n background: #181818;\n border: 2px solid #52c5ff;\n overflow: hidden;\n}\n\n.container:nth-child(1),\n.container:nth-child(4) {\n & .f: :before,\n & .r::before,\n & .l::before {\n position: absolute;\n content: '';\n width: 95%;\n height: 5px;\n left: 0;\n top: 25%;\n border: 1px solid #52c5ff;\n overflow: hidden;\n}\n}\n\n.container:nth-child(1) .b::before,\n.container:nth-child(4) .b::before {\n position: absolute;\n content: '';\n width: 95%;\n z-index: -1;\n height: 5px;\n left: 0;\n top: 69%;\n border: 0;\n border: 1px solid #52c5ff;\n overflow: hidden;\n}\n\n.f {\n transform: rotateY(0deg) translateZ(15px);\n border-radius: 2px;\n overflow: hidden;\n transform-style: preserve-3d;\n}\n\n.b {\n transform: rotateX(180deg) translateZ(15px);\n border-radius: 2px;\n}\n\n.f,.b {\n width: 30px;\n height: 100px;\n background: #212121;\n box-shadow: inset 0 0 0 2px #52c5ff;\n border: 2px solid #52c5ff;\n}\n\n.l {\n transform: rotateY(-90deg) translateZ(0px);\n border-radius: 2px;\n}\n\n.r {\n transform: rotateY(90deg) translateZ(-30px);\n border-radius: 2px;\n}\n\n.l,.r {\n width: 30px;\n height: 100px;\n left: 15px;\n position: relative;\n z-index: -1;\n background: #212121;\n box-shadow: inset 0 0 0 2px #52c5ff;\n border: 2px solid #52c5ff;\n}\n\n.t {\n transform: rotateX(90deg) translateZ(40px);\n border-radius: 2px;\n}\n\n.bot {\n transform: rotateX(-90deg) translateZ(60px);\n border-radius: 2px;\n}\n\n.t,.bot {\n width: 30px;\n height: 30px;\n top: 25px;\n position: relative;\n z-index: -1;\n background: #212121;\n box-shadow: inset 0 0 0 2px #52c5ff;\n border: 2px solid #52c5ff;\n}\n\n@keyframes rotateY3D {\n 0% {\n transform: translateZ(0px) rotateX(0);\n }\n\n 50% {\n transform: translateZ(0px) rotateX(-360deg);\n }\n\n 100% {\n transform: translateZ(0px) rotateX(-360deg);\n }\n}\n\n@keyframes rotateX3D {\n 0% {\n transform: translateX(0px) rotateY(0);\n }\n\n 50% {\n transform: translateX(0px) rotateY(180deg);\n }\n\n 100% {\n transform: translateX(0px) rotateY(360deg);\n }\n}\n\n@keyframes animMove {\n 0% {\n transform: translateX(20px);\n }\n\n 100% {\n transform: translateX(-10px);\n }\n}"},{"created":"2024-01-22T16:54:30.000Z","isPrivate":0,"projectId":"98db28","snapshot":null,"tags":null,"title":"loader by Nawsome","updated":"2024-01-22T16:54:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":179,"cssLen":1569,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n position: absolute;\n margin: auto;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n width: 6.250em;\n height: 6.250em;\n animation: rotate5123 2.4s linear infinite;\n}\n\n.white {\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background: white;\n animation: flash 2.4s linear infinite;\n opacity: 0;\n}\n\n.dot {\n position: absolute;\n margin: auto;\n width: 2.4em;\n height: 2.4em;\n border-radius: 100%;\n transition: all 1s ease;\n}\n\n.dot:nth-child(2) {\n top: 0;\n bottom: 0;\n left: 0;\n background: #FF4444;\n animation: dotsY 2.4s linear infinite;\n}\n\n.dot:nth-child(3) {\n left: 0;\n right: 0;\n top: 0;\n background: #FFBB33;\n animation: dotsX 2.4s linear infinite;\n}\n\n.dot:nth-child(4) {\n top: 0;\n bottom: 0;\n right: 0;\n background: #99CC00;\n animation: dotsY 2.4s linear infinite;\n}\n\n.dot:nth-child(5) {\n left: 0;\n right: 0;\n bottom: 0;\n background: #33B5E5;\n animation: dotsX 2.4s linear infinite;\n}\n\n@keyframes rotate5123 {\n 0% {\n transform: rotate( 0 );\n }\n\n 10% {\n width: 6.250em;\n height: 6.250em;\n }\n\n 66% {\n width: 2.4em;\n height: 2.4em;\n }\n\n 100% {\n transform: rotate(360deg);\n width: 6.250em;\n height: 6.250em;\n }\n}\n\n@keyframes dotsY {\n 66% {\n opacity: .1;\n width: 2.4em;\n }\n\n 77% {\n opacity: 1;\n width: 0;\n }\n}\n\n@keyframes dotsX {\n 66% {\n opacity: .1;\n height: 2.4em;\n }\n\n 77% {\n opacity: 1;\n height: 0;\n }\n}\n\n@keyframes flash {\n 33% {\n opacity: 0;\n border-radius: 0%;\n }\n\n 55% {\n opacity: .6;\n border-radius: 100%;\n }\n\n 66% {\n opacity: 0;\n }\n}\n"},{"created":"2024-01-22T16:54:30.000Z","isPrivate":0,"projectId":"718ccb","snapshot":null,"tags":null,"title":"loader by doniaskima","updated":"2024-01-22T16:54:30.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":530,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"/* HTML:

*/\n.loader {\n width: fit-content;\n font-weight: bold;\n font-family: monospace;\n font-size: 30px;\n background: linear-gradient(90deg,#000 50%,#0000 0) right/200% 100%;\n animation: l21 2s infinite linear;\n}\n\n.loader::before {\n content: \"Loading...\";\n color: #0000;\n padding: 0 5px;\n background: inherit;\n background-image: linear-gradient(90deg,#fff 50%,#000 0);\n -webkit-background-clip: text;\n background-clip: text;\n}\n\n@keyframes l21 {\n 100% {\n background-position: left\n }\n}"},{"created":"2024-01-22T16:54:30.000Z","isPrivate":0,"projectId":"177200","snapshot":null,"tags":null,"title":"loader by doniaskima","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":686,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":"/* HTML:

*/\n.loader {\n width: 35px;\n height: 80px;\n position: relative;\n}\n\n.loader:after {\n content: \"\";\n position: absolute;\n inset: 0;\n padding: 3px 5px;\n border-top: 1px solid #bbb6aa;\n border-bottom: 4px solid #bbb6aa;\n background: linear-gradient(#612329 0 0) bottom no-repeat content-box, \n #e4e0d7;\n mix-blend-mode: darken;\n animation: l1 1.5s infinite linear;\n}\n\n.loader:before {\n content: \"\";\n position: absolute;\n inset: -18px calc(50% - 2px) 8px;\n background: #eb6b3e;\n transform-origin: bottom;\n transform: rotate(8deg);\n}\n\n@keyframes l1 {\n 0% {\n background-size: 100% 100%\n }\n\n 100% {\n background-size: 100% 5%\n }\n}"}]}},"actionData":null,"errors":null}