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

","css":".loader {\n display: inline-block;\n vertical-align: middle;\n position: relative;\n margin: 10px;\n}\n\n@keyframes loader-bubbles {\n 0% {\n box-shadow: 0 -10px #3b82f6,\n 3px 0 #3b82f6,\n 5px 0 #3b82f6;\n }\n\n 30% {\n box-shadow: 3px -20px rgba(239,223,255,0),\n 5px -10px #3b82f6,\n 5px 0 #3b82f6;\n }\n\n 60% {\n box-shadow: 3px 0 rgba(239,223,255,0),\n 4px -20px rgba(239,223,255,0),\n 3px -10px #3b82f6;\n }\n\n 61% {\n box-shadow: 3px 0 #3b82f6,\n 4px -20px rgba(239,223,255,0),\n 3px -10px #3b82f6;\n }\n\n 100% {\n box-shadow: 0 -10px #3b82f6,\n 4px -20px rgba(239,223,255,0),\n 5px -20px rgba(239,223,255,0);\n }\n}\n\n.loader {\n width: 10px;\n height: 20px;\n margin-left: 20px;\n margin-right: 20px;\n background: #3b82f6;\n}\n\n.loader:before,\n.loader:after {\n content: '';\n position: absolute;\n}\n\n.loader:before {\n top: -8px;\n left: -13px;\n width: 0;\n height: 0;\n border: 18px solid transparent;\n border-bottom: 20px solid #3b82f6;\n border-radius: 3px;\n}\n\n.loader:after {\n top: 0;\n left: 0;\n width: 4px;\n height: 4px;\n background: #3b82f6;\n border-radius: 50%;\n animation: loader-bubbles 1s linear infinite forwards;\n}"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"c0ae65","snapshot":null,"tags":null,"title":"loader by MikeAndrewDesigner","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":238,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 5.4em;\n height: 5.4em;\n border: 0.4em solid rgb(84, 84, 84);\n border-left-color: #a23ffc;\n border-radius: 45%;\n animation: spin 0.7s linear infinite;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"b00931","snapshot":null,"tags":null,"title":"loader by DevVaradPatil","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":803,"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: 50px;\n height: 50px;\n border-radius: 50%;\n background: linear-gradient(45deg, transparent, transparent 40%, #e5f403);\n animation: glow 2s linear infinite;\n}\n@keyframes glow {\n 0% {\n transform: rotate(0deg);\n filter: hue-rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n filter: hue-rotate(360deg);\n }\n}\n.loader::before {\n content: \"\";\n position: absolute;\n top: 3px;\n left: 3px;\n right: 3px;\n bottom: 3px;\n background: #212121;\n border-radius: 50%;\n z-index: 1000;\n}\n.loader::after {\n content: \"\";\n position: absolute;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n background: linear-gradient(45deg, transparent, transparent 40%, #e5f403);\n border-radius: 50%;\n z-index: 1000;\n z-index: 1;\n filter: blur(30px);\n}\n"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"9da1e2","snapshot":null,"tags":null,"title":"loader by Tsiangana","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":263,"cssLen":963,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n L \n o\n a\n d \n i \n n \n g\n

","css":".loader {\n font-family: Roboto, sans-serif;\n font-size: 25px;\n font-weight: 600;\n}\n\n.ani:nth-child(1) {\n animation: ani1 2.1s ease-in-out 14s infinite;\n}\n\n@keyframes ani1 {\n 50% {\n font-size: 40px;\n }\n}\n\n.ani:nth-child(2) {\n animation: ani2 2.1s ease-in-out 12s infinite;\n}\n\n@keyframes ani2 {\n 50% {\n font-size: 40px;\n }\n}\n\n.ani:nth-child(3) {\n animation: ani3 2.1s ease-in-out 10s infinite;\n}\n\n@keyframes ani3 {\n 50% {\n font-size: 40px;\n }\n}\n\n.ani:nth-child(4) {\n animation: ani4 2.1s ease-in-out 8s infinite;\n}\n\n@keyframes ani4 {\n 50% {\n font-size: 40px;\n }\n}\n\n.ani:nth-child(5) {\n animation: ani5 2.1s ease-in-out 6s infinite;\n}\n\n@keyframes ani5 {\n 50% {\n font-size: 40px;\n }\n}\n\n.ani:nth-child(6) {\n animation: ani6 2.1s ease-in-out 4s infinite;\n}\n\n@keyframes ani6 {\n 50% {\n font-size: 40px;\n }\n}\n\n.ani:nth-child(7) {\n animation: ani7 2.1s ease-in-out 2s infinite;\n}\n\n@keyframes ani7 {\n 50% {\n font-size: 40px;\n }\n}"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"7e79b2","snapshot":null,"tags":null,"title":"loader by doniaskima","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":504,"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 white-space: pre;\n font-size: 30px;\n line-height: 1.2em;\n height: 1.2em;\n overflow: hidden;\n}\n\n.loader:before {\n content: \"Loading...\\A⌰oading...\\A⌰⍜ading...\\A⌰⍜⏃ding...\\A⌰⍜⏃⎅ing...\\A⌰⍜⏃⎅⟟ng...\\A⌰⍜⏃⎅⟟⋏g...\\A⌰⍜⏃⎅⟟⋏☌...\\A⌰⍜⏃⎅⟟⋏☌⟒..\\A⌰⍜⏃⎅⟟⋏☌⟒⏁.\\A⌰⍜⏃⎅⟟⋏☌⟒⏁⋔\";\n white-space: pre;\n display: inline-block;\n animation: l39 1s infinite steps(11) alternate;\n}\n\n@keyframes l39 {\n 100% {\n transform: translateY(-100%)\n }\n}"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"aac538","snapshot":null,"tags":null,"title":"loader by omriluz","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":218,"cssLen":1532,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".container {\n position: relative;\n width: 100%;\n height: 200px;\n display: flex;\n align-items: center;\n justify-content: center;\n -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, #0005);\n}\n\n.container .loader {\n position: absolute;\n width: 200px;\n height: 200px;\n border-radius: 50%;\n animation: animate 2s linear infinite;\n}\n\n.container .loader:nth-child(2),\n.container .loader:nth-child(4) {\n animation-delay: -1s;\n}\n\n@keyframes animate {\n 0% {\n transform: rotate(0deg);\n filter: hue-rotate(360deg);\n }\n\n 100% {\n transform: rotate(360deg);\n filter: hue-rotate(0deg);\n }\n}\n\n.container .loader:nth-child(1)::before,\n.container .loader:nth-child(2)::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 50%;\n height: 100%;\n background: linear-gradient(to top, transparent, rgba(0,255,249, 0.4));\n background-size: 100px 180px;\n background-repeat: no-repeat;\n border-top-left-radius: 100px;\n border-bottom-left-radius: 100px;\n}\n\n.container .loader i {\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 20px;\n height: 20px;\n background: #00fff9;\n border-radius: 50%;\n z-index: 100;\n box-shadow: 0 0 10px #00fff9,\n 0 0 30px #00fff9,\n 0 0 40px #00fff9,\n 0 0 50px #00fff9,\n 0 0 60px #00fff9,\n 0 0 70px #00fff9,\n 0 0 80px #00fff9,\n 0 0 90px #00fff9,\n 0 0 100px #00fff9;\n}\n\n.container .loader span {\n position: absolute;\n inset: 20px;\n background: #e8e8e8;\n border-radius: 50%;\n z-index: 1;\n}"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"3763cf","snapshot":null,"tags":null,"title":"loader by faxriddin20","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":113,"cssLen":1156,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".spinner {\n width: 70.4px;\n height: 70.4px;\n --clr: lime;\n --clr-alpha: transparrent;\n animation: spinner 1.6s infinite ease;\n transform-style: preserve-3d;\n}\n\n.spinner > div {\n background-color: var(--clr-alpha);\n height: 100%;\n position: absolute;\n width: 100%;\n border: 3.5px solid var(--clr);\n}\n\n.spinner div:nth-of-type(1) {\n transform: translateZ(-35.2px) rotateY(180deg);\n}\n\n.spinner div:nth-of-type(2) {\n transform: rotateY(-270deg) translateX(50%);\n transform-origin: top right;\n}\n\n.spinner div:nth-of-type(3) {\n transform: rotateY(270deg) translateX(-50%);\n transform-origin: center left;\n}\n\n.spinner div:nth-of-type(4) {\n transform: rotateX(90deg) translateY(-50%);\n transform-origin: top center;\n}\n\n.spinner div:nth-of-type(5) {\n transform: rotateX(-90deg) translateY(50%);\n transform-origin: bottom center;\n}\n\n.spinner div:nth-of-type(6) {\n transform: translateZ(35.2px);\n}\n\n@keyframes spinner {\n 0% {\n transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);\n }\n\n 50% {\n transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);\n }\n\n 100% {\n transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);\n }\n}\n"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"01a63b","snapshot":null,"tags":null,"title":"loader by Sendung","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":552,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner {\n --s: 9px;\n width: 56px;\n height: 56px;\n background: #e73535;\n border-radius: 20%;\n animation: spinner-ehcge9 1.5s infinite linear;\n clip-path: polygon(0 0,calc(50% - var(--s)) 0,50% var(--s),calc(50% + var(--s)) 0,100% 0,100% calc(50% - var(--s)),calc(100% - var(--s)) 50%,100% calc(50% + var(--s)),100% 100%,calc(50% + var(--s)) 100%, 50% calc(100% - var(--s)),calc(50% - var(--s)) 100%,0 100%,0 calc(50% + var(--s)), var(--s) 50%, 0 calc(50% - var(--s)));\n}\n\n@keyframes spinner-ehcge9 {\n 100% {\n transform: rotate(1turn);\n }\n}"}]}},"actionData":null,"errors":null}