{"loaderData":{"0":null,"0-3":{"total":7313,"projects":[{"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"},{"created":"2024-01-22T16:52:39.000Z","isPrivate":0,"projectId":"ec65eb","snapshot":null,"tags":null,"title":"loader by Nawsome","updated":"2024-01-22T16:52:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":232,"cssLen":4336,"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: 75px;\n height: 100px;\n}\n\n.loader__bar {\n position: absolute;\n bottom: 0;\n width: 10px;\n height: 50%;\n background: rgb(0, 0, 0);\n transform-origin: center bottom;\n box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);\n}\n\n.loader__bar:nth-child(1) {\n left: 0px;\n transform: scale(1, 0.2);\n -webkit-animation: barUp1 4s infinite;\n animation: barUp1 4s infinite;\n}\n\n.loader__bar:nth-child(2) {\n left: 15px;\n transform: scale(1, 0.4);\n -webkit-animation: barUp2 4s infinite;\n animation: barUp2 4s infinite;\n}\n\n.loader__bar:nth-child(3) {\n left: 30px;\n transform: scale(1, 0.6);\n -webkit-animation: barUp3 4s infinite;\n animation: barUp3 4s infinite;\n}\n\n.loader__bar:nth-child(4) {\n left: 45px;\n transform: scale(1, 0.8);\n -webkit-animation: barUp4 4s infinite;\n animation: barUp4 4s infinite;\n}\n\n.loader__bar:nth-child(5) {\n left: 60px;\n transform: scale(1, 1);\n -webkit-animation: barUp5 4s infinite;\n animation: barUp5 4s infinite;\n}\n\n.loader__ball {\n position: absolute;\n bottom: 10px;\n left: 0;\n width: 10px;\n height: 10px;\n background: rgb(44, 143, 255);\n border-radius: 50%;\n -webkit-animation: ball624 4s infinite;\n animation: ball624 4s infinite;\n}\n\n@keyframes ball624 {\n 0% {\n transform: translate(0, 0);\n }\n\n 5% {\n transform: translate(8px, -14px);\n }\n\n 10% {\n transform: translate(15px, -10px);\n }\n\n 17% {\n transform: translate(23px, -24px);\n }\n\n 20% {\n transform: translate(30px, -20px);\n }\n\n 27% {\n transform: translate(38px, -34px);\n }\n\n 30% {\n transform: translate(45px, -30px);\n }\n\n 37% {\n transform: translate(53px, -44px);\n }\n\n 40% {\n transform: translate(60px, -40px);\n }\n\n 50% {\n transform: translate(60px, 0);\n }\n\n 57% {\n transform: translate(53px, -14px);\n }\n\n 60% {\n transform: translate(45px, -10px);\n }\n\n 67% {\n transform: translate(37px, -24px);\n }\n\n 70% {\n transform: translate(30px, -20px);\n }\n\n 77% {\n transform: translate(22px, -34px);\n }\n\n 80% {\n transform: translate(15px, -30px);\n }\n\n 87% {\n transform: translate(7px, -44px);\n }\n\n 90% {\n transform: translate(0, -40px);\n }\n\n 100% {\n transform: translate(0, 0);\n }\n}\n\n@-webkit-keyframes barUp1 {\n 0% {\n transform: scale(1, 0.2);\n }\n\n 40% {\n transform: scale(1, 0.2);\n }\n\n 50% {\n transform: scale(1, 1);\n }\n\n 90% {\n transform: scale(1, 1);\n }\n\n 100% {\n transform: scale(1, 0.2);\n }\n}\n\n@keyframes barUp1 {\n 0% {\n transform: scale(1, 0.2);\n }\n\n 40% {\n transform: scale(1, 0.2);\n }\n\n 50% {\n transform: scale(1, 1);\n }\n\n 90% {\n transform: scale(1, 1);\n }\n\n 100% {\n transform: scale(1, 0.2);\n }\n}\n\n@-webkit-keyframes barUp2 {\n 0% {\n transform: scale(1, 0.4);\n }\n\n 40% {\n transform: scale(1, 0.4);\n }\n\n 50% {\n transform: scale(1, 0.8);\n }\n\n 90% {\n transform: scale(1, 0.8);\n }\n\n 100% {\n transform: scale(1, 0.4);\n }\n}\n\n@keyframes barUp2 {\n 0% {\n transform: scale(1, 0.4);\n }\n\n 40% {\n transform: scale(1, 0.4);\n }\n\n 50% {\n transform: scale(1, 0.8);\n }\n\n 90% {\n transform: scale(1, 0.8);\n }\n\n 100% {\n transform: scale(1, 0.4);\n }\n}\n\n@-webkit-keyframes barUp3 {\n 0% {\n transform: scale(1, 0.6);\n }\n\n 100% {\n transform: scale(1, 0.6);\n }\n}\n\n@keyframes barUp3 {\n 0% {\n transform: scale(1, 0.6);\n }\n\n 100% {\n transform: scale(1, 0.6);\n }\n}\n\n@-webkit-keyframes barUp4 {\n 0% {\n transform: scale(1, 0.8);\n }\n\n 40% {\n transform: scale(1, 0.8);\n }\n\n 50% {\n transform: scale(1, 0.4);\n }\n\n 90% {\n transform: scale(1, 0.4);\n }\n\n 100% {\n transform: scale(1, 0.8);\n }\n}\n\n@keyframes barUp4 {\n 0% {\n transform: scale(1, 0.8);\n }\n\n 40% {\n transform: scale(1, 0.8);\n }\n\n 50% {\n transform: scale(1, 0.4);\n }\n\n 90% {\n transform: scale(1, 0.4);\n }\n\n 100% {\n transform: scale(1, 0.8);\n }\n}\n\n@-webkit-keyframes barUp5 {\n 0% {\n transform: scale(1, 1);\n }\n\n 40% {\n transform: scale(1, 1);\n }\n\n 50% {\n transform: scale(1, 0.2);\n }\n\n 90% {\n transform: scale(1, 0.2);\n }\n\n 100% {\n transform: scale(1, 1);\n }\n}\n\n@keyframes barUp5 {\n 0% {\n transform: scale(1, 1);\n }\n\n 40% {\n transform: scale(1, 1);\n }\n\n 50% {\n transform: scale(1, 0.2);\n }\n\n 90% {\n transform: scale(1, 0.2);\n }\n\n 100% {\n transform: scale(1, 1);\n }\n}"},{"created":"2024-01-22T16:52:39.000Z","isPrivate":0,"projectId":"2d42be","snapshot":null,"tags":null,"title":"loader by G4b413l","updated":"2024-01-22T16:52:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":139,"cssLen":1683,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".three-body {\n --uib-size: 35px;\n --uib-speed: 0.8s;\n --uib-color: #5D3FD3;\n position: relative;\n display: inline-block;\n height: var(--uib-size);\n width: var(--uib-size);\n animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;\n}\n\n.three-body__dot {\n position: absolute;\n height: 100%;\n width: 30%;\n}\n\n.three-body__dot:after {\n content: '';\n position: absolute;\n height: 0%;\n width: 100%;\n padding-bottom: 100%;\n background-color: var(--uib-color);\n border-radius: 50%;\n}\n\n.three-body__dot:nth-child(1) {\n bottom: 5%;\n left: 0;\n transform: rotate(60deg);\n transform-origin: 50% 85%;\n}\n\n.three-body__dot:nth-child(1)::after {\n bottom: 0;\n left: 0;\n animation: wobble1 var(--uib-speed) infinite ease-in-out;\n animation-delay: calc(var(--uib-speed) * -0.3);\n}\n\n.three-body__dot:nth-child(2) {\n bottom: 5%;\n right: 0;\n transform: rotate(-60deg);\n transform-origin: 50% 85%;\n}\n\n.three-body__dot:nth-child(2)::after {\n bottom: 0;\n left: 0;\n animation: wobble1 var(--uib-speed) infinite\n calc(var(--uib-speed) * -0.15) ease-in-out;\n}\n\n.three-body__dot:nth-child(3) {\n bottom: -5%;\n left: 0;\n transform: translateX(116.666%);\n}\n\n.three-body__dot:nth-child(3)::after {\n top: 0;\n left: 0;\n animation: wobble2 var(--uib-speed) infinite ease-in-out;\n}\n\n@keyframes spin78236 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes wobble1 {\n 0%,\n 100% {\n transform: translateY(0%) scale(1);\n opacity: 1;\n }\n\n 50% {\n transform: translateY(-66%) scale(0.65);\n opacity: 0.8;\n }\n}\n\n@keyframes wobble2 {\n 0%,\n 100% {\n transform: translateY(0%) scale(1);\n opacity: 1;\n }\n\n 50% {\n transform: translateY(66%) scale(0.65);\n opacity: 0.8;\n }\n}\n"},{"created":"2024-01-22T16:52:39.000Z","isPrivate":0,"projectId":"d5bd8c","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:52:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1235,"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 font-size: 16px;\n width: 5.5em;\n height: 5.5em;\n}\n\n.loader:before {\n content: '';\n position: absolute;\n transform: translate(-50%, -50%) rotate(45deg);\n height: 100%;\n width: 4px;\n background: #fff;\n left: 50%;\n top: 50%;\n}\n\n.loader:after {\n content: '';\n position: absolute;\n left: 0.2em;\n bottom: 0.18em;\n width: 1em;\n height: 1em;\n background-color: orange;\n border-radius: 15%;\n animation: rollingRock 2.5s cubic-bezier(.79, 0, .47, .97) infinite;\n}\n\n@keyframes rollingRock {\n 0% {\n transform: translate(0, -1em) rotate(-45deg)\n }\n\n 5% {\n transform: translate(0, -1em) rotate(-50deg)\n }\n\n 20% {\n transform: translate(1em, -2em) rotate(47deg)\n }\n\n 25% {\n transform: translate(1em, -2em) rotate(45deg)\n }\n\n 30% {\n transform: translate(1em, -2em) rotate(40deg)\n }\n\n 45% {\n transform: translate(2em, -3em) rotate(137deg)\n }\n\n 50% {\n transform: translate(2em, -3em) rotate(135deg)\n }\n\n 55% {\n transform: translate(2em, -3em) rotate(130deg)\n }\n\n 70% {\n transform: translate(3em, -4em) rotate(217deg)\n }\n\n 75% {\n transform: translate(3em, -4em) rotate(220deg)\n }\n\n 100% {\n transform: translate(0, -1em) rotate(-225deg)\n }\n}\n "},{"created":"2024-01-22T16:52:39.000Z","isPrivate":0,"projectId":"d20c20","snapshot":null,"tags":null,"title":"loader by milley69","updated":"2024-01-22T16:52:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":275,"cssLen":435,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".loading svg polyline {\n fill: none;\n stroke-width: 3;\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n\n.loading svg polyline#back {\n fill: none;\n stroke: #ff4d5033;\n}\n\n.loading svg polyline#front {\n fill: none;\n stroke: #ff4d4f;\n stroke-dasharray: 48, 144;\n stroke-dashoffset: 192;\n animation: dash_682 1.4s linear infinite;\n}\n\n@keyframes dash_682 {\n 72.5% {\n opacity: 0;\n }\n\n to {\n stroke-dashoffset: 0;\n }\n}\n"}]}},"actionData":null,"errors":null}