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

Loading....

\n","css":"#h2 {\n color: white;\n mix-blend-mode: difference; /* this will change color of loading text */\n text-align: center;\n margin: 0;\n font-size: 12px;\n line-height: 30px;\n font-family: Arial, Helvetica, sans-serif;\n text-shadow: 0 0 3px;\n padding: 0;\n letter-spacing: 5px;\n}\n\n.div {\n position: relative;\n top: 0px;\n left: 0%;\n max-width: 200px; /* Use viewport width for responsive width */\n width: 100%;\n height: 30px;\n background: linear-gradient(to right, white, black);\n background-size: 200% 100%;\n animation-delay: 2s;\n border-radius: 10px;\n box-shadow: 0 0 3px;\n -webkit-box-reflect: below 1px\n linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));\n animation: gradientAnimation 10s linear infinite reverse;\n}\n\n@keyframes gradientAnimation {\n 0% {\n background-position: 0;\n }\n\n 100% {\n background-position: 200% 0;\n }\n}\n\n/* Use media queries for responsiveness */\n@media (max-width: 768px) {\n .div {\n width: 500px; /* Adjust width for smaller screens */\n left: 10%;\n }\n}\n"},{"created":"2024-01-22T16:54:07.000Z","isPrivate":0,"projectId":"fad656","snapshot":null,"tags":null,"title":"loader by shadowmurphy","updated":"2024-01-22T16:54:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":180,"cssLen":1449,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n position: relative;\n width: 600px;\n height: 600px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.circle {\n position: absolute;\n border-radius: 50%;\n animation-duration: 1.5s;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n}\n\n.circle-1 {\n width: 60px;\n height: 60px;\n background: linear-gradient(109.8deg, rgba(52, 248, 35, 0.1855) 0%, rgba(68, 253, 38, 0.196) 100%);\n animation-name: circle-1-animation;\n}\n\n.circle-3 {\n width: 40px;\n height: 40px;\n background: linear-gradient(109.8deg, rgba(52, 248, 35, 0.265) 0%, rgba(68, 253, 38, 0.28) 100%);\n animation-name: circle-3-animation;\n}\n\n.circle-4 {\n width: 20px;\n height: 20px;\n background: linear-gradient(109.8deg, rgba(52, 248, 35, 0.265) 0%, rgba(68, 253, 38, 0.28) 100%);\n animation-name: circle-4-animation;\n}\n\n@keyframes circle-1-animation {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.2);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes circle-2-animation {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.2);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes circle-3-animation {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.2);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes circle-4-animation {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.2);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n"},{"created":"2024-01-22T16:54:07.000Z","isPrivate":0,"projectId":"4b2862","snapshot":null,"tags":null,"title":"loader by jeremyssocial","updated":"2024-01-22T16:54:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":93,"cssLen":705,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".milk-loader {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n\n.glass {\n position: relative;\n width: 100px;\n height: 150px;\n background-color: transparent;\n border: 3px solid #666;\n border-radius: 10px 10px 35px 35px;\n overflow: hidden;\n}\n\n.milk {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 0;\n background-color: #fff;\n border-radius: 5px 5px 30px 30px;\n animation: fillMilk 2s ease-in-out infinite;\n}\n\n/* Keyframes to animate the milk in a non-uniform way, simulating a filling glass */\n@keyframes fillMilk {\n 0%,\n 100% {\n height: 10%;\n border-radius: 5px 5px 30px 30px;\n }\n 50% {\n height: 80%;\n border-radius: 25px;\n }\n}\n"},{"created":"2024-01-22T16:54:07.000Z","isPrivate":0,"projectId":"386e69","snapshot":null,"tags":null,"title":"loader by Charly-T","updated":"2024-01-22T16:54:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":571,"cssLen":1007,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".container {\n overflow: hidden;\n}\n\n.container svg {\n --spin-duration: 2000ms;\n --infinity-duration: 2000ms;\n --hsl-base-h: 5deg;\n --hsl-base-s: 70%;\n --hsl-base-l: 50%;\n animation: spin81213 var(--spin-duration) linear infinite;\n}\n\n.eight {\n --eight-length-px: 60.84563446044922px;\n /* As seen on getTotalLength */\n --offset: calc(var(--order) * 5px);\n animation: infinity8123 var(--infinity-duration) linear infinite;\n d: path(\"m5 5a1 1 0 0110 0c0 4-10 6-10 10a1 1 0 0010 0c0-4-10-6-10-10\");\n fill: none;\n stroke: hsl(calc(var(--hsl-base-h) * var(--order)) var(--hsl-base-s) var(--hsl-base-l));\n stroke-dasharray: 6px calc(var(--eight-length-px) - 6px);\n stroke-linecap: round;\n stroke-width: calc(1 - var(--order) / 10);\n}\n\n@keyframes infinity8123 {\n 0% {\n stroke-dashoffset: calc(var(--eight-length-px) + var(--offset));\n }\n\n 100% {\n stroke-dashoffset: var(--offset);\n }\n}\n\n@keyframes spin81213 {\n 0% {\n transform: rotate(0)\n }\n\n 100% {\n transform: rotate(360deg)\n }\n}"},{"created":"2024-01-22T16:54:07.000Z","isPrivate":0,"projectId":"a0dd45","snapshot":null,"tags":null,"title":"loader by G4b413l","updated":"2024-01-22T16:54:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":111,"cssLen":3093,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".superballs {\n --uib-size: 45px;\n --uib-speed: 1.1s;\n --uib-color: #3b3b23;\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.superballs__dot {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n}\n\n.superballs__dot::before {\n content: '';\n height: 30%;\n width: 30%;\n border-radius: 50%;\n background-color: var(--uib-color);\n will-change: transform;\n flex-shrink: 0;\n}\n\n.superballs__dot:nth-child(1) {\n transform: rotate(45deg);\n}\n\n.superballs__dot:nth-child(1)::before {\n animation: orbit82140 var(--uib-speed) linear calc(var(--uib-speed) * -0.143)\n infinite;\n}\n\n.superballs__dot:nth-child(2) {\n transform: rotate(-45deg);\n}\n\n.superballs__dot:nth-child(2)::before {\n animation: orbit82140 var(--uib-speed) linear calc(var(--uib-speed) / -2)\n infinite;\n}\n\n@keyframes orbit82140 {\n 0% {\n transform: translate(calc(var(--uib-size) * 0.5)) scale(0.73684);\n opacity: 0.65;\n }\n\n 5% {\n transform: translate(calc(var(--uib-size) * 0.4)) scale(0.684208);\n opacity: 0.58;\n }\n\n 10% {\n transform: translate(calc(var(--uib-size) * 0.3)) scale(0.631576);\n opacity: 0.51;\n }\n\n 15% {\n transform: translate(calc(var(--uib-size) * 0.2)) scale(0.578944);\n opacity: 0.44;\n }\n\n 20% {\n transform: translate(calc(var(--uib-size) * 0.1)) scale(0.526312);\n opacity: 0.37;\n }\n\n 25% {\n transform: translate(0%) scale(0.47368);\n opacity: 0.3;\n }\n\n 30% {\n transform: translate(calc(var(--uib-size) * -0.1)) scale(0.526312);\n opacity: 0.37;\n }\n\n 35% {\n transform: translate(calc(var(--uib-size) * -0.2)) scale(0.578944);\n opacity: 0.44;\n }\n\n 40% {\n transform: translate(calc(var(--uib-size) * -0.3)) scale(0.631576);\n opacity: 0.51;\n }\n\n 45% {\n transform: translate(calc(var(--uib-size) * -0.4)) scale(0.684208);\n opacity: 0.58;\n }\n\n 50% {\n transform: translate(calc(var(--uib-size) * -0.5)) scale(0.73684);\n opacity: 0.65;\n }\n\n 55% {\n transform: translate(calc(var(--uib-size) * -0.4)) scale(0.789472);\n opacity: 0.72;\n }\n\n 60% {\n transform: translate(calc(var(--uib-size) * -0.3)) scale(0.842104);\n opacity: 0.79;\n }\n\n 65% {\n transform: translate(calc(var(--uib-size) * -0.2)) scale(0.894736);\n opacity: 0.86;\n }\n\n 70% {\n transform: translate(calc(var(--uib-size) * -0.1)) scale(0.947368);\n opacity: 0.93;\n }\n\n 75% {\n transform: translate(0%) scale(1);\n opacity: 1;\n }\n\n 80% {\n transform: translate(calc(var(--uib-size) * 0.1)) scale(0.947368);\n opacity: 0.93;\n }\n\n 85% {\n transform: translate(calc(var(--uib-size) * 0.2)) scale(0.894736);\n opacity: 0.86;\n }\n\n 90% {\n transform: translate(calc(var(--uib-size) * 0.3)) scale(0.842104);\n opacity: 0.79;\n }\n\n 95% {\n transform: translate(calc(var(--uib-size) * 0.4)) scale(0.789472);\n opacity: 0.72;\n }\n\n 100% {\n transform: translate(calc(var(--uib-size) * 0.5)) scale(0.73684);\n opacity: 0.65;\n }\n}\n"},{"created":"2024-01-22T16:54:07.000Z","isPrivate":0,"projectId":"20a714","snapshot":null,"tags":null,"title":"loader by Rodrypaladin","updated":"2024-01-22T16:54:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":135,"cssLen":1687,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 70px;\n height: 190px;\n background-image: linear-gradient(to right bottom, #000000, #141414, #202020, #2d2d2d, #3a3a3a);\n border: 5px solid black;\n border-radius: 18px;\n position: relative;\n display: flex;\n flex-flow: row wrap;\n justify-content: center;\n align-items: center;\n padding: 5px 0;\n}\n\n.loader:after {\n content: \"\";\n position: absolute;\n top: 100%;\n right: 50%;\n transform: translate(50%, -50%);\n width: 10px;\n height: 200px;\n background-color: rgb(20, 20, 20);\n z-index: -1000;\n border: 5px solid black;\n}\n\n.loader-circle {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n position: relative;\n}\n\n.loader-circle::after {\n position: absolute;\n content: \"\";\n top: 50%;\n right: 50%;\n transform: translate(50%, -50%);\n height: 80%;\n width: 80%;\n background-image: linear-gradient(\n to right bottom,\n rgba(255, 255, 255, 0.05),\n rgba(255, 255, 255, 0.1),\n rgba(255, 255, 255, 0.2),\n rgba(255, 255, 255, 0.3),\n rgba(255, 255, 255, 0.4),\n rgba(255, 255, 255, 0.5)\n );\n border-radius: 50%;\n}\n\n.loader-circle:nth-child(1) {\n background-color: red;\n animation: changeGrayscale 1s linear infinite;\n animation-delay: 0.15s;\n}\n\n.loader-circle:nth-child(2) {\n background-color: rgb(255, 200, 0);\n animation: changeGrayscale 1s linear infinite;\n animation-delay: 0.3s;\n}\n\n.loader-circle:nth-child(3) {\n background-color: rgb(36, 182, 0);\n animation: changeGrayscale 1s linear infinite;\n animation-delay: 0.45s;\n}\n\n@keyframes changeGrayscale {\n 0%, 100% {\n filter: brightness(0);\n /* En grayscale al principio y al final */\n }\n\n 50% {\n filter: grayscale(0);\n /* Sin grayscale en la mitad de la animación */\n }\n}\n\n"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"843e91","snapshot":null,"tags":null,"title":"loader by catraco","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":1331,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".spinner {\n --size: 30px;\n --first-block-clr: #005bba;\n --second-block-clr: #fed500;\n --clr: #111;\n width: 100px;\n height: 100px;\n position: relative;\n animation: spin 2s linear infinite;\n}\n\n.spinner::after,\n.spinner::before {\n box-sizing: border-box;\n position: absolute;\n content: \"\";\n width: var(--size);\n height: var(--size);\n top: 50%;\n left: 50%;\n background: var(--first-block-clr);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n animation: orbit 2s linear infinite, up 2s infinite;\n}\n\n.spinner::after {\n background: var(--second-block-clr);\n animation: orbit 2s linear infinite, down 2s infinite;\n}\n\n@keyframes orbit {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes down {\n 0%,\n 100% {\n transform: none;\n }\n\n 25% {\n transform: translateX(100%);\n }\n\n 50% {\n transform: translateX(100%) translateY(100%);\n filter: blur(10px);\n }\n\n 75% {\n transform: translateY(100%);\n }\n}\n\n@keyframes up {\n 0%,\n 100% {\n transform: none;\n }\n\n 25% {\n transform: translateX(-100%);\n }\n\n 50% {\n transform: translateX(-100%) translateY(-100%);\n filter: blur(10px);\n }\n\n 75% {\n transform: translateY(-100%);\n }\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"0d768a","snapshot":null,"tags":null,"title":"loader by jack0237","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":158,"cssLen":591,"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}\n\n.loader .dot {\n height: 20px;\n width: 20px;\n border-radius: 50%;\n border: 2px solid #e8e8e8;\n background: #16b0c1;\n animation: jump 0.8s ease-in-out infinite alternate;\n}\n\n@keyframes jump {\n 100% {\n background: #661e92;\n transform: translateY(-3rem) scale(1.9);\n }\n}\n\n.loader .dot:nth-child(1) {\n animation-delay: 0.1s;\n}\n\n.loader .dot:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.loader .dot:nth-child(3) {\n animation-delay: 0.3s;\n}\n\n.loader .dot:nth-child(4) {\n animation-delay: 0.4s;\n}\n\n.loader .dot:nth-child(5) {\n animation-delay: 0.5s;\n}\n"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"c22f30","snapshot":null,"tags":null,"title":"loader by SangeethSujith","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":404,"cssLen":7481,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".banter-loader {\n position: absolute;\n left: 50%;\n top: 50%;\n width: 72px;\n height: 72px;\n margin-left: -36px;\n margin-top: -36px;\n}\n\n.banter-loader__box {\n float: left;\n position: relative;\n width: 20px;\n height: 20px;\n margin-right: 6px;\n}\n\n.banter-loader__box:before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background: #1e90ff;\n border-radius: 7px;\n}\n\n.banter-loader__box:nth-child(3n) {\n margin-right: 0;\n margin-bottom: 6px;\n}\n\n.banter-loader__box:nth-child(1):before,\n.banter-loader__box:nth-child(4):before {\n margin-left: 26px;\n}\n\n.banter-loader__box:nth-child(3):before {\n margin-top: 52px;\n}\n\n.banter-loader__box:last-child {\n margin-bottom: 0;\n}\n\n@keyframes moveBox-1 {\n 9.0909090909% {\n transform: translate(-26px, 0);\n }\n\n 18.1818181818% {\n transform: translate(0px, 0);\n }\n\n 27.2727272727% {\n transform: translate(0px, 0);\n }\n\n 36.3636363636% {\n transform: translate(26px, 0);\n }\n\n 45.4545454545% {\n transform: translate(26px, 26px);\n }\n\n 54.5454545455% {\n transform: translate(26px, 26px);\n }\n\n 63.6363636364% {\n transform: translate(26px, 26px);\n }\n\n 72.7272727273% {\n transform: translate(26px, 0px);\n }\n\n 81.8181818182% {\n transform: translate(0px, 0px);\n }\n\n 90.9090909091% {\n transform: translate(-26px, 0px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(1) {\n animation: moveBox-1 4s infinite;\n}\n\n@keyframes moveBox-2 {\n 9.0909090909% {\n transform: translate(0, 0);\n }\n\n 18.1818181818% {\n transform: translate(26px, 0);\n }\n\n 27.2727272727% {\n transform: translate(0px, 0);\n }\n\n 36.3636363636% {\n transform: translate(26px, 0);\n }\n\n 45.4545454545% {\n transform: translate(26px, 26px);\n }\n\n 54.5454545455% {\n transform: translate(26px, 26px);\n }\n\n 63.6363636364% {\n transform: translate(26px, 26px);\n }\n\n 72.7272727273% {\n transform: translate(26px, 26px);\n }\n\n 81.8181818182% {\n transform: translate(0px, 26px);\n }\n\n 90.9090909091% {\n transform: translate(0px, 26px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(2) {\n animation: moveBox-2 4s infinite;\n}\n\n@keyframes moveBox-3 {\n 9.0909090909% {\n transform: translate(-26px, 0);\n }\n\n 18.1818181818% {\n transform: translate(-26px, 0);\n }\n\n 27.2727272727% {\n transform: translate(0px, 0);\n }\n\n 36.3636363636% {\n transform: translate(-26px, 0);\n }\n\n 45.4545454545% {\n transform: translate(-26px, 0);\n }\n\n 54.5454545455% {\n transform: translate(-26px, 0);\n }\n\n 63.6363636364% {\n transform: translate(-26px, 0);\n }\n\n 72.7272727273% {\n transform: translate(-26px, 0);\n }\n\n 81.8181818182% {\n transform: translate(-26px, -26px);\n }\n\n 90.9090909091% {\n transform: translate(0px, -26px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(3) {\n animation: moveBox-3 4s infinite;\n}\n\n@keyframes moveBox-4 {\n 9.0909090909% {\n transform: translate(-26px, 0);\n }\n\n 18.1818181818% {\n transform: translate(-26px, 0);\n }\n\n 27.2727272727% {\n transform: translate(-26px, -26px);\n }\n\n 36.3636363636% {\n transform: translate(0px, -26px);\n }\n\n 45.4545454545% {\n transform: translate(0px, 0px);\n }\n\n 54.5454545455% {\n transform: translate(0px, -26px);\n }\n\n 63.6363636364% {\n transform: translate(0px, -26px);\n }\n\n 72.7272727273% {\n transform: translate(0px, -26px);\n }\n\n 81.8181818182% {\n transform: translate(-26px, -26px);\n }\n\n 90.9090909091% {\n transform: translate(-26px, 0px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(4) {\n animation: moveBox-4 4s infinite;\n}\n\n@keyframes moveBox-5 {\n 9.0909090909% {\n transform: translate(0, 0);\n }\n\n 18.1818181818% {\n transform: translate(0, 0);\n }\n\n 27.2727272727% {\n transform: translate(0, 0);\n }\n\n 36.3636363636% {\n transform: translate(26px, 0);\n }\n\n 45.4545454545% {\n transform: translate(26px, 0);\n }\n\n 54.5454545455% {\n transform: translate(26px, 0);\n }\n\n 63.6363636364% {\n transform: translate(26px, 0);\n }\n\n 72.7272727273% {\n transform: translate(26px, 0);\n }\n\n 81.8181818182% {\n transform: translate(26px, -26px);\n }\n\n 90.9090909091% {\n transform: translate(0px, -26px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(5) {\n animation: moveBox-5 4s infinite;\n}\n\n@keyframes moveBox-6 {\n 9.0909090909% {\n transform: translate(0, 0);\n }\n\n 18.1818181818% {\n transform: translate(-26px, 0);\n }\n\n 27.2727272727% {\n transform: translate(-26px, 0);\n }\n\n 36.3636363636% {\n transform: translate(0px, 0);\n }\n\n 45.4545454545% {\n transform: translate(0px, 0);\n }\n\n 54.5454545455% {\n transform: translate(0px, 0);\n }\n\n 63.6363636364% {\n transform: translate(0px, 0);\n }\n\n 72.7272727273% {\n transform: translate(0px, 26px);\n }\n\n 81.8181818182% {\n transform: translate(-26px, 26px);\n }\n\n 90.9090909091% {\n transform: translate(-26px, 0px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(6) {\n animation: moveBox-6 4s infinite;\n}\n\n@keyframes moveBox-7 {\n 9.0909090909% {\n transform: translate(26px, 0);\n }\n\n 18.1818181818% {\n transform: translate(26px, 0);\n }\n\n 27.2727272727% {\n transform: translate(26px, 0);\n }\n\n 36.3636363636% {\n transform: translate(0px, 0);\n }\n\n 45.4545454545% {\n transform: translate(0px, -26px);\n }\n\n 54.5454545455% {\n transform: translate(26px, -26px);\n }\n\n 63.6363636364% {\n transform: translate(0px, -26px);\n }\n\n 72.7272727273% {\n transform: translate(0px, -26px);\n }\n\n 81.8181818182% {\n transform: translate(0px, 0px);\n }\n\n 90.9090909091% {\n transform: translate(26px, 0px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(7) {\n animation: moveBox-7 4s infinite;\n}\n\n@keyframes moveBox-8 {\n 9.0909090909% {\n transform: translate(0, 0);\n }\n\n 18.1818181818% {\n transform: translate(-26px, 0);\n }\n\n 27.2727272727% {\n transform: translate(-26px, -26px);\n }\n\n 36.3636363636% {\n transform: translate(0px, -26px);\n }\n\n 45.4545454545% {\n transform: translate(0px, -26px);\n }\n\n 54.5454545455% {\n transform: translate(0px, -26px);\n }\n\n 63.6363636364% {\n transform: translate(0px, -26px);\n }\n\n 72.7272727273% {\n transform: translate(0px, -26px);\n }\n\n 81.8181818182% {\n transform: translate(26px, -26px);\n }\n\n 90.9090909091% {\n transform: translate(26px, 0px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(8) {\n animation: moveBox-8 4s infinite;\n}\n\n@keyframes moveBox-9 {\n 9.0909090909% {\n transform: translate(-26px, 0);\n }\n\n 18.1818181818% {\n transform: translate(-26px, 0);\n }\n\n 27.2727272727% {\n transform: translate(0px, 0);\n }\n\n 36.3636363636% {\n transform: translate(-26px, 0);\n }\n\n 45.4545454545% {\n transform: translate(0px, 0);\n }\n\n 54.5454545455% {\n transform: translate(0px, 0);\n }\n\n 63.6363636364% {\n transform: translate(-26px, 0);\n }\n\n 72.7272727273% {\n transform: translate(-26px, 0);\n }\n\n 81.8181818182% {\n transform: translate(-52px, 0);\n }\n\n 90.9090909091% {\n transform: translate(-26px, 0);\n }\n\n 100% {\n transform: translate(0px, 0);\n }\n}\n\n.banter-loader__box:nth-child(9) {\n animation: moveBox-9 4s infinite;\n}\n"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"e6fd7d","snapshot":null,"tags":null,"title":"loader by KhaledMatalkah","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":63,"cssLen":592,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n height: 60px;\n width: 60px;\n position: relative;\n animation: loaderAnimation 1.5s infinite linear;\n}\n\n.loader-inner {\n position: absolute;\n height: 100%;\n width: 100%;\n left: 0;\n top: 0;\n background-color: #3053c7;\n border-radius: 50%;\n animation: innerAnimation 1s infinite ease-in-out;\n}\n\n@keyframes loaderAnimation {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes innerAnimation {\n 0% {\n width: 0;\n opacity: 0;\n }\n\n 50% {\n width: 100%;\n opacity: 1;\n }\n\n 100% {\n width: 0;\n opacity: 0;\n }\n}\n"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"113f71","snapshot":null,"tags":null,"title":"loader by mrhyddenn","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":875,"cssLen":785,"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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n

