{"loaderData":{"0":null,"0-3":{"total":7413,"projects":[{"created":"2024-01-22T16:52:40.000Z","isPrivate":0,"projectId":"3ba465","snapshot":null,"tags":null,"title":"loader by zanina-yassine","updated":"2024-01-22T16:52:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":316,"cssLen":1710,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".container {\n width: 250px;\n height: 250px;\n padding: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.cloud {\n width: 250px;\n}\n\n.front {\n padding-top: 45px;\n margin-left: 25px;\n display: inline;\n position: absolute;\n z-index: 11;\n animation: clouds 8s infinite;\n animation-timing-function: ease-in-out;\n}\n\n.back {\n margin-top: -30px;\n margin-left: 150px;\n z-index: 12;\n animation: clouds 12s infinite;\n animation-timing-function: ease-in-out;\n}\n\n.right-front {\n width: 45px;\n height: 45px;\n border-radius: 50% 50% 50% 0%;\n background-color: #4c9beb;\n display: inline-block;\n margin-left: -25px;\n z-index: 5;\n}\n\n.left-front {\n width: 65px;\n height: 65px;\n border-radius: 50% 50% 0% 50%;\n background-color: #4c9beb;\n display: inline-block;\n z-index: 5;\n}\n\n.right-back {\n width: 50px;\n height: 50px;\n border-radius: 50% 50% 50% 0%;\n background-color: #4c9beb;\n display: inline-block;\n margin-left: -20px;\n z-index: 5;\n}\n\n.left-back {\n width: 30px;\n height: 30px;\n border-radius: 50% 50% 0% 50%;\n background-color: #4c9beb;\n display: inline-block;\n z-index: 5;\n}\n\n.sun {\n width: 120px;\n height: 120px;\n background: -webkit-linear-gradient(to right, #fcbb04, #fffc00);\n background: linear-gradient(to right, #fcbb04, #fffc00);\n border-radius: 60px;\n display: inline;\n position: absolute;\n}\n\n.sunshine {\n animation: sunshines 2s infinite;\n}\n\n@keyframes sunshines {\n 0% {\n transform: scale(1);\n opacity: 0.6;\n }\n\n 100% {\n transform: scale(1.4);\n opacity: 0;\n }\n}\n\n@keyframes clouds {\n 0% {\n transform: translateX(15px);\n }\n\n 50% {\n transform: translateX(0px);\n }\n\n 100% {\n transform: translateX(15px);\n }\n}\n"},{"created":"2024-01-22T16:52:40.000Z","isPrivate":0,"projectId":"98901e","snapshot":null,"tags":null,"title":"loader by terenceodonoghue","updated":"2024-01-22T16:52:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":94,"cssLen":1027,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n

","css":".container {\n position: absolute;\n top: 50%;\n left: 50%;\n border-radius: 50%;\n height: 96px;\n width: 96px;\n animation: rotate_3922 1.2s linear infinite;\n background-color: #9b59b6;\n background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);\n}\n\n.container span {\n position: absolute;\n border-radius: 50%;\n height: 100%;\n width: 100%;\n background-color: #9b59b6;\n background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);\n}\n\n.container span:nth-of-type(1) {\n filter: blur(5px);\n}\n\n.container span:nth-of-type(2) {\n filter: blur(10px);\n}\n\n.container span:nth-of-type(3) {\n filter: blur(25px);\n}\n\n.container span:nth-of-type(4) {\n filter: blur(50px);\n}\n\n.container::after {\n content: \"\";\n position: absolute;\n top: 10px;\n left: 10px;\n right: 10px;\n bottom: 10px;\n background-color: #fff;\n border: solid 5px #ffffff;\n border-radius: 50%;\n}\n\n@keyframes rotate_3922 {\n from {\n transform: translate(-50%, -50%) rotate(0deg);\n }\n\n to {\n transform: translate(-50%, -50%) rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T16:52:40.000Z","isPrivate":0,"projectId":"ac9ac1","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:52:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1917,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 120px;\n height: 150px;\n background-color: #fff;\n background-repeat: no-repeat;\n background-image: linear-gradient(#ddd 50%, #bbb 51%),\n linear-gradient(#ddd, #ddd), linear-gradient(#ddd, #ddd),\n radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%),\n radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%),\n radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%);\n background-position: 0 20px, 45px 0, 8px 6px, 55px 3px, 75px 3px, 95px 3px;\n background-size: 100% 4px, 1px 23px, 30px 8px, 15px 15px, 15px 15px, 15px 15px;\n position: relative;\n border-radius: 6%;\n animation: shake 3s ease-in-out infinite;\n transform-origin: 60px 180px;\n}\n\n.loader:before {\n content: \"\";\n position: absolute;\n left: 5px;\n top: 100%;\n width: 7px;\n height: 5px;\n background: #aaa;\n border-radius: 0 0 4px 4px;\n box-shadow: 102px 0 #aaa;\n}\n\n.loader:after {\n content: \"\";\n position: absolute;\n width: 95px;\n height: 95px;\n left: 0;\n right: 0;\n margin: auto;\n bottom: 20px;\n background-color: #bbdefb;\n background-image: linear-gradient( to right, #0004 0%, #0004 49%, #0000 50%, #0000 100% ),\n linear-gradient(135deg, #64b5f6 50%, #607d8b 51%);\n background-size: 30px 100%, 90px 80px;\n border-radius: 50%;\n background-repeat: repeat, no-repeat;\n background-position: 0 0;\n box-sizing: border-box;\n border: 10px solid #DDD;\n box-shadow: 0 0 0 4px #999 inset, 0 0 6px 6px #0004 inset;\n animation: spin 3s ease-in-out infinite;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg)\n }\n\n 50% {\n transform: rotate(360deg)\n }\n\n 75% {\n transform: rotate(750deg)\n }\n\n 100% {\n transform: rotate(1800deg)\n }\n}\n\n@keyframes shake {\n 65%, 80%, 88%, 96% {\n transform: rotate(0.5deg)\n }\n\n 50%, 75%, 84%, 92% {\n transform: rotate(-0.5deg)\n }\n\n 0%, 50%, 100% {\n transform: rotate(0)\n }\n}"},{"created":"2024-01-22T16:52:40.000Z","isPrivate":0,"projectId":"ec40ce","snapshot":null,"tags":null,"title":"loader by gsperandio","updated":"2024-01-22T16:52:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":241,"cssLen":1918,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".cubes {\n position: absolute;\n top: 50%;\n left: 50%;\n transform-style: preserve-3d;\n}\n\n.loop {\n transform: rotateX(-35deg) rotateY(-45deg) translateZ(1.5625em);\n}\n\n@keyframes s {\n to {\n transform: scale3d(0.2, 0.2, 0.2);\n }\n}\n\n.item {\n margin: -1.5625em;\n width: 3.125em;\n height: 3.125em;\n transform-origin: 50% 50% -1.5625em;\n box-shadow: 0 0 0.125em currentColor;\n background: currentColor;\n animation: s 0.6s cubic-bezier(0.45, 0.03, 0.51, 0.95) infinite alternate;\n}\n\n.item:before,\n.item:after {\n position: absolute;\n width: inherit;\n height: inherit;\n transform-origin: 0 100%;\n box-shadow: inherit;\n background: currentColor;\n content: \"\";\n}\n\n.item:before {\n bottom: 100%;\n transform: rotateX(90deg);\n}\n\n.item:after {\n left: 100%;\n transform: rotateY(90deg);\n}\n\n.item:nth-child(1) {\n margin-top: 6.25em;\n color: #fe1e52;\n animation-delay: -1.2s;\n}\n\n.item:nth-child(1):before {\n color: #ff6488;\n}\n\n.item:nth-child(1):after {\n color: #ff416d;\n}\n\n.item:nth-child(2) {\n margin-top: 3.125em;\n color: #fe4252;\n animation-delay: -1s;\n}\n\n.item:nth-child(2):before {\n color: #ff8892;\n}\n\n.item:nth-child(2):after {\n color: #ff6572;\n}\n\n.item:nth-child(3) {\n margin-top: 0em;\n color: #fe6553;\n animation-delay: -0.8s;\n}\n\n.item:nth-child(3):before {\n color: #ffa499;\n}\n\n.item:nth-child(3):after {\n color: #ff8476;\n}\n\n.item:nth-child(4) {\n margin-top: -3.125em;\n color: #fe8953;\n animation-delay: -0.6s;\n}\n\n.item:nth-child(4):before {\n color: #ffb999;\n}\n\n.item:nth-child(4):after {\n color: #ffa176;\n}\n\n.item:nth-child(5) {\n margin-top: -6.25em;\n color: #feac54;\n animation-delay: -0.4s;\n}\n\n.item:nth-child(5):before {\n color: #ffce9a;\n}\n\n.item:nth-child(5):after {\n color: #ffbd77;\n}\n\n.item:nth-child(6) {\n margin-top: -9.375em;\n color: #fed054;\n animation-delay: -0.2s;\n}\n\n.item:nth-child(6):before {\n color: #ffe49a;\n}\n\n.item:nth-child(6):after {\n color: #ffda77;\n}"},{"created":"2024-01-22T16:52:40.000Z","isPrivate":0,"projectId":"a4f673","snapshot":null,"tags":null,"title":"loader by cohencoo","updated":"2024-01-22T16:52:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":33,"cssLen":1021,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".custom-loader {\n width: 70px;\n height: 70px;\n background: #ffa600;\n border-radius: 50px;\n -webkit-mask: radial-gradient(circle 31px at 50% calc(100% + 13px),#000 95%,#0000) top 4px left 50%,\n radial-gradient(circle 31px,#000 95%,#0000) center,\n radial-gradient(circle 31px at 50% -13px,#000 95%,#0000) bottom 4px left 50%,\n linear-gradient(#000 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n -webkit-mask-repeat: no-repeat;\n animation: cu10 1.5s infinite;\n}\n\n@keyframes cu10 {\n 0% {\n -webkit-mask-size: 0 18px,0 18px,0 18px,auto\n }\n\n 16.67% {\n -webkit-mask-size: 100% 18px,0 18px,0 18px,auto\n }\n\n 33.33% {\n -webkit-mask-size: 100% 18px,100% 18px,0 18px,auto\n }\n\n 50% {\n -webkit-mask-size: 100% 18px,100% 18px,100% 18px,auto\n }\n\n 66.67% {\n -webkit-mask-size: 0 18px,100% 18px,100% 18px,auto\n }\n\n 83.33% {\n -webkit-mask-size: 0 18px,0 18px,100% 18px,auto\n }\n\n 100% {\n -webkit-mask-size: 0 18px,0 18px,0 18px,auto\n }\n}"},{"created":"2024-01-22T16:52:40.000Z","isPrivate":0,"projectId":"1c8717","snapshot":null,"tags":null,"title":"loader by AHMED-MIT","updated":"2024-01-22T16:52:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":567,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".spinner {\n width: 56px;\n height: 56px;\n display: grid;\n border: 4.5px solid #0000;\n border-radius: 50%;\n border-color: #dbdcef #0000;\n animation: spinner-e04l1k 1s infinite linear;\n}\n\n.spinner::before,\n.spinner::after {\n content: \"\";\n grid-area: 1/1;\n margin: 2.2px;\n border: inherit;\n border-radius: 50%;\n}\n\n.spinner::before {\n border-color: #474bff #0000;\n animation: inherit;\n animation-duration: 0.5s;\n animation-direction: reverse;\n}\n\n.spinner::after {\n margin: 8.9px;\n}\n\n@keyframes spinner-e04l1k {\n 100% {\n transform: rotate(1turn);\n }\n}"},{"created":"2024-01-22T16:52:40.000Z","isPrivate":0,"projectId":"87acba","snapshot":null,"tags":null,"title":"loader by Nawsome","updated":"2024-01-22T16:52:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":403,"cssLen":7455,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","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: #fff;\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, .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}"},{"created":"2024-01-22T16:52:40.000Z","isPrivate":0,"projectId":"59d7d6","snapshot":null,"tags":null,"title":"loader by JaydipPrajapati1910","updated":"2024-01-22T16:52:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":1023,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".loader {\n position: relative;\n width: 160px;\n height: 160px;\n border: 4px solid #282828;\n overflow: hidden;\n border-radius: 50%;\n box-shadow: -5px -5px 5px rgba(255, 255, 255, 0.1),\n 10px 10px 10px rgba(0, 0, 0, 0.4),\n inset -5px -5px 5px rgba(255, 255, 255, 0.2),\n inset 10px 10px 10px rgba(0, 0, 0, 0.4);\n}\n\n.loader:before {\n content: \"\";\n position: absolute;\n top: 25px;\n left: 25px;\n right: 25px;\n bottom: 25px;\n z-index: 10;\n background: #212121;\n border-radius: 50%;\n border: 2px solid #292929;\n box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 0.2),\n inset 3px 3px 5px rgba(0, 0, 0, 0.5);\n}\n\n.loader span {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-image: linear-gradient(\n -225deg,\n #ff7402 0%,\n #ffe700 50%,\n #fff55e 100%\n );\n filter: blur(20px);\n z-index: -1;\n animation: animate 0.5s linear infinite;\n}\n\n@keyframes animate {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n \n"},{"created":"2024-01-22T16:52:40.000Z","isPrivate":0,"projectId":"c92a53","snapshot":null,"tags":null,"title":"loader by jeremyssocial","updated":"2024-01-22T16:52:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":333,"cssLen":1476,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Status

\n","css":"@keyframes blinkCursor {\n 50% {\n border-right-color: transparent;\n }\n}\n\n@keyframes typeAndDelete {\n 0%,\n 10% {\n width: 0;\n }\n 45%,\n 55% {\n width: 6.2em;\n } /* adjust width based on content */\n 90%,\n 100% {\n width: 0;\n }\n}\n\n.terminal-loader {\n border: 0.1em solid #333;\n background-color: #1a1a1a;\n color: #0f0;\n font-family: \"Courier New\", Courier, monospace;\n font-size: 1em;\n padding: 1.5em 1em;\n width: 12em;\n margin: 100px auto;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n}\n\n.terminal-header {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 1.5em;\n background-color: #333;\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n padding: 0 0.4em;\n box-sizing: border-box;\n}\n\n.terminal-controls {\n float: right;\n}\n\n.control {\n display: inline-block;\n width: 0.6em;\n height: 0.6em;\n margin-left: 0.4em;\n border-radius: 50%;\n background-color: #777;\n}\n\n.control.close {\n background-color: #e33;\n}\n\n.control.minimize {\n background-color: #ee0;\n}\n\n.control.maximize {\n background-color: #0b0;\n}\n\n.terminal-title {\n float: left;\n line-height: 1.5em;\n color: #eee;\n}\n\n.text {\n display: inline-block;\n white-space: nowrap;\n overflow: hidden;\n border-right: 0.2em solid green; /* Cursor */\n animation: typeAndDelete 4s steps(11) infinite,\n blinkCursor 0.5s step-end infinite alternate;\n margin-top: 1.5em;\n}\n"},{"created":"2024-01-22T16:52:40.000Z","isPrivate":0,"projectId":"c8797a","snapshot":null,"tags":null,"title":"loader by andrew-demchenk0","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":301,"cssLen":2037,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n

","css":".cube-loader {\n position: relative;\n/* u can choose any size */\n width: 75px;\n height: 75px;\n transform-style: preserve-3d;\n transform: rotateX(-30deg);\n animation: animate 4s linear infinite;\n}\n\n@keyframes animate {\n 0% {\n transform: rotateX(-30deg) rotateY(0);\n }\n\n 100% {\n transform: rotateX(-30deg) rotateY(360deg);\n }\n}\n\n.cube-loader .cube-wrapper {\n position: absolute;\n width: 100%;\n height: 100%;\n /* top: 0;\n left: 0; */\n transform-style: preserve-3d;\n}\n\n.cube-loader .cube-wrapper .cube-span {\n position: absolute;\n width: 100%;\n height: 100%;\n /* top: 0;\n left: 0; */\n /* width 75px / 2 = 37.5px */\n transform: rotateY(calc(90deg * var(--i))) translateZ(37.5px);\n background: linear-gradient(\n to bottom,\n hsl(330, 3.13%, 25.1%) 0%,\n hsl(177.27, 21.71%, 32.06%) 5.5%,\n hsl(176.67, 34.1%, 36.88%) 12.1%,\n hsl(176.61, 42.28%, 40.7%) 19.6%,\n hsl(176.63, 48.32%, 43.88%) 27.9%,\n hsl(176.66, 53.07%, 46.58%) 36.6%,\n hsl(176.7, 56.94%, 48.91%) 45.6%,\n hsl(176.74, 62.39%, 50.91%) 54.6%,\n hsl(176.77, 69.86%, 52.62%) 63.4%,\n hsl(176.8, 76.78%, 54.08%) 71.7%,\n hsl(176.83, 83.02%, 55.29%) 79.4%,\n hsl(176.85, 88.44%, 56.28%) 86.2%,\n hsl(176.86, 92.9%, 57.04%) 91.9%,\n hsl(176.88, 96.24%, 57.59%) 96.3%,\n hsl(176.88, 98.34%, 57.93%) 99%,\n hsl(176.89, 99.07%, 58.04%) 100%\n );\n}\n\n.cube-top {\n position: absolute;\n width: 75px;\n height: 75px;\n background: hsl(330, 3.13%, 25.1%) 0%;\n /* width 75px / 2 = 37.5px */\n transform: rotateX(90deg) translateZ(37.5px);\n transform-style: preserve-3d;\n}\n\n.cube-top::before {\n content: '';\n position: absolute;\n/* u can choose any size */\n width: 75px;\n height: 75px;\n background: hsl(176.61, 42.28%, 40.7%) 19.6%;\n transform: translateZ(-90px);\n filter: blur(10px);\n box-shadow: 0 0 10px #323232,\n 0 0 20px hsl(176.61, 42.28%, 40.7%) 19.6%,\n 0 0 30px #323232,\n 0 0 40px hsl(176.61, 42.28%, 40.7%) 19.6%;\n}\n"},{"created":"2024-01-22T16:52:39.000Z","isPrivate":0,"projectId":"6ffd35","snapshot":null,"tags":null,"title":"loader by alexruix","updated":"2024-01-22T16:52:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":325,"cssLen":1277,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

\n \n \n

","css":".loader {\n --cell-size: 52px;\n --cell-spacing: 1px;\n --cells: 3;\n --total-size: calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing)));\n display: flex;\n flex-wrap: wrap;\n width: var(--total-size);\n height: var(--total-size);\n}\n\n.cell {\n flex: 0 0 var(--cell-size);\n margin: var(--cell-spacing);\n background-color: transparent;\n box-sizing: border-box;\n border-radius: 4px;\n animation: 1.5s ripple ease infinite;\n}\n\n.cell.d-1 {\n animation-delay: 100ms;\n}\n\n.cell.d-2 {\n animation-delay: 200ms;\n}\n\n.cell.d-3 {\n animation-delay: 300ms;\n}\n\n.cell.d-4 {\n animation-delay: 400ms;\n}\n\n.cell:nth-child(1) {\n --cell-color: #00FF87;\n}\n\n.cell:nth-child(2) {\n --cell-color: #0CFD95;\n}\n\n.cell:nth-child(3) {\n --cell-color: #17FBA2;\n}\n\n.cell:nth-child(4) {\n --cell-color: #23F9B2;\n}\n\n.cell:nth-child(5) {\n --cell-color: #30F7C3;\n}\n\n.cell:nth-child(6) {\n --cell-color: #3DF5D4;\n}\n\n.cell:nth-child(7) {\n --cell-color: #45F4DE;\n}\n\n.cell:nth-child(8) {\n --cell-color: #53F1F0;\n}\n\n.cell:nth-child(9) {\n --cell-color: #60EFFF;\n}\n\n/*Animation*/\n@keyframes ripple {\n 0% {\n background-color: transparent;\n }\n\n 30% {\n background-color: var(--cell-color);\n }\n\n 60% {\n background-color: transparent;\n }\n\n 100% {\n background-color: transparent;\n }\n}"},{"created":"2024-01-22T16:52:39.000Z","isPrivate":0,"projectId":"932ff9","snapshot":null,"tags":null,"title":"loader by david-mohseni","updated":"2024-01-22T16:52:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":378,"cssLen":1536,"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: 54px;\n height: 54px;\n border-radius: 10px;\n}\n\n.loader div {\n width: 8%;\n height: 24%;\n background: rgb(128, 128, 128);\n position: absolute;\n left: 50%;\n top: 30%;\n opacity: 0;\n border-radius: 50px;\n box-shadow: 0 0 3px rgba(0,0,0,0.2);\n animation: fade458 1s linear infinite;\n}\n\n@keyframes fade458 {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0.25;\n }\n}\n\n.loader .bar1 {\n transform: rotate(0deg) translate(0, -130%);\n animation-delay: 0s;\n}\n\n.loader .bar2 {\n transform: rotate(30deg) translate(0, -130%);\n animation-delay: -1.1s;\n}\n\n.loader .bar3 {\n transform: rotate(60deg) translate(0, -130%);\n animation-delay: -1s;\n}\n\n.loader .bar4 {\n transform: rotate(90deg) translate(0, -130%);\n animation-delay: -0.9s;\n}\n\n.loader .bar5 {\n transform: rotate(120deg) translate(0, -130%);\n animation-delay: -0.8s;\n}\n\n.loader .bar6 {\n transform: rotate(150deg) translate(0, -130%);\n animation-delay: -0.7s;\n}\n\n.loader .bar7 {\n transform: rotate(180deg) translate(0, -130%);\n animation-delay: -0.6s;\n}\n\n.loader .bar8 {\n transform: rotate(210deg) translate(0, -130%);\n animation-delay: -0.5s;\n}\n\n.loader .bar9 {\n transform: rotate(240deg) translate(0, -130%);\n animation-delay: -0.4s;\n}\n\n.loader .bar10 {\n transform: rotate(270deg) translate(0, -130%);\n animation-delay: -0.3s;\n}\n\n.loader .bar11 {\n transform: rotate(300deg) translate(0, -130%);\n animation-delay: -0.2s;\n}\n\n.loader .bar12 {\n transform: rotate(330deg) translate(0, -130%);\n animation-delay: -0.1s;\n}\n"}]}},"actionData":null,"errors":null}