{"loaderData":{"0":null,"0-3":{"total":8178,"projects":[{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"8209ac","snapshot":null,"tags":null,"title":"loader by G4b413l","updated":"2024-01-22T16:54:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":593,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".ping {\n --uib-size: 50px;\n --uib-speed: 1s;\n --uib-color: #3950cf;\n position: relative;\n height: var(--uib-size);\n width: var(--uib-size);\n}\n\n.ping::before,\n.ping::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n border-radius: 50%;\n background-color: var(--uib-color);\n animation: pulse7132 var(--uib-speed) linear infinite;\n transform: scale(0);\n opacity: 0;\n}\n\n.ping::after {\n animation-delay: calc(var(--uib-speed) / -2);\n}\n\n@keyframes pulse7132 {\n 0% {\n transform: scale(0);\n opacity: 1;\n }\n\n 100% {\n transform: scale(1);\n opacity: 0;\n }\n}\n"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"116e0f","snapshot":null,"tags":null,"title":"loader by Juanes200122","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":475,"cssLen":13446,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n --duration: 3s;\n --primary: rgb(0, 204, 255);\n --primary-light: #00a6ff;\n --primary-rgba: rgba(204, 0, 255, 0.04);\n width: 200px;\n height: 320px;\n position: relative;\n transform-style: preserve-3d;\n}\n\n@media (max-width: 480px) {\n .loader {\n zoom: 0.44;\n }\n}\n\n.loader:before, .loader:after {\n --r: 20.5deg;\n content: \"\";\n width: 320px;\n height: 140px;\n position: absolute;\n right: 32%;\n bottom: -11px;\n /* change the back groung color on switching from light to dark mood */\n background: #e8e8e8;\n transform: translateZ(200px) rotate(var(--r));\n -webkit-animation: mask var(--duration) linear forwards infinite;\n animation: mask var(--duration) linear forwards infinite;\n}\n\n.loader:after {\n --r: -20.5deg;\n right: auto;\n left: 32%;\n}\n\n.loader .ground {\n position: absolute;\n left: -50px;\n bottom: -120px;\n transform-style: preserve-3d;\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n}\n\n.loader .ground div {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n width: 200px;\n height: 200px;\n background: var(--primary);\n background: linear-gradient(45deg, var(--primary) 0%, var(--primary) 50%, var(--primary-light) 50%, var(--primary-light) 100%);\n transform-style: preserve-3d;\n -webkit-animation: ground var(--duration) linear forwards infinite;\n animation: ground var(--duration) linear forwards infinite;\n}\n\n.loader .ground div:before, .loader .ground div:after {\n --rx: 90deg;\n --ry: 0deg;\n --x: 44px;\n --y: 162px;\n --z: -50px;\n content: \"\";\n width: 156px;\n height: 300px;\n opacity: 0;\n background: linear-gradient(var(--primary), var(--primary-rgba));\n position: absolute;\n transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));\n -webkit-animation: ground-shine var(--duration) linear forwards infinite;\n animation: ground-shine var(--duration) linear forwards infinite;\n}\n\n.loader .ground div:after {\n --rx: 90deg;\n --ry: 90deg;\n --x: 0;\n --y: 177px;\n --z: 150px;\n}\n\n.loader .box {\n --x: 0;\n --y: 0;\n position: absolute;\n -webkit-animation: var(--duration) linear forwards infinite;\n animation: var(--duration) linear forwards infinite;\n transform: translate(var(--x), var(--y));\n}\n\n.loader .box div {\n background-color: var(--primary);\n width: 48px;\n height: 48px;\n position: relative;\n transform-style: preserve-3d;\n -webkit-animation: var(--duration) ease forwards infinite;\n animation: var(--duration) ease forwards infinite;\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n}\n\n.loader .box div:before, .loader .box div:after {\n --rx: 90deg;\n --ry: 0deg;\n --z: 24px;\n --y: -24px;\n --x: 0;\n content: \"\";\n position: absolute;\n background-color: inherit;\n width: inherit;\n height: inherit;\n transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));\n filter: brightness(var(--b, 1.2));\n}\n\n.loader .box div:after {\n --rx: 0deg;\n --ry: 90deg;\n --x: 24px;\n --y: 0;\n --b: 1.4;\n}\n\n.loader .box.box0 {\n --x: -220px;\n --y: -120px;\n left: 58px;\n top: 108px;\n}\n\n.loader .box.box1 {\n --x: -260px;\n --y: 120px;\n left: 25px;\n top: 120px;\n}\n\n.loader .box.box2 {\n --x: 120px;\n --y: -190px;\n left: 58px;\n top: 64px;\n}\n\n.loader .box.box3 {\n --x: 280px;\n --y: -40px;\n left: 91px;\n top: 120px;\n}\n\n.loader .box.box4 {\n --x: 60px;\n --y: 200px;\n left: 58px;\n top: 132px;\n}\n\n.loader .box.box5 {\n --x: -220px;\n --y: -120px;\n left: 25px;\n top: 76px;\n}\n\n.loader .box.box6 {\n --x: -260px;\n --y: 120px;\n left: 91px;\n top: 76px;\n}\n\n.loader .box.box7 {\n --x: -240px;\n --y: 200px;\n left: 58px;\n top: 87px;\n}\n\n.loader .box0 {\n -webkit-animation-name: box-move0;\n animation-name: box-move0;\n}\n\n.loader .box0 div {\n -webkit-animation-name: box-scale0;\n animation-name: box-scale0;\n}\n\n.loader .box1 {\n -webkit-animation-name: box-move1;\n animation-name: box-move1;\n}\n\n.loader .box1 div {\n -webkit-animation-name: box-scale1;\n animation-name: box-scale1;\n}\n\n.loader .box2 {\n -webkit-animation-name: box-move2;\n animation-name: box-move2;\n}\n\n.loader .box2 div {\n -webkit-animation-name: box-scale2;\n animation-name: box-scale2;\n}\n\n.loader .box3 {\n -webkit-animation-name: box-move3;\n animation-name: box-move3;\n}\n\n.loader .box3 div {\n -webkit-animation-name: box-scale3;\n animation-name: box-scale3;\n}\n\n.loader .box4 {\n -webkit-animation-name: box-move4;\n animation-name: box-move4;\n}\n\n.loader .box4 div {\n -webkit-animation-name: box-scale4;\n animation-name: box-scale4;\n}\n\n.loader .box5 {\n -webkit-animation-name: box-move5;\n animation-name: box-move5;\n}\n\n.loader .box5 div {\n -webkit-animation-name: box-scale5;\n animation-name: box-scale5;\n}\n\n.loader .box6 {\n -webkit-animation-name: box-move6;\n animation-name: box-move6;\n}\n\n.loader .box6 div {\n -webkit-animation-name: box-scale6;\n animation-name: box-scale6;\n}\n\n.loader .box7 {\n -webkit-animation-name: box-move7;\n animation-name: box-move7;\n}\n\n.loader .box7 div {\n -webkit-animation-name: box-scale7;\n animation-name: box-scale7;\n}\n\n@-webkit-keyframes box-move0 {\n 12% {\n transform: translate(var(--x), var(--y));\n }\n\n 25%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move0 {\n 12% {\n transform: translate(var(--x), var(--y));\n }\n\n 25%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale0 {\n 6% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 14%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale0 {\n 6% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 14%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move1 {\n 16% {\n transform: translate(var(--x), var(--y));\n }\n\n 29%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move1 {\n 16% {\n transform: translate(var(--x), var(--y));\n }\n\n 29%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale1 {\n 10% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 18%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale1 {\n 10% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 18%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move2 {\n 20% {\n transform: translate(var(--x), var(--y));\n }\n\n 33%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move2 {\n 20% {\n transform: translate(var(--x), var(--y));\n }\n\n 33%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale2 {\n 14% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 22%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale2 {\n 14% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 22%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move3 {\n 24% {\n transform: translate(var(--x), var(--y));\n }\n\n 37%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move3 {\n 24% {\n transform: translate(var(--x), var(--y));\n }\n\n 37%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale3 {\n 18% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 26%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale3 {\n 18% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 26%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move4 {\n 28% {\n transform: translate(var(--x), var(--y));\n }\n\n 41%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move4 {\n 28% {\n transform: translate(var(--x), var(--y));\n }\n\n 41%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale4 {\n 22% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 30%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale4 {\n 22% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 30%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move5 {\n 32% {\n transform: translate(var(--x), var(--y));\n }\n\n 45%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move5 {\n 32% {\n transform: translate(var(--x), var(--y));\n }\n\n 45%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale5 {\n 26% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 34%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale5 {\n 26% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 34%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move6 {\n 36% {\n transform: translate(var(--x), var(--y));\n }\n\n 49%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move6 {\n 36% {\n transform: translate(var(--x), var(--y));\n }\n\n 49%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale6 {\n 30% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 38%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale6 {\n 30% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 38%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move7 {\n 40% {\n transform: translate(var(--x), var(--y));\n }\n\n 53%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move7 {\n 40% {\n transform: translate(var(--x), var(--y));\n }\n\n 53%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale7 {\n 34% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 42%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale7 {\n 34% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 42%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes ground {\n 0%, 65% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n\n 75%, 90% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);\n }\n\n 100% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n}\n\n@keyframes ground {\n 0%, 65% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n\n 75%, 90% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);\n }\n\n 100% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n}\n\n@-webkit-keyframes ground-shine {\n 0%, 70% {\n opacity: 0;\n }\n\n 75%, 87% {\n opacity: 0.2;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes ground-shine {\n 0%, 70% {\n opacity: 0;\n }\n\n 75%, 87% {\n opacity: 0.2;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n@-webkit-keyframes mask {\n 0%, 65% {\n opacity: 0;\n }\n\n 66%, 100% {\n opacity: 1;\n }\n}\n\n@keyframes mask {\n 0%, 65% {\n opacity: 0;\n }\n\n 66%, 100% {\n opacity: 1;\n }\n}\n "},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"abc35d","snapshot":null,"tags":null,"title":"loader by Juanes200122","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":475,"cssLen":13443,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n --duration: 3s;\n --primary: rgb(183, 0, 255);\n --primary-light: #d000ff;\n --primary-rgba: rgba(39, 94, 254, 0);\n width: 200px;\n height: 320px;\n position: relative;\n transform-style: preserve-3d;\n}\n\n@media (max-width: 480px) {\n .loader {\n zoom: 0.44;\n }\n}\n\n.loader:before, .loader:after {\n --r: 20.5deg;\n content: \"\";\n width: 320px;\n height: 140px;\n position: absolute;\n right: 32%;\n bottom: -11px;\n /* change the back groung color on switching from light to dark mood */\n background: #e8e8e8;\n transform: translateZ(200px) rotate(var(--r));\n -webkit-animation: mask var(--duration) linear forwards infinite;\n animation: mask var(--duration) linear forwards infinite;\n}\n\n.loader:after {\n --r: -20.5deg;\n right: auto;\n left: 32%;\n}\n\n.loader .ground {\n position: absolute;\n left: -50px;\n bottom: -120px;\n transform-style: preserve-3d;\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n}\n\n.loader .ground div {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n width: 200px;\n height: 200px;\n background: var(--primary);\n background: linear-gradient(45deg, var(--primary) 0%, var(--primary) 50%, var(--primary-light) 50%, var(--primary-light) 100%);\n transform-style: preserve-3d;\n -webkit-animation: ground var(--duration) linear forwards infinite;\n animation: ground var(--duration) linear forwards infinite;\n}\n\n.loader .ground div:before, .loader .ground div:after {\n --rx: 90deg;\n --ry: 0deg;\n --x: 44px;\n --y: 162px;\n --z: -50px;\n content: \"\";\n width: 156px;\n height: 300px;\n opacity: 0;\n background: linear-gradient(var(--primary), var(--primary-rgba));\n position: absolute;\n transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));\n -webkit-animation: ground-shine var(--duration) linear forwards infinite;\n animation: ground-shine var(--duration) linear forwards infinite;\n}\n\n.loader .ground div:after {\n --rx: 90deg;\n --ry: 90deg;\n --x: 0;\n --y: 177px;\n --z: 150px;\n}\n\n.loader .box {\n --x: 0;\n --y: 0;\n position: absolute;\n -webkit-animation: var(--duration) linear forwards infinite;\n animation: var(--duration) linear forwards infinite;\n transform: translate(var(--x), var(--y));\n}\n\n.loader .box div {\n background-color: var(--primary);\n width: 48px;\n height: 48px;\n position: relative;\n transform-style: preserve-3d;\n -webkit-animation: var(--duration) ease forwards infinite;\n animation: var(--duration) ease forwards infinite;\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n}\n\n.loader .box div:before, .loader .box div:after {\n --rx: 90deg;\n --ry: 0deg;\n --z: 24px;\n --y: -24px;\n --x: 0;\n content: \"\";\n position: absolute;\n background-color: inherit;\n width: inherit;\n height: inherit;\n transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));\n filter: brightness(var(--b, 1.2));\n}\n\n.loader .box div:after {\n --rx: 0deg;\n --ry: 90deg;\n --x: 24px;\n --y: 0;\n --b: 1.4;\n}\n\n.loader .box.box0 {\n --x: -220px;\n --y: -120px;\n left: 58px;\n top: 108px;\n}\n\n.loader .box.box1 {\n --x: -260px;\n --y: 120px;\n left: 25px;\n top: 120px;\n}\n\n.loader .box.box2 {\n --x: 120px;\n --y: -190px;\n left: 58px;\n top: 64px;\n}\n\n.loader .box.box3 {\n --x: 280px;\n --y: -40px;\n left: 91px;\n top: 120px;\n}\n\n.loader .box.box4 {\n --x: 60px;\n --y: 200px;\n left: 58px;\n top: 132px;\n}\n\n.loader .box.box5 {\n --x: -220px;\n --y: -120px;\n left: 25px;\n top: 76px;\n}\n\n.loader .box.box6 {\n --x: -260px;\n --y: 120px;\n left: 91px;\n top: 76px;\n}\n\n.loader .box.box7 {\n --x: -240px;\n --y: 200px;\n left: 58px;\n top: 87px;\n}\n\n.loader .box0 {\n -webkit-animation-name: box-move0;\n animation-name: box-move0;\n}\n\n.loader .box0 div {\n -webkit-animation-name: box-scale0;\n animation-name: box-scale0;\n}\n\n.loader .box1 {\n -webkit-animation-name: box-move1;\n animation-name: box-move1;\n}\n\n.loader .box1 div {\n -webkit-animation-name: box-scale1;\n animation-name: box-scale1;\n}\n\n.loader .box2 {\n -webkit-animation-name: box-move2;\n animation-name: box-move2;\n}\n\n.loader .box2 div {\n -webkit-animation-name: box-scale2;\n animation-name: box-scale2;\n}\n\n.loader .box3 {\n -webkit-animation-name: box-move3;\n animation-name: box-move3;\n}\n\n.loader .box3 div {\n -webkit-animation-name: box-scale3;\n animation-name: box-scale3;\n}\n\n.loader .box4 {\n -webkit-animation-name: box-move4;\n animation-name: box-move4;\n}\n\n.loader .box4 div {\n -webkit-animation-name: box-scale4;\n animation-name: box-scale4;\n}\n\n.loader .box5 {\n -webkit-animation-name: box-move5;\n animation-name: box-move5;\n}\n\n.loader .box5 div {\n -webkit-animation-name: box-scale5;\n animation-name: box-scale5;\n}\n\n.loader .box6 {\n -webkit-animation-name: box-move6;\n animation-name: box-move6;\n}\n\n.loader .box6 div {\n -webkit-animation-name: box-scale6;\n animation-name: box-scale6;\n}\n\n.loader .box7 {\n -webkit-animation-name: box-move7;\n animation-name: box-move7;\n}\n\n.loader .box7 div {\n -webkit-animation-name: box-scale7;\n animation-name: box-scale7;\n}\n\n@-webkit-keyframes box-move0 {\n 12% {\n transform: translate(var(--x), var(--y));\n }\n\n 25%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move0 {\n 12% {\n transform: translate(var(--x), var(--y));\n }\n\n 25%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale0 {\n 6% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 14%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale0 {\n 6% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 14%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move1 {\n 16% {\n transform: translate(var(--x), var(--y));\n }\n\n 29%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move1 {\n 16% {\n transform: translate(var(--x), var(--y));\n }\n\n 29%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale1 {\n 10% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 18%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale1 {\n 10% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 18%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move2 {\n 20% {\n transform: translate(var(--x), var(--y));\n }\n\n 33%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move2 {\n 20% {\n transform: translate(var(--x), var(--y));\n }\n\n 33%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale2 {\n 14% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 22%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale2 {\n 14% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 22%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move3 {\n 24% {\n transform: translate(var(--x), var(--y));\n }\n\n 37%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move3 {\n 24% {\n transform: translate(var(--x), var(--y));\n }\n\n 37%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale3 {\n 18% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 26%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale3 {\n 18% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 26%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move4 {\n 28% {\n transform: translate(var(--x), var(--y));\n }\n\n 41%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move4 {\n 28% {\n transform: translate(var(--x), var(--y));\n }\n\n 41%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale4 {\n 22% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 30%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale4 {\n 22% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 30%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move5 {\n 32% {\n transform: translate(var(--x), var(--y));\n }\n\n 45%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move5 {\n 32% {\n transform: translate(var(--x), var(--y));\n }\n\n 45%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale5 {\n 26% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 34%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale5 {\n 26% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 34%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move6 {\n 36% {\n transform: translate(var(--x), var(--y));\n }\n\n 49%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move6 {\n 36% {\n transform: translate(var(--x), var(--y));\n }\n\n 49%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale6 {\n 30% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 38%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale6 {\n 30% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 38%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes box-move7 {\n 40% {\n transform: translate(var(--x), var(--y));\n }\n\n 53%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@keyframes box-move7 {\n 40% {\n transform: translate(var(--x), var(--y));\n }\n\n 53%, 52% {\n transform: translate(0, 0);\n }\n\n 80% {\n transform: translate(0, -32px);\n }\n\n 90%, 100% {\n transform: translate(0, 188px);\n }\n}\n\n@-webkit-keyframes box-scale7 {\n 34% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 42%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@keyframes box-scale7 {\n 34% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);\n }\n\n 42%, 100% {\n transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);\n }\n}\n\n@-webkit-keyframes ground {\n 0%, 65% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n\n 75%, 90% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);\n }\n\n 100% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n}\n\n@keyframes ground {\n 0%, 65% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n\n 75%, 90% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);\n }\n\n 100% {\n transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);\n }\n}\n\n@-webkit-keyframes ground-shine {\n 0%, 70% {\n opacity: 0;\n }\n\n 75%, 87% {\n opacity: 0.2;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes ground-shine {\n 0%, 70% {\n opacity: 0;\n }\n\n 75%, 87% {\n opacity: 0.2;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n@-webkit-keyframes mask {\n 0%, 65% {\n opacity: 0;\n }\n\n 66%, 100% {\n opacity: 1;\n }\n}\n\n@keyframes mask {\n 0%, 65% {\n opacity: 0;\n }\n\n 66%, 100% {\n opacity: 1;\n }\n}\n "},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"088632","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":743,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".loader {\n width: 48px;\n height: 48px;\n display: block;\n margin: 15px auto;\n position: relative;\n color: #FFF;\n box-sizing: border-box;\n animation: rotation_19 1s linear infinite;\n}\n\n.loader::after,\n.loader::before {\n content: '';\n box-sizing: border-box;\n position: absolute;\n width: 24px;\n height: 24px;\n top: 0;\n background-color: #FFF;\n border-radius: 50%;\n animation: scale50 1s infinite ease-in-out;\n}\n\n.loader::before {\n top: auto;\n bottom: 0;\n background-color: #FF3D00;\n animation-delay: 0.5s;\n}\n\n@keyframes rotation_19 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes scale50 {\n 0%, 100% {\n transform: scale(0);\n }\n\n 50% {\n transform: scale(1);\n }\n} "},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"329cc8","snapshot":null,"tags":null,"title":"loader by RaspberryBee","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":275,"cssLen":414,"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}\n\n.loading svg polyline#front {\n fill: none;\n stroke: #FF0000;\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"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"f8987d","snapshot":null,"tags":null,"title":"loader by MrLegendGaming","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":647,"cssLen":4374,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":":root {\n --i: 0;\n}\n\n.loading-screen[move=\"1\"] {\n animation: disappear 2s ease-in-out forwards;\n}\n.loading-screen[move=\"2\"] {\n animation: reappear 2s ease-in-out forwards;\n}\n\n@keyframes disappear {\n 0% {\n opacity: 100%;\n transform: translateY(0%);\n }\n 50% {\n background-color: transparent;\n opacity: 0%;\n }\n 100% {\n transform: translateY(100%);\n }\n}\n\n@keyframes reappear {\n 0% {\n opacity: 0%;\n transform: translateY(100%);\n background-color: transparent;\n }\n 50% {\n opacity: 100%;\n }\n 100% {\n background-color: #d8e0d8;\n transform: translateY(0%);\n }\n}\n\n.solid {\n position: relative;\n width: 100px;\n height: 100px;\n animation: spin 16s infinite linear;\n transform-style: preserve-3d;\n}\n.solid .side {\n position: absolute;\n left: 0;\n bottom: 50%;\n border-bottom: 86.6px solid black;\n border-left: 50px solid transparent;\n border-right: 50px solid transparent;\n transform-origin: 50% 0%;\n}\n.solid .side:nth-child(1) {\n transform: translateY(-9.25px) rotateY(72deg) rotateX(52.62deg);\n border-bottom-color: rgba(134, 7, 147, 0.4);\n}\n.solid .side:nth-child(2) {\n transform: translateY(-9.25px) rotateY(144deg) rotateX(52.62deg);\n border-bottom-color: rgba(42, 160, 39, 0.4);\n}\n.solid .side:nth-child(3) {\n transform: translateY(-9.25px) rotateY(216deg) rotateX(52.62deg);\n border-bottom-color: rgba(209, 83, 84, 0.4);\n}\n.solid .side:nth-child(4) {\n transform: translateY(-9.25px) rotateY(288deg) rotateX(52.62deg);\n border-bottom-color: rgba(244, 202, 236, 0.4);\n}\n.solid .side:nth-child(5) {\n transform: translateY(-9.25px) rotateY(360deg) rotateX(52.62deg);\n border-bottom-color: rgba(73, 232, 200, 0.4);\n}\n.solid .side:nth-child(6) {\n transform: translateY(180.9px) rotateY(468deg) rotateX(127.38deg);\n border-bottom-color: rgba(105, 77, 3, 0.4);\n}\n.solid .side:nth-child(7) {\n transform: translateY(180.9px) rotateY(540deg) rotateX(127.38deg);\n border-bottom-color: rgba(255, 45, 71, 0.4);\n}\n.solid .side:nth-child(8) {\n transform: translateY(180.9px) rotateY(612deg) rotateX(127.38deg);\n border-bottom-color: rgba(177, 172, 3, 0.4);\n}\n.solid .side:nth-child(9) {\n transform: translateY(180.9px) rotateY(684deg) rotateX(127.38deg);\n border-bottom-color: rgba(175, 200, 228, 0.4);\n}\n.solid .side:nth-child(10) {\n transform: translateY(180.9px) rotateY(756deg) rotateX(127.38deg);\n border-bottom-color: rgba(187, 195, 141, 0.4);\n}\n.solid .side:nth-child(11) {\n transform: translateY(43.3px) rotateY(828deg) translateZ(85.05px)\n rotateX(-10.81deg);\n border-bottom-color: rgba(212, 249, 1, 0.4);\n}\n.solid .side:nth-child(12) {\n transform: translateY(43.3px) rotateY(900deg) translateZ(85.05px)\n rotateX(-10.81deg);\n border-bottom-color: rgba(85, 161, 43, 0.4);\n}\n.solid .side:nth-child(13) {\n transform: translateY(43.3px) rotateY(972deg) translateZ(85.05px)\n rotateX(-10.81deg);\n border-bottom-color: rgba(15, 209, 47, 0.4);\n}\n.solid .side:nth-child(14) {\n transform: translateY(43.3px) rotateY(1044deg) translateZ(85.05px)\n rotateX(-10.81deg);\n border-bottom-color: rgba(131, 69, 22, 0.4);\n}\n.solid .side:nth-child(15) {\n transform: translateY(43.3px) rotateY(1116deg) translateZ(85.05px)\n rotateX(-10.81deg);\n border-bottom-color: rgba(43, 13, 170, 0.4);\n}\n.solid .side:nth-child(16) {\n transform: translateY(128.35px) rotateY(1152deg) rotateZ(180deg)\n translateZ(85.05px) rotateX(-10.81deg);\n border-bottom-color: rgba(68, 85, 95, 0.4);\n}\n.solid .side:nth-child(17) {\n transform: translateY(128.35px) rotateY(1224deg) rotateZ(180deg)\n translateZ(85.05px) rotateX(-10.81deg);\n border-bottom-color: rgba(159, 76, 176, 0.4);\n}\n.solid .side:nth-child(18) {\n transform: translateY(128.35px) rotateY(1296deg) rotateZ(180deg)\n translateZ(85.05px) rotateX(-10.81deg);\n border-bottom-color: rgba(54, 95, 172, 0.4);\n}\n.solid .side:nth-child(19) {\n transform: translateY(128.35px) rotateY(1368deg) rotateZ(180deg)\n translateZ(85.05px) rotateX(-10.81deg);\n border-bottom-color: rgba(162, 92, 204, 0.4);\n}\n.solid .side:nth-child(20) {\n transform: translateY(128.35px) rotateY(1440deg) rotateZ(180deg)\n translateZ(85.05px) rotateX(-10.81deg);\n border-bottom-color: rgba(218, 1, 139, 0.4);\n}\n\n@keyframes spin {\n 0% {\n transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);\n }\n 100% {\n transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);\n }\n}\n"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"2231d4","snapshot":null,"tags":null,"title":"loader by Rodrypaladin","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":445,"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: 100px;\n background-color: orange;\n border-radius: 50%;\n box-shadow: -15px -15px 15px #ff6600, 15px -15px 15px #ff9100, 15px 15px 15px #ff5500, -15px 15px 15px #ffa600, -15px 0 15px #ff6600, 15px 0 15px #ffcc00;\n animation: rotate 1s infinite;\n transform: rotate(0) scale(0.8);\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(360deg) scale(0.8);\n }\n\n 50% {\n transform: rotate(0) scale(1.2);\n }\n}"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"6cbd96","snapshot":null,"tags":null,"title":"loader by bociKond","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":735,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n /* color of choise */\n --clr: #05A8AA;\n /* loading time of choice */\n --load-time: 2s;\n outline: 5px solid var(--clr);\n outline-offset: 5px;\n position: relative;\n overflow: hidden;\n border-radius: 5rem;\n /* width: 10rem; */\n /* height: 2rem; */\n padding: 1rem 5rem;\n /* use either padding or width + height*/\n /* I prefer the padding one */\n /* rotate: -90deg; */\n /* rotate if you want/need vertical loader */\n}\n\n.loader::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: var(--clr);\n z-index: 2;\n animation: loading var(--load-time) ease-in-out infinite;\n}\n\n@keyframes loading {\n 0% {\n width: 0%;\n }\n\n 100% {\n width: 100%;\n }\n}"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"62868c","snapshot":null,"tags":null,"title":"loader by umairmanzoor1143","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":908,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n width: 50px;\n aspect-ratio: 1.154;\n position: relative;\n background: conic-gradient(\n from 120deg at 50% 64%,\n #0000,\n #ff1919 1deg 120deg,\n #0000 121deg\n );\n animation: l27-0 1.5s infinite cubic-bezier(0.3, 1, 0, 1);\n}\n\n.loader:before,\n.loader:after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: inherit;\n transform-origin: 50% 66%;\n animation: l27-1 1.5s infinite;\n}\n\n.loader:after {\n --s: -1;\n}\n\n@keyframes l27-0 {\n 0%,\n 30% {\n transform: rotate(0);\n }\n\n 70% {\n transform: rotate(120deg);\n }\n\n 70.01%,\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes l27-1 {\n 0% {\n transform: rotate(calc(var(--s, 1) * 120deg)) translate(0);\n }\n\n 30%,\n 70% {\n transform: rotate(calc(var(--s, 1) * 120deg))\n translate(calc(var(--s, 1) * -5px), 10px);\n }\n\n 100% {\n transform: rotate(calc(var(--s, 1) * 120deg)) translate(0);\n }\n}\n"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"403824","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":820,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 16px;\n height: 16px;\n box-shadow: 0 30px, 0 -30px;\n border-radius: 4px;\n background: currentColor;\n display: block;\n position: relative;\n transform: translate(-150%, -20px);\n color: #FFF;\n box-sizing: border-box;\n animation: animloader 2s ease infinite;\n}\n\n.loader::after,\n.loader::before {\n content: '';\n box-sizing: border-box;\n width: 16px;\n height: 16px;\n box-shadow: 0 30px, 0 -30px;\n border-radius: 4px;\n background: currentColor;\n color: #FFF;\n position: absolute;\n left: 30px;\n top: 0;\n animation: animloader 2s 0.2s ease infinite;\n}\n\n.loader::before {\n animation-delay: 0.4s;\n left: 60px;\n}\n\n@keyframes animloader {\n 0% {\n top: 0;\n color: white;\n }\n\n 50% {\n top: 30px;\n color: rgba(255, 255, 255, 0.2);\n }\n\n 100% {\n top: 0;\n color: white;\n }\n}\n"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"afc7ad","snapshot":null,"tags":null,"title":"loader by Ratinax","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":146,"cssLen":1505,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".loader {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: not-allowed;\n scale: 0.7;\n}\n\n.central {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 10em;\n height: 10em;\n border-radius: 50%;\n box-shadow: 0.5em 1em 1em red,\n -0.5em 0.5em 1em lime,\n 0.5em -0.5em 1em purple,\n -0.5em -0.5em 1em yellow;\n}\n\n.external-shadow {\n width: 10em;\n height: 10em;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n box-shadow: 0.5em 0.5em 3em red,\n -0.5em 0.5em 3em lime,\n 0.5em -0.5em 3em purple,\n -0.5em -0.5em 3em yellow;\n z-index: 999;\n animation: rotate 3s linear infinite;\n background-color: #212121;\n}\n\n.intern {\n position: absolute;\n color: white;\n z-index: 9999;\n}\n\n.intern::before {\n content: \"100%\";\n animation: percent 2s ease-in-out infinite;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(180deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes percent {\n 0% {\n content: '0%';\n }\n\n 25% {\n content: '25%';\n }\n\n 33% {\n content: '33%';\n }\n\n 42% {\n content: '42%';\n }\n\n 51% {\n content: '51%';\n }\n\n 67% {\n content: '67%';\n }\n\n 74% {\n content: '74%';\n }\n\n 75% {\n content: '75%';\n }\n\n 86% {\n content: '86%';\n }\n\n 95% {\n content: '95%';\n }\n\n 98% {\n content: '98%';\n }\n\n 99% {\n content: '99%';\n }\n}"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"521f26","snapshot":null,"tags":null,"title":"loader by Smit-Prajapati","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":19611,"cssLen":10362,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".loader {\n width: 120px;\n aspect-ratio: 1;\n background: #bcbcbc;\n border-radius: 50%;\n position: relative;\n padding: 4px;\n box-shadow: 2px 2px 5px 0px rgb(255, 255, 255), -2px -2px 5px -2px rgb(0, 0, 0);\n}\n\n.loader .dots-container {\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n.loader .dots-container .dot-row {\n position: absolute;\n top: 50%;\n transform: translateY(-50%) rotate(0deg);\n transform-origin: right center;\n width: 50%;\n height: 5px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.loader .dots-container .dot-row > * {\n animation: blink 2s linear infinite;\n}\n\n.loader .dots-container .dot-row .dot {\n width: 4%;\n aspect-ratio: 1;\n background: #8b8b8b;\n border-radius: 50%;\n box-shadow: 0px 0px 5px 0px rgb(255, 255, 255);\n}\n\n.loader .dots-container .dot-row:nth-child(1) {\n transform: translateY(-50%) rotate(0deg);\n}\n\n.loader .dots-container .dot-row:nth-child(1) .dot {\n animation-delay: 0s;\n}\n\n.loader .dots-container .dot-row:nth-child(2) {\n transform: translateY(-50%) rotate(8deg);\n}\n\n.loader .dots-container .dot-row:nth-child(2) .dot {\n animation-delay: 0.0444444444s;\n}\n\n.loader .dots-container .dot-row:nth-child(3) {\n transform: translateY(-50%) rotate(16deg);\n}\n\n.loader .dots-container .dot-row:nth-child(3) .dot {\n animation-delay: 0.0888888889s;\n}\n\n.loader .dots-container .dot-row:nth-child(4) {\n transform: translateY(-50%) rotate(24deg);\n}\n\n.loader .dots-container .dot-row:nth-child(4) .dot {\n animation-delay: 0.1333333333s;\n}\n\n.loader .dots-container .dot-row:nth-child(5) {\n transform: translateY(-50%) rotate(32deg);\n}\n\n.loader .dots-container .dot-row:nth-child(5) .dot {\n animation-delay: 0.1777777778s;\n}\n\n.loader .dots-container .dot-row:nth-child(6) {\n transform: translateY(-50%) rotate(40deg);\n}\n\n.loader .dots-container .dot-row:nth-child(6) .dot {\n animation-delay: 0.2222222222s;\n}\n\n.loader .dots-container .dot-row:nth-child(7) {\n transform: translateY(-50%) rotate(48deg);\n}\n\n.loader .dots-container .dot-row:nth-child(7) .dot {\n animation-delay: 0.2666666667s;\n}\n\n.loader .dots-container .dot-row:nth-child(8) {\n transform: translateY(-50%) rotate(56deg);\n}\n\n.loader .dots-container .dot-row:nth-child(8) .dot {\n animation-delay: 0.3111111111s;\n}\n\n.loader .dots-container .dot-row:nth-child(9) {\n transform: translateY(-50%) rotate(64deg);\n}\n\n.loader .dots-container .dot-row:nth-child(9) .dot {\n animation-delay: 0.3555555556s;\n}\n\n.loader .dots-container .dot-row:nth-child(10) {\n transform: translateY(-50%) rotate(72deg);\n}\n\n.loader .dots-container .dot-row:nth-child(10) .dot {\n animation-delay: 0.4s;\n}\n\n.loader .dots-container .dot-row:nth-child(11) {\n transform: translateY(-50%) rotate(80deg);\n}\n\n.loader .dots-container .dot-row:nth-child(11) .dot {\n animation-delay: 0.4444444444s;\n}\n\n.loader .dots-container .dot-row:nth-child(12) {\n transform: translateY(-50%) rotate(88deg);\n}\n\n.loader .dots-container .dot-row:nth-child(12) .dot {\n animation-delay: 0.4888888889s;\n}\n\n.loader .dots-container .dot-row:nth-child(13) {\n transform: translateY(-50%) rotate(96deg);\n}\n\n.loader .dots-container .dot-row:nth-child(13) .dot {\n animation-delay: 0.5333333333s;\n}\n\n.loader .dots-container .dot-row:nth-child(14) {\n transform: translateY(-50%) rotate(104deg);\n}\n\n.loader .dots-container .dot-row:nth-child(14) .dot {\n animation-delay: 0.5777777778s;\n}\n\n.loader .dots-container .dot-row:nth-child(15) {\n transform: translateY(-50%) rotate(112deg);\n}\n\n.loader .dots-container .dot-row:nth-child(15) .dot {\n animation-delay: 0.6222222222s;\n}\n\n.loader .dots-container .dot-row:nth-child(16) {\n transform: translateY(-50%) rotate(120deg);\n}\n\n.loader .dots-container .dot-row:nth-child(16) .dot {\n animation-delay: 0.6666666667s;\n}\n\n.loader .dots-container .dot-row:nth-child(17) {\n transform: translateY(-50%) rotate(128deg);\n}\n\n.loader .dots-container .dot-row:nth-child(17) .dot {\n animation-delay: 0.7111111111s;\n}\n\n.loader .dots-container .dot-row:nth-child(18) {\n transform: translateY(-50%) rotate(136deg);\n}\n\n.loader .dots-container .dot-row:nth-child(18) .dot {\n animation-delay: 0.7555555556s;\n}\n\n.loader .dots-container .dot-row:nth-child(19) {\n transform: translateY(-50%) rotate(144deg);\n}\n\n.loader .dots-container .dot-row:nth-child(19) .dot {\n animation-delay: 0.8s;\n}\n\n.loader .dots-container .dot-row:nth-child(20) {\n transform: translateY(-50%) rotate(152deg);\n}\n\n.loader .dots-container .dot-row:nth-child(20) .dot {\n animation-delay: 0.8444444444s;\n}\n\n.loader .dots-container .dot-row:nth-child(21) {\n transform: translateY(-50%) rotate(160deg);\n}\n\n.loader .dots-container .dot-row:nth-child(21) .dot {\n animation-delay: 0.8888888889s;\n}\n\n.loader .dots-container .dot-row:nth-child(22) {\n transform: translateY(-50%) rotate(168deg);\n}\n\n.loader .dots-container .dot-row:nth-child(22) .dot {\n animation-delay: 0.9333333333s;\n}\n\n.loader .dots-container .dot-row:nth-child(23) {\n transform: translateY(-50%) rotate(176deg);\n}\n\n.loader .dots-container .dot-row:nth-child(23) .dot {\n animation-delay: 0.9777777778s;\n}\n\n.loader .dots-container .dot-row:nth-child(24) {\n transform: translateY(-50%) rotate(184deg);\n}\n\n.loader .dots-container .dot-row:nth-child(24) .dot {\n animation-delay: 1.0222222222s;\n}\n\n.loader .dots-container .dot-row:nth-child(25) {\n transform: translateY(-50%) rotate(192deg);\n}\n\n.loader .dots-container .dot-row:nth-child(25) .dot {\n animation-delay: 1.0666666667s;\n}\n\n.loader .dots-container .dot-row:nth-child(26) {\n transform: translateY(-50%) rotate(200deg);\n}\n\n.loader .dots-container .dot-row:nth-child(26) .dot {\n animation-delay: 1.1111111111s;\n}\n\n.loader .dots-container .dot-row:nth-child(27) {\n transform: translateY(-50%) rotate(208deg);\n}\n\n.loader .dots-container .dot-row:nth-child(27) .dot {\n animation-delay: 1.1555555556s;\n}\n\n.loader .dots-container .dot-row:nth-child(28) {\n transform: translateY(-50%) rotate(216deg);\n}\n\n.loader .dots-container .dot-row:nth-child(28) .dot {\n animation-delay: 1.2s;\n}\n\n.loader .dots-container .dot-row:nth-child(29) {\n transform: translateY(-50%) rotate(224deg);\n}\n\n.loader .dots-container .dot-row:nth-child(29) .dot {\n animation-delay: 1.2444444444s;\n}\n\n.loader .dots-container .dot-row:nth-child(30) {\n transform: translateY(-50%) rotate(232deg);\n}\n\n.loader .dots-container .dot-row:nth-child(30) .dot {\n animation-delay: 1.2888888889s;\n}\n\n.loader .dots-container .dot-row:nth-child(31) {\n transform: translateY(-50%) rotate(240deg);\n}\n\n.loader .dots-container .dot-row:nth-child(31) .dot {\n animation-delay: 1.3333333333s;\n}\n\n.loader .dots-container .dot-row:nth-child(32) {\n transform: translateY(-50%) rotate(248deg);\n}\n\n.loader .dots-container .dot-row:nth-child(32) .dot {\n animation-delay: 1.3777777778s;\n}\n\n.loader .dots-container .dot-row:nth-child(33) {\n transform: translateY(-50%) rotate(256deg);\n}\n\n.loader .dots-container .dot-row:nth-child(33) .dot {\n animation-delay: 1.4222222222s;\n}\n\n.loader .dots-container .dot-row:nth-child(34) {\n transform: translateY(-50%) rotate(264deg);\n}\n\n.loader .dots-container .dot-row:nth-child(34) .dot {\n animation-delay: 1.4666666667s;\n}\n\n.loader .dots-container .dot-row:nth-child(35) {\n transform: translateY(-50%) rotate(272deg);\n}\n\n.loader .dots-container .dot-row:nth-child(35) .dot {\n animation-delay: 1.5111111111s;\n}\n\n.loader .dots-container .dot-row:nth-child(36) {\n transform: translateY(-50%) rotate(280deg);\n}\n\n.loader .dots-container .dot-row:nth-child(36) .dot {\n animation-delay: 1.5555555556s;\n}\n\n.loader .dots-container .dot-row:nth-child(37) {\n transform: translateY(-50%) rotate(288deg);\n}\n\n.loader .dots-container .dot-row:nth-child(37) .dot {\n animation-delay: 1.6s;\n}\n\n.loader .dots-container .dot-row:nth-child(38) {\n transform: translateY(-50%) rotate(296deg);\n}\n\n.loader .dots-container .dot-row:nth-child(38) .dot {\n animation-delay: 1.6444444444s;\n}\n\n.loader .dots-container .dot-row:nth-child(39) {\n transform: translateY(-50%) rotate(304deg);\n}\n\n.loader .dots-container .dot-row:nth-child(39) .dot {\n animation-delay: 1.6888888889s;\n}\n\n.loader .dots-container .dot-row:nth-child(40) {\n transform: translateY(-50%) rotate(312deg);\n}\n\n.loader .dots-container .dot-row:nth-child(40) .dot {\n animation-delay: 1.7333333333s;\n}\n\n.loader .dots-container .dot-row:nth-child(41) {\n transform: translateY(-50%) rotate(320deg);\n}\n\n.loader .dots-container .dot-row:nth-child(41) .dot {\n animation-delay: 1.7777777778s;\n}\n\n.loader .dots-container .dot-row:nth-child(42) {\n transform: translateY(-50%) rotate(328deg);\n}\n\n.loader .dots-container .dot-row:nth-child(42) .dot {\n animation-delay: 1.8222222222s;\n}\n\n.loader .dots-container .dot-row:nth-child(43) {\n transform: translateY(-50%) rotate(336deg);\n}\n\n.loader .dots-container .dot-row:nth-child(43) .dot {\n animation-delay: 1.8666666667s;\n}\n\n.loader .dots-container .dot-row:nth-child(44) {\n transform: translateY(-50%) rotate(344deg);\n}\n\n.loader .dots-container .dot-row:nth-child(44) .dot {\n animation-delay: 1.9111111111s;\n}\n\n.loader .dots-container .dot-row:nth-child(45) {\n transform: translateY(-50%) rotate(352deg);\n}\n\n.loader .dots-container .dot-row:nth-child(45) .dot {\n animation-delay: 1.9555555556s;\n}\n\n.loader .center-div {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 36%;\n aspect-ratio: 1;\n border-radius: 50%;\n display: grid;\n place-content: center;\n background: linear-gradient(135deg, rgb(130, 130, 130) 0%, rgb(73, 73, 73) 100%);\n box-shadow: rgba(39, 39, 39, 0.3) 8px 8px 5px -5px, rgba(39, 39, 39, 0.5) 8px 8px 10px 0px;\n border-right: 1px solid rgb(63, 63, 63);\n border-bottom: 1px solid rgb(63, 63, 63);\n}\n\n.loader .center-div .svg {\n width: 15px;\n aspect-ratio: 1;\n fill: rgba(0, 0, 0, 0.293);\n}\n\n.loader .glass {\n position: absolute;\n height: 50%;\n width: 80%;\n top: 0;\n left: 50%;\n transform: translateX(-50%) rotate(-45deg);\n transform-origin: bottom center;\n background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.879) 100%);\n border-radius: inherit;\n border-radius: 51% 49% 51% 49%/59% 60% 40% 41%;\n}\n\n@keyframes blink {\n 0% {\n background: white;\n box-shadow: 0px 0px 2px rgb(255, 255, 255);\n }\n\n 20% {\n background: white;\n }\n\n 70% {\n background: grey;\n box-shadow: 0px 0px 2px rgba(255, 255, 255, 0);\n }\n}"}]}},"actionData":null,"errors":null}