","css":".loader {\n position: relative;\n width: 110px;\n height: 30px;\n background: #fff;\n border-radius: 100px;\n}\n\n.loader::before {\n content: '';\n position: absolute;\n top: -20px;\n left: 10px;\n width: 30px;\n height: 30px;\n background: #fff;\n border-radius: 50%;\n box-shadow: 40px 0 0 20px #fff;\n}\n\n.snow {\n position: relative;\n display: flex;\n z-index: 1;\n}\n\n.snow span {\n position: relative;\n width: 3px;\n height: 3px;\n background: #fff;\n margin: 0 2px;\n border-radius: 50%;\n animation: snowing 5s linear infinite;\n animation-duration: calc(15s / var(--i));\n transform-origin: bottom;\n}\n\n@keyframes snowing {\n 0% {\n transform: translateY(0px);\n }\n\n 70% {\n transform: translateY(100px) scale(1);\n }\n\n 100% {\n transform: translateY(100px) scale(0);\n }\n}"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"d48c5e","snapshot":null,"tags":null,"title":"loader by AkshatDaxini","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":16894,"cssLen":3852,"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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n","css":".main {\n display: flex;\n justify-content: center;\n align-items: center;\n scale: 1.6;\n}\n\n#pizza {\n background-color: transparent;\n transform-origin: center center;\n animation: rotate 45s linear infinite;\n -webkit-animation: rotate 45s linear infinite;\n}\n\n#slice1 {\n animation: slice1 4s ease-in-out infinite;\n -webkit-animation: slice1 4s ease-in-out infinite;\n}\n\n#slice2 {\n animation: slice2 4s ease-in-out infinite;\n animation-delay: 1s;\n -webkit-animation: slice2 4s ease-in-out infinite;\n}\n\n#slice3 {\n animation: slice3 4s ease-in-out infinite;\n animation-delay: 2s;\n -webkit-animation: slice3 4s ease-in-out infinite;\n}\n\n#slice4 {\n animation: slice4 4s ease-in-out infinite;\n animation-delay: 3s;\n -webkit-animation: slice4 4s ease-in-out infinite;\n}\n\n#slice5 {\n animation: slice5 4s ease-in-out infinite;\n animation-delay: 4s;\n -webkit-animation: slice5 4s ease-in-out infinite;\n}\n\n#slice6 {\n animation: slice6 4s ease-in-out infinite;\n animation-delay: 5s;\n -webkit-animation: slice6 4s ease-in-out infinite;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n -webkit-transform: rotate(360deg);\n -moz-transform: rotate(360deg);\n -ms-transform: rotate(360deg);\n -o-transform: rotate(360deg);\n }\n}\n\n@keyframes slice1 {\n 0%,\n 100% {\n transform: translate(0, 0);\n -webkit-transform: translate(0, 0);\n -moz-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n -o-transform: translate(0, 0);\n }\n 50% {\n transform: translate(5%, 5%);\n -webkit-transform: translate(5%, 5%);\n -moz-transform: translate(5%, 5%);\n -ms-transform: translate(5%, 5%);\n -o-transform: translate(5%, 5%);\n }\n}\n\n@keyframes slice2 {\n 0%,\n 100% {\n transform: translate(0, 0);\n -webkit-transform: translate(0, 0);\n -moz-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n -o-transform: translate(0, 0);\n }\n 50% {\n transform: translate(0%, 7%);\n -webkit-transform: translate(0%, 7%);\n -moz-transform: translate(0%, 7%);\n -ms-transform: translate(0%, 7%);\n -o-transform: translate(0%, 7%);\n }\n}\n\n@keyframes slice3 {\n 0%,\n 100% {\n transform: translate(0, 0);\n -webkit-transform: translate(0, 0);\n -moz-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n -o-transform: translate(0, 0);\n }\n 50% {\n transform: translate(-5%, 5%);\n -webkit-transform: translate(-5%, 5%);\n -moz-transform: translate(-5%, 5%);\n -ms-transform: translate(-5%, 5%);\n -o-transform: translate(-5%, 5%);\n }\n}\n\n@keyframes slice4 {\n 0%,\n 100% {\n transform: translate(0, 0);\n -webkit-transform: translate(0, 0);\n -moz-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n -o-transform: translate(0, 0);\n }\n 50% {\n transform: translate(-5%, 0%);\n -webkit-transform: translate(-5%, 0%);\n -moz-transform: translate(-5%, 0%);\n -ms-transform: translate(-5%, 0%);\n -o-transform: translate(-5%, 0%);\n }\n}\n\n@keyframes slice5 {\n 0%,\n 100% {\n transform: translate(0, 0);\n -webkit-transform: translate(0, 0);\n -moz-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n -o-transform: translate(0, 0);\n }\n 50% {\n transform: translate(0%, -3%);\n -webkit-transform: translate(0%, -3%);\n -moz-transform: translate(0%, -3%);\n -ms-transform: translate(0%, -3%);\n -o-transform: translate(0%, -3%);\n }\n}\n\n@keyframes slice6 {\n 0%,\n 100% {\n transform: translate(0, 0);\n -webkit-transform: translate(0, 0);\n -moz-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n -o-transform: translate(0, 0);\n }\n 50% {\n transform: translate(5%, 0%);\n -webkit-transform: translate(5%, 0%);\n -moz-transform: translate(5%, 0%);\n -ms-transform: translate(5%, 0%);\n -o-transform: translate(5%, 0%);\n }\n}\n"}]}},"actionData":null,"errors":null}