{"loaderData":{"0":null,"0-3":{"total":7313,"projects":[{"created":"2024-01-22T16:54:28.000Z","isPrivate":0,"projectId":"f36ebc","snapshot":null,"tags":null,"title":"loader by Erasmus001","updated":"2024-01-22T16:54:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":662,"cssLen":3104,"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":"#wifi-loader {\n --background: #62abff;\n --front-color: #000;\n --back-color: #c3c8de;\n --text-color: #414856;\n width: 64px;\n height: 64px;\n border-radius: 50px;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n#wifi-loader svg {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n#wifi-loader svg circle {\n position: absolute;\n fill: none;\n stroke-width: 6px;\n stroke-linecap: round;\n stroke-linejoin: round;\n transform: rotate(-100deg);\n transform-origin: center;\n}\n\n#wifi-loader svg circle.back {\n stroke: var(--back-color);\n}\n\n#wifi-loader svg circle.front {\n stroke: var(--front-color);\n}\n\n#wifi-loader svg.circle-outer {\n height: 86px;\n width: 86px;\n}\n\n#wifi-loader svg.circle-outer circle {\n stroke-dasharray: 62.75 188.25;\n}\n\n#wifi-loader svg.circle-outer circle.back {\n animation: circle-outer135 1.8s ease infinite 0.3s;\n}\n\n#wifi-loader svg.circle-outer circle.front {\n animation: circle-outer135 1.8s ease infinite 0.15s;\n}\n\n#wifi-loader svg.circle-middle {\n height: 60px;\n width: 60px;\n}\n\n#wifi-loader svg.circle-middle circle {\n stroke-dasharray: 42.5 127.5;\n}\n\n#wifi-loader svg.circle-middle circle.back {\n animation: circle-middle6123 1.8s ease infinite 0.25s;\n}\n\n#wifi-loader svg.circle-middle circle.front {\n animation: circle-middle6123 1.8s ease infinite 0.1s;\n}\n\n#wifi-loader svg.circle-inner {\n height: 34px;\n width: 34px;\n}\n\n#wifi-loader svg.circle-inner circle {\n stroke-dasharray: 22 66;\n}\n\n#wifi-loader svg.circle-inner circle.back {\n animation: circle-inner162 1.8s ease infinite 0.2s;\n}\n\n#wifi-loader svg.circle-inner circle.front {\n animation: circle-inner162 1.8s ease infinite 0.05s;\n}\n\n#wifi-loader .text {\n position: absolute;\n bottom: -40px;\n display: flex;\n justify-content: center;\n align-items: center;\n text-transform: lowercase;\n font-weight: 500;\n font-size: 14px;\n letter-spacing: 0.2px;\n}\n\n#wifi-loader .text::before,\n#wifi-loader .text::after {\n content: attr(data-text);\n}\n\n#wifi-loader .text::before {\n color: var(--text-color);\n}\n\n#wifi-loader .text::after {\n color: var(--front-color);\n animation: text-animation76 3.6s ease infinite;\n position: absolute;\n left: 0;\n}\n\n@keyframes circle-outer135 {\n 0% {\n stroke-dashoffset: 25;\n }\n\n 25% {\n stroke-dashoffset: 0;\n }\n\n 65% {\n stroke-dashoffset: 301;\n }\n\n 80% {\n stroke-dashoffset: 276;\n }\n\n 100% {\n stroke-dashoffset: 276;\n }\n}\n\n@keyframes circle-middle6123 {\n 0% {\n stroke-dashoffset: 17;\n }\n\n 25% {\n stroke-dashoffset: 0;\n }\n\n 65% {\n stroke-dashoffset: 204;\n }\n\n 80% {\n stroke-dashoffset: 187;\n }\n\n 100% {\n stroke-dashoffset: 187;\n }\n}\n\n@keyframes circle-inner162 {\n 0% {\n stroke-dashoffset: 9;\n }\n\n 25% {\n stroke-dashoffset: 0;\n }\n\n 65% {\n stroke-dashoffset: 106;\n }\n\n 80% {\n stroke-dashoffset: 97;\n }\n\n 100% {\n stroke-dashoffset: 97;\n }\n}\n\n@keyframes text-animation76 {\n 0% {\n clip-path: inset(0 100% 0 0);\n }\n\n 50% {\n clip-path: inset(0);\n }\n\n 100% {\n clip-path: inset(0 0 0 100%);\n }\n}\n"},{"created":"2024-01-22T16:54:28.000Z","isPrivate":0,"projectId":"9ae7c3","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":641,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 100px;\n height: 46px;\n position: relative;\n border-bottom: 5px solid #FFF;\n border-top: 5px solid #FFF;\n box-sizing: border-box;\n}\n\n.loader:before , .loader:after {\n content: \"\";\n position: absolute;\n left: 0;\n top: -20px;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: orange;\n border: 5px solid #FFF;\n box-sizing: border-box;\n animation: slide_391 1s infinite ease-in-out alternate;\n}\n\n.loader:after {\n top: 20px;\n animation-direction: alternate-reverse;\n}\n\n@keyframes slide_391 {\n 0% , 20% {\n transform: translateX(70px)\n }\n\n 80% , 100% {\n transform: translateX(-1px)\n }\n}\n "},{"created":"2024-01-22T16:54:28.000Z","isPrivate":0,"projectId":"c02264","snapshot":null,"tags":null,"title":"loader by alexruix","updated":"2024-01-22T16:54:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":656,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 8px;\n height: 40px;\n border-radius: 4px;\n display: block;\n background-color: currentColor;\n margin: 20px auto;\n position: relative;\n color: #f2f2f2;\n animation: animloader 0.3s 0.3s linear infinite alternate;\n}\n\n.loader::after,\n.loader::before {\n content: '';\n width: 8px;\n height: 40px;\n border-radius: 4px;\n background: currentColor;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 20px;\n animation: animloader 0.3s 0.45s linear infinite alternate;\n}\n\n.loader::before {\n left: -20px;\n animation-delay: 0s;\n}\n\n@keyframes animloader {\n 0% {\n height: 48px;\n }\n\n 100% {\n height: 4px;\n }\n}"},{"created":"2024-01-22T16:54:28.000Z","isPrivate":0,"projectId":"423337","snapshot":null,"tags":null,"title":"loader by satyamchaudharydev","updated":"2024-01-22T16:54:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":779,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner {\n --size-of-spinner: 50px;\n --spinner-border-width: 4px;\n --spinner-color: #08c18a;\n --circle-color: #8bc34a24;\n --speed-of-animation: 2s;\n --scale: 1.3;\n width: var(--size-of-spinner);\n height: var(--size-of-spinner);\n background: var(--circle-color);\n border-radius: 50%;\n position: relative;\n}\n\n.spinner::after {\n content: \"\";\n display: block;\n position: absolute;\n border-radius: 50%;\n inset: 0;\n border: var(--spinner-border-width) solid var(--spinner-color);\n border-left-color: transparent;\n border-right-color: transparent;\n animation: spinny var(--speed-of-animation) linear infinite;\n}\n\n@keyframes spinny {\n 0% {\n transform: rotate(0deg) scale(1)\n }\n\n 50% {\n transform: rotate(45deg) scale(var(--scale))\n }\n\n 100% {\n transform: rotate(360deg) scale(1)\n }\n}"},{"created":"2024-01-22T16:54:28.000Z","isPrivate":0,"projectId":"e3dab9","snapshot":null,"tags":null,"title":"loader by NlghtM4re","updated":"2024-01-22T16:54:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":84,"cssLen":1234,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n height: 120px;\n width: 120px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n}\n\n.loader div {\n height: 30px;\n width: 30px;\n position: absolute;\n animation: move 4s infinite;\n}\n\n.loader div:nth-child(1) {\n background-color: rgb(158, 136, 246);\n box-shadow: rgb(158, 136, 246) 0px 7px 29px 0px;\n transform: translate(-30px,-30px);\n animation-delay: -1s;\n}\n\n.loader div:nth-child(2) {\n background-color: rgb(97, 183, 253);\n box-shadow: rgb(97, 183, 253) 0px 7px 29px 0px;\n transform: translate(30px,-30px);\n animation-delay: -2s;\n}\n\n.loader div:nth-child(3) {\n background-color: rgb(95, 249, 175);\n box-shadow: rgb(95, 249, 175) 0px 7px 29px 0px;\n transform: translate(30px,30px);\n animation-delay: -3s;\n}\n\n.loader div:nth-child(4) {\n background-color: rgb(243, 171, 89);\n box-shadow: rgb(243, 171, 89) 0px 7px 29px 0px;\n transform: translate(-30px,30px);\n animation-delay: -4s;\n}\n\n@keyframes move {\n 0% {\n transform: translate(-30px, -30px);\n }\n\n 25% {\n transform: translate(30px, -30px);\n }\n\n 50% {\n transform: translate(30px, 30px);\n }\n\n 75% {\n transform: translate(-30px, 30px);\n }\n\n 100% {\n transform: translate(-30px, -30px);\n }\n}\n"},{"created":"2024-01-22T16:54:28.000Z","isPrivate":0,"projectId":"8e6c93","snapshot":null,"tags":null,"title":"loader by santhoshsj-dev","updated":"2024-01-22T16:54:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":2662,"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: 92px;\n height: 180px;\n border-radius: 8px;\n transform: translateY(-30px);\n background-color: #000;\n background-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%),\n linear-gradient(#111, #111);\n background-repeat: no-repeat;\n background-size: 10px 10px , 84px 162px;\n background-position: center 2px, 4px 8px;\n animation: lightUp 6s linear infinite alternate;\n}\n\n.loader:before {\n content: '';\n position: absolute;\n left: 50%;\n top: 190px;\n transform: translateX(-50%);\n width: 32px;\n height: 75px;\n background-image: linear-gradient(#fff, #fff),\n linear-gradient(#bbb, #bbb),\n linear-gradient(#fff, #fff);\n background-repeat: no-repeat;\n background-position: center 4px , center top, center 5px;\n background-size: 11px 11px , 7px 4px , 2px 100%;\n animation: plugin 6s linear infinite alternate;\n}\n\n.loader:after {\n content: '';\n width: 30px;\n height: 60px;\n background-image: linear-gradient(#888, #888),\n linear-gradient(to right, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,0.3) 50%,rgba(255,255,255,0.1) 100%),\n linear-gradient(#15ff00, #15ff00),\n linear-gradient(#888, #888);\n background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px;\n background-position: center 0 , center 6px , center bottom , center 4px;\n background-repeat: no-repeat;\n top: 50%;\n left: 50%;\n position: absolute;\n transform: translate(-50% , -50%);\n animation: charging 6s linear infinite alternate;\n}\n\n@keyframes charging {\n 0% , 25% {\n opacity: 0;\n background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px;\n }\n\n 26% , 75% {\n opacity: 1;\n background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px;\n }\n\n 50% , 100% {\n opacity: 1;\n background-size: 12px 4px, 30px 52px , 30px 56px , 30px 56px\n }\n}\n\n@keyframes lightUp {\n 0% , 25% {\n background-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%),\n linear-gradient(#111, #111);\n }\n\n 26% , 100% {\n background-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%),\n linear-gradient(#DDD, #DDD);\n }\n}\n\n@keyframes plugin {\n 0% , 25% {\n top: 190px;\n background-position: center 4px , center top, center 5px;\n }\n\n 26% , 100% {\n background-position: center 0 , center top, center 5px;\n top: 180px;\n }\n}\n "},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"353ef4","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":2662,"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: 92px;\n height: 180px;\n border-radius: 8px;\n transform: translateY(-30px);\n background-color: #000;\n background-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%),\n linear-gradient(#111, #111);\n background-repeat: no-repeat;\n background-size: 10px 10px , 84px 162px;\n background-position: center 2px, 4px 8px;\n animation: lightUp 6s linear infinite alternate;\n}\n\n.loader:before {\n content: '';\n position: absolute;\n left: 50%;\n top: 190px;\n transform: translateX(-50%);\n width: 32px;\n height: 75px;\n background-image: linear-gradient(#fff, #fff),\n linear-gradient(#bbb, #bbb),\n linear-gradient(#fff, #fff);\n background-repeat: no-repeat;\n background-position: center 4px , center top, center 5px;\n background-size: 11px 11px , 7px 4px , 2px 100%;\n animation: plugin 6s linear infinite alternate;\n}\n\n.loader:after {\n content: '';\n width: 30px;\n height: 60px;\n background-image: linear-gradient(#888, #888),\n linear-gradient(to right, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,0.3) 50%,rgba(255,255,255,0.1) 100%),\n linear-gradient(#15ff00, #15ff00),\n linear-gradient(#888, #888);\n background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px;\n background-position: center 0 , center 6px , center bottom , center 4px;\n background-repeat: no-repeat;\n top: 50%;\n left: 50%;\n position: absolute;\n transform: translate(-50% , -50%);\n animation: charging 6s linear infinite alternate;\n}\n\n@keyframes charging {\n 0% , 25% {\n opacity: 0;\n background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px;\n }\n\n 26% , 75% {\n opacity: 1;\n background-size: 12px 4px, 30px 52px , 30px 0px , 30px 56px;\n }\n\n 50% , 100% {\n opacity: 1;\n background-size: 12px 4px, 30px 52px , 30px 56px , 30px 56px\n }\n}\n\n@keyframes lightUp {\n 0% , 25% {\n background-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%),\n linear-gradient(#111, #111);\n }\n\n 26% , 100% {\n background-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 4%,rgba(81,81,81,1) 14%,rgba(44,44,44,1) 26%,rgba(2,2,2,1) 53%,rgba(2,2,2,1) 65%,rgba(2,2,2,0) 66%),\n linear-gradient(#DDD, #DDD);\n }\n}\n\n@keyframes plugin {\n 0% , 25% {\n top: 190px;\n background-position: center 4px , center top, center 5px;\n }\n\n 26% , 100% {\n background-position: center 0 , center top, center 5px;\n top: 180px;\n }\n}\n "},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"6af645","snapshot":null,"tags":null,"title":"loader by NlghtM4re","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1136,"cssLen":1233,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".container {\n position: absolute;\n top: 45%;\n left: 48%;\n}\n\n.square {\n width: 8px;\n height: 30px;\n background: rgb(71, 195, 248);\n border-radius: 10px;\n display: block;\n /*margin:10px;*/\n -webkit-animation: turn 2.5s ease infinite;\n animation: turn 2.5s ease infinite;\n box-shadow: rgb(71, 195, 248) 0px 1px 15px 0px;\n}\n\n.top {\n position: absolute;\n left: 40%;\n top: 50%;\n -webkit-transform: rotate(90deg);\n transform: rotate(90deg);\n}\n\n.bottom {\n position: absolute;\n left: 40%;\n top: 50%;\n -webkit-transform: rotate(-90deg);\n transform: rotate(-90deg);\n}\n\n.left {\n position: absolute;\n left: 40%;\n top: 50%;\n}\n\n.right {\n position: absolute;\n left: 40%;\n top: 50%;\n -webkit-transform: rotate(-180deg);\n transform: rotate(-180deg);\n}\n\n@-webkit-keyframes turn {\n 0% {\n transform: translateX(0) translateY(0) rotate(0);\n }\n\n 50% {\n transform: translateX(400%) translateY(100%) rotate(90deg);\n }\n\n 100% {\n transform: translateX(0) translateY(0) rotate(0);\n }\n}\n\n@keyframes turn {\n 0% {\n transform: translateX(0) translateY(0) rotate(0);\n }\n\n 70% {\n transform: translateX(400%) translateY(100%) rotate(90deg);\n }\n\n 100% {\n transform: translateX(0) translateY(0) rotate(0);\n }\n}"},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"ad7ebb","snapshot":null,"tags":null,"title":"loader by Praashoo7","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":173,"cssLen":1313,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader2 {\n display: flex;\n align-items: center;\n}\n\n.load21 {\n position: relative;\n content: \"\";\n height: 0.2em;\n width: 4em;\n border-radius: 5px;\n opacity: 0;\n background-color: white;\n box-shadow: 0 1px 7px rgba(0,0,0,0.3);\n animation: 2s flow_21 infinite;\n animation-delay: 0.2s;\n}\n\n.load22 {\n position: absolute;\n content: \"\";\n height: 0.2em;\n width: 4em;\n opacity: 0;\n border-radius: 5px;\n background-color: white;\n animation: 2s flow_21 infinite;\n animation-delay: 0.4s;\n}\n\n.load23 {\n position: absolute;\n content: \"\";\n height: 0.2em;\n width: 4em;\n opacity: 0;\n border-radius: 5px;\n background-color: white;\n animation: 2s flow_21 infinite;\n animation-delay: 0.6s;\n}\n\n.load24 {\n position: absolute;\n content: \"\";\n height: 0.2em;\n width: 4em;\n opacity: 0;\n border-radius: 5px;\n background-color: white;\n animation: 2s flow_21 infinite;\n animation-delay: 0.8s;\n}\n\n.load25 {\n position: absolute;\n content: \"\";\n height: 0.2em;\n width: 4em;\n opacity: 0;\n border-radius: 5px;\n background-color: white;\n animation: 2s flow_21 infinite;\n animation-delay: 1s;\n}\n\n@keyframes flow_21 {\n 0% {\n transform: translateY(1em);\n opacity: 1;\n }\n\n 50% {\n transform: translateY(-1em);\n opacity: 1;\n }\n\n 100% {\n transform: translateY(1em);\n opacity: 1;\n }\n}"},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"b91b35","snapshot":null,"tags":null,"title":"loader by satyamchaudharydev","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":722,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n --clr: #3498db;\n /* color of spining */\n width: 50px;\n height: 50px;\n position: relative;\n}\n\n.loader:before, .loader:after {\n content: \"\";\n position: absolute;\n top: -10px;\n left: -10px;\n width: 100%;\n height: 100%;\n border-radius: 100%;\n border: 10px solid transparent;\n border-top-color: var(--clr);\n}\n\n.loader:before {\n z-index: 100;\n animation: spin 1s infinite;\n}\n\n.loader:after {\n border: 10px solid #ccc;\n}\n\n@keyframes spin {\n 0% {\n -webkit-transform: rotate(0deg);\n -ms-transform: rotate(0deg);\n -o-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n\n 100% {\n -webkit-transform: rotate(360deg);\n -ms-transform: rotate(360deg);\n -o-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"a5dcde","snapshot":null,"tags":null,"title":"loader by Juanes200122","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":301,"cssLen":1879,"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(to bottom,\n hsl(0, 0%, 0%) 0%,\n hsl(0, 0%, 0%) 5.5%,\n hsl(0, 0%, 0%) 12.1%,\n hsl(0, 0%, 100%) 100%,\n hsl(0, 0%, 0%) 27.9%,\n hsl(0, 0%, 0%) 36.6%,\n hsl(0, 0%, 0%) 45.6%,\n hsl(0, 0%, 100%) 100%,\n hsl(0, 0%, 0%) 63.4%,\n hsl(0, 0%, 0%) 71.7%,\n hsl(0, 0%, 0%) 79.4%,\n hsl(0, 0%, 100%) 100%,\n hsl(0, 0%, 0%) 100%,\n hsl(0, 0%, 0%) 100%,\n hsl(0, 0%, 0%) 100%,\n hsl(0, 0%, 100%) 100%);\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(0, 0%, 0%) 19.6%;\n transform: translateZ(-90px);\n filter: blur(10px);\n box-shadow: 0 0 10px #323232,\n 0 0 20px hsl(0, 0%, 100%) 19.6%,\n 0 0 30px #323232,\n 0 0 40px hsl(0, 0%, 100%) 19.6%;\n}\n\n"},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"cbad5f","snapshot":null,"tags":null,"title":"loader by elijahgummer","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":276,"cssLen":1038,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".middle {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n position: absolute;\n}\n\n.bar {\n width: 10px;\n height: 70px;\n display: inline-block;\n transform-origin: bottom center;\n border-top-right-radius: 20px;\n border-top-left-radius: 20px;\n box-shadow: 5px 10px 20px inset rgba(255, 255, 0, 0.8); /* Yellow box shadow */\n animation: loader 1.2s linear infinite;\n}\n\n.bar1 {\n animation-delay: 0.1s;\n}\n\n.bar2 {\n animation-delay: 0.2s;\n}\n\n.bar3 {\n animation-delay: 0.3s;\n}\n\n.bar4 {\n animation-delay: 0.4s;\n}\n\n.bar5 {\n animation-delay: 0.5s;\n}\n\n.bar6 {\n animation-delay: 0.6s;\n}\n\n.bar7 {\n animation-delay: 0.7s;\n}\n\n.bar8 {\n animation-delay: 0.8s;\n}\n\n@keyframes loader {\n 0% {\n transform: scaleY(0.1);\n background: transparent;\n /* Change background to transparent */\n }\n\n 50% {\n transform: scaleY(1);\n background: linear-gradient(\n to bottom,\n #ffd700,\n #ffff00\n ); /* Gradient from gold to yellow */\n }\n\n 100% {\n transform: scaleY(0.1);\n background: transparent;\n }\n}\n"}]}},"actionData":null,"errors":null}