Layer 1

{"loaderData":{"0":null,"0-3":{"total":7313,"projects":[{"created":"2024-01-22T16:54:34.000Z","isPrivate":0,"projectId":"0da9f1","snapshot":null,"tags":null,"title":"loader by VashonG","updated":"2024-01-22T16:54:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3237,"cssLen":7628,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n MacBook Air\n

\n Layer 1\n

\n","css":".macbook {\n width: 150px;\n height: 96px;\n position: absolute;\n left: 50%;\n top: 50%;\n margin: -85px 0 0 -78px;\n perspective: 500px;\n}\n\n.shadow {\n position: absolute;\n width: 60px;\n height: 0px;\n left: 40px;\n top: 160px;\n transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);\n box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);\n animation: shadow infinite 7s ease;\n}\n\n.inner {\n z-index: 20;\n position: absolute;\n width: 150px;\n height: 96px;\n left: 0;\n top: 0;\n transform-style: preserve-3d;\n transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);\n animation: rotate infinite 7s ease;\n}\n\n.screen {\n width: 150px;\n height: 96px;\n position: absolute;\n left: 0;\n bottom: 0;\n border-radius: 7px;\n background: #ddd;\n transform-style: preserve-3d;\n transform-origin: 50% 93px;\n transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);\n animation: lid-screen infinite 7s ease;\n background-image: linear-gradient(45deg, rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 100%);\n background-position: left bottom;\n background-size: 300px 300px;\n box-shadow: inset 0 3px 7px rgba(255,255,255,0.5);\n}\n\n.screen .logo {\n position: absolute;\n width: 20px;\n height: 24px;\n left: 50%;\n top: 50%;\n margin: -12px 0 0 -10px;\n transform: rotateY(180deg) translateZ(0.1px);\n}\n\n.screen .face-one {\n width: 150px;\n height: 96px;\n position: absolute;\n left: 0;\n bottom: 0;\n border-radius: 7px;\n background: #d3d3d3;\n transform: translateZ(2px);\n background-image: linear-gradient(45deg,rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n}\n\n.screen .face-one .camera {\n width: 3px;\n height: 3px;\n border-radius: 100%;\n background: #000;\n position: absolute;\n left: 50%;\n top: 4px;\n margin-left: -1.5px;\n}\n\n.screen .face-one .display {\n width: 130px;\n height: 74px;\n margin: 10px;\n background-color: #000;\n background-size: 100% 100%;\n border-radius: 1px;\n position: relative;\n box-shadow: inset 0 0 2px rgba(0,0,0,1);\n}\n\n.screen .face-one .display .shade {\n position: absolute;\n left: 0;\n top: 0;\n width: 130px;\n height: 74px;\n background: linear-gradient(-135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 47%,rgba(255,255,255,0) 48%);\n animation: screen-shade infinite 7s ease;\n background-size: 300px 200px;\n background-position: 0px 0px;\n}\n\n.screen .face-one span {\n position: absolute;\n top: 85px;\n left: 57px;\n font-size: 6px;\n color: #666\n}\n\n.macbody {\n width: 150px;\n height: 96px;\n position: absolute;\n left: 0;\n bottom: 0;\n border-radius: 7px;\n background: #cbcbcb;\n transform-style: preserve-3d;\n transform-origin: 50% bottom;\n transform: rotateX(-90deg);\n animation: lid-macbody infinite 7s ease;\n background-image: linear-gradient(45deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n}\n\n.macbody .face-one {\n width: 150px;\n height: 96px;\n position: absolute;\n left: 0;\n bottom: 0;\n border-radius: 7px;\n transform-style: preserve-3d;\n background: #dfdfdf;\n animation: lid-keyboard-area infinite 7s ease;\n transform: translateZ(-2px);\n background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n}\n\n.macbody .touchpad {\n width: 40px;\n height: 31px;\n position: absolute;\n left: 50%;\n top: 50%;\n border-radius: 4px;\n margin: -44px 0 0 -18px;\n background: #cdcdcd;\n background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n box-shadow: inset 0 0 3px #888;\n}\n\n.macbody .keyboard {\n width: 130px;\n height: 45px;\n position: absolute;\n left: 7px;\n top: 41px;\n border-radius: 4px;\n transform-style: preserve-3d;\n background: #cdcdcd;\n background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n box-shadow: inset 0 0 3px #777;\n padding: 0 0 0 2px;\n}\n\n.keyboard .key {\n width: 6px;\n height: 6px;\n background: #444;\n float: left;\n margin: 1px;\n transform: translateZ(-2px);\n border-radius: 2px;\n box-shadow: 0 -2px 0 #222;\n animation: keys infinite 7s ease;\n}\n\n.key.space {\n width: 45px;\n}\n\n.key.f {\n height: 3px;\n}\n\n.macbody .pad {\n width: 5px;\n height: 5px;\n background: #333;\n border-radius: 100%;\n position: absolute;\n}\n\n.pad.one {\n left: 20px;\n top: 20px;\n}\n\n.pad.two {\n right: 20px;\n top: 20px;\n}\n\n.pad.three {\n right: 20px;\n bottom: 20px;\n}\n\n.pad.four {\n left: 20px;\n bottom: 20px;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);\n }\n\n 5% {\n transform: rotateX(-20deg) rotateY(-20deg) rotateZ(0deg);\n }\n\n 20% {\n transform: rotateX(30deg) rotateY(200deg) rotateZ(0deg);\n }\n\n 25% {\n transform: rotateX(-60deg) rotateY(150deg) rotateZ(0deg);\n }\n\n 60% {\n transform: rotateX(-20deg) rotateY(130deg) rotateZ(0deg);\n }\n\n 65% {\n transform: rotateX(-20deg) rotateY(120deg) rotateZ(0deg);\n }\n\n 80% {\n transform: rotateX(-20deg) rotateY(375deg) rotateZ(0deg);\n }\n\n 85% {\n transform: rotateX(-20deg) rotateY(357deg) rotateZ(0deg);\n }\n\n 87% {\n transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);\n }\n\n 100% {\n transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);\n }\n}\n\n@keyframes lid-screen {\n 0% {\n transform: rotateX(0deg);\n background-position: left bottom;\n }\n\n 5% {\n transform: rotateX(50deg);\n background-position: left bottom;\n }\n\n 20% {\n transform: rotateX(-90deg);\n background-position: -150px top;\n }\n\n 25% {\n transform: rotateX(15deg);\n background-position: left bottom;\n }\n\n 30% {\n transform: rotateX(-5deg);\n background-position: right top;\n }\n\n 38% {\n transform: rotateX(5deg);\n background-position: right top;\n }\n\n 48% {\n transform: rotateX(0deg);\n background-position: right top;\n }\n\n 90% {\n transform: rotateX(0deg);\n background-position: right top;\n }\n\n 100% {\n transform: rotateX(0deg);\n background-position: right center;\n }\n}\n\n@keyframes lid-macbody {\n 0% {\n transform: rotateX(-90deg);\n }\n\n 50% {\n transform: rotateX(-90deg);\n }\n\n 100% {\n transform: rotateX(-90deg);\n }\n}\n\n@keyframes lid-keyboard-area {\n 0% {\n background-color: #dfdfdf;\n }\n\n 50% {\n background-color: #bbb;\n }\n\n 100% {\n background-color: #dfdfdf;\n }\n}\n\n@keyframes screen-shade {\n 0% {\n background-position: -20px 0px;\n }\n\n 5% {\n background-position: -40px 0px;\n }\n\n 20% {\n background-position: 200px 0;\n }\n\n 50% {\n background-position: -200px 0;\n }\n\n 80% {\n background-position: 0px 0px;\n }\n\n 85% {\n background-position: -30px 0;\n }\n\n 90% {\n background-position: -20px 0;\n }\n\n 100% {\n background-position: -20px 0px;\n }\n}\n\n@keyframes keys {\n 0% {\n box-shadow: 0 -2px 0 #222;\n }\n\n 5% {\n box-shadow: 1 -1px 0 #222;\n }\n\n 20% {\n box-shadow: -1px 1px 0 #222;\n }\n\n 25% {\n box-shadow: -1px 1px 0 #222;\n }\n\n 60% {\n box-shadow: -1px 1px 0 #222;\n }\n\n 80% {\n box-shadow: 0 -2px 0 #222;\n }\n\n 85% {\n box-shadow: 0 -2px 0 #222;\n }\n\n 87% {\n box-shadow: 0 -2px 0 #222;\n }\n\n 100% {\n box-shadow: 0 -2px 0 #222;\n }\n}\n\n@keyframes shadow {\n 0% {\n transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);\n box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);\n }\n\n 5% {\n transform: rotateX(80deg) rotateY(10deg) rotateZ(0deg);\n box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);\n }\n\n 20% {\n transform: rotateX(30deg) rotateY(-20deg) rotateZ(-20deg);\n box-shadow: 0 0 50px 30px rgba(0,0,0,0.3);\n }\n\n 25% {\n transform: rotateX(80deg) rotateY(-20deg) rotateZ(50deg);\n box-shadow: 0 0 35px 15px rgba(0,0,0,0.1);\n }\n\n 60% {\n transform: rotateX(80deg) rotateY(0deg) rotateZ(-50deg) translateX(30px);\n box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);\n }\n\n 100% {\n box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);\n }\n}\n"},{"created":"2024-01-22T16:54:34.000Z","isPrivate":0,"projectId":"f4ca85","snapshot":null,"tags":null,"title":"loader by EddyBel","updated":"2024-01-22T16:54:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":212,"cssLen":994,"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 display: flex;\n gap: 0.3em;\n}\n\n.loader::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 2em;\n filter: blur(45px);\n background-color: #e299ff;\n background-image: radial-gradient(at 52% 57%, hsla(11,83%,72%,1) 0px, transparent 50%),\n radial-gradient(at 37% 57%, hsla(175,78%,66%,1) 0px, transparent 50%);\n}\n\n.loader__circle {\n --size__loader: 0.6em;\n width: var(--size__loader);\n height: var(--size__loader);\n border-radius: 50%;\n animation: loader__circle__jumping 2s infinite;\n background-color: #b499ff;\n}\n\n.loader__circle:nth-child(2n) {\n animation-delay: 300ms;\n background-color: #e499ff;\n}\n\n.loader__circle:nth-child(3n) {\n animation-delay: 600ms;\n}\n\n@keyframes loader__circle__jumping {\n 0%, 100% {\n transform: translateY(0px);\n }\n\n 25% {\n transform: translateY(-15px) scale(0.5);\n }\n\n 50% {\n transform: translateY(0px);\n }\n\n 75% {\n transform: translateY(5px) scale(0.9);\n }\n}"},{"created":"2024-01-22T16:54:34.000Z","isPrivate":0,"projectId":"d37f40","snapshot":null,"tags":null,"title":"loader by exyreams","updated":"2024-01-22T16:54:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":1017,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner {\n position: relative;\n width: 80px;\n /* Adjust the width accordingly */\n height: 16px;\n /* Keep the height the same */\n}\n\n.spinner div {\n position: absolute;\n width: 16px;\n height: 16px;\n background-color: #004dff;\n border-radius: 50%;\n animation: spinner-4t3wzl 2s infinite linear;\n}\n\n.spinner div:nth-child(1) {\n left: 0;\n animation-delay: 0.15s;\n background-color: rgba(0, 77, 255, 0.9);\n}\n\n.spinner div:nth-child(2) {\n left: 25%;\n animation-delay: 0.3s;\n background-color: rgba(0, 77, 255, 0.8);\n}\n\n.spinner div:nth-child(3) {\n left: 50%;\n animation-delay: 0.45s;\n background-color: rgba(0, 77, 255, 0.7);\n}\n\n.spinner div:nth-child(4) {\n left: 75%;\n animation-delay: 0.6s;\n background-color: rgba(0, 77, 255, 0.6);\n}\n\n.spinner div:nth-child(5) {\n left: 100%;\n animation-delay: 0.75s;\n background-color: rgba(0, 77, 255, 0.5);\n}\n\n@keyframes spinner-4t3wzl {\n 0% {\n transform: rotate(0deg) translateX(-100%);\n }\n\n 100% {\n transform: rotate(360deg) translateX(-100%);\n }\n}"},{"created":"2024-01-22T16:54:34.000Z","isPrivate":0,"projectId":"01cc56","snapshot":null,"tags":null,"title":"loader by RafaM-dev","updated":"2024-01-22T16:54:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":452,"cssLen":2671,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n\n

\n \n

\n\n

\n \n

","css":".loader {\n display: flex;\n justify-content: center;\n align-items: center;\n /* Add these properties to position the loader properly */\n position: relative;\n width: 90px;\n height: 103px;\n /* Adjust the height to accommodate the \"h4\" span */\n}\n\n.loader div {\n position: absolute;\n width: 50px;\n height: 31px;\n}\n\n.rot {\n transform: rotate(150deg);\n}\n\n.rot2 {\n transform: rotate(20deg);\n}\n\n.loader div:nth-of-type(2) {\n transform: rotate(60deg);\n}\n\n.loader div:nth-of-type(3) {\n transform: rotate(-60deg);\n}\n\n.loader div div {\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n.loader div div span {\n position: absolute;\n width: 4px;\n height: 0%;\n background: #053146;\n z-index: 999999;\n}\n\n.h1 {\n left: 0;\n animation: load1 3.2s ease infinite;\n}\n\n.h2 {\n right: 0;\n animation: load2 3.2s ease 0.4s infinite;\n}\n\n.h3 {\n right: 0;\n animation: load3 3.2s ease 0.8s infinite;\n}\n\n.h4 {\n top: 10px;\n left: 23px;\n animation: load4 3.2s ease 1s infinite;\n transform: rotate(90deg);\n}\n\n.h5 {\n bottom: 0;\n animation: load5 3.2s ease 1.2s infinite;\n}\n\n.h6 {\n left: 0;\n animation: load6 3.2s ease 1.3s infinite;\n}\n\n@keyframes load1 {\n 0% {\n bottom: 0;\n height: 0;\n }\n\n 6.944444444% {\n bottom: 0;\n height: 100%;\n }\n\n 50% {\n top: 0;\n height: 100%;\n }\n\n 59.944444433% {\n top: 0;\n height: 0;\n }\n /* 91.6666667%{top:0;height:0%;} */\n}\n\n@keyframes load2 {\n 0% {\n top: 0;\n height: 0;\n }\n\n 6.944444444% {\n top: 0;\n height: 100%;\n }\n\n 50% {\n bottom: 0;\n height: 100%;\n }\n\n 59.944444433% {\n bottom: 0;\n height: 0;\n }\n /* 91.6666667%{bottom:0;height:0%} */\n}\n\n@keyframes load3 {\n 0% {\n top: 0;\n height: 0;\n }\n\n 6.944444444% {\n top: 0;\n height: 100%;\n }\n\n 50% {\n bottom: 0;\n height: 100%;\n }\n\n 59.94444443% {\n bottom: 0;\n height: 0;\n }\n /* 91.6666667%{bottom:0;height:0%;} */\n}\n\n@keyframes load4 {\n 0% {\n top: 37px;\n left: 23px;\n height: 134%;\n }\n\n 6.944444444% {\n top: 10px;\n height: 134%;\n }\n\n 50% {\n bottom: 10px;\n height: 134%;\n }\n\n 59.94444443% {\n bottom: 0;\n height: 0;\n }\n /* 91.6666667%{bottom:0;height:0%;} */\n}\n\n@keyframes load5 {\n 0% {\n bottom: 0;\n height: 0;\n }\n\n 6.944444444% {\n bottom: 0;\n height: 100%;\n }\n\n 50% {\n top: 0;\n height: 100%;\n }\n\n 59.94444443% {\n top: 0;\n height: 0;\n }\n /* 91.6666667%{top:0;height:0%;} */\n}\n\n@keyframes load6 {\n 0% {\n bottom: 0;\n height: 0;\n }\n\n 6.944444444% {\n bottom: 0;\n height: 100%;\n }\n\n 50% {\n top: 0;\n height: 100%;\n }\n\n 59.94444443% {\n top: 0;\n height: 0;\n }\n /* 91.6666667%{top:0;height:0%;} */\n}"},{"created":"2024-01-22T16:54:34.000Z","isPrivate":0,"projectId":"8fc3e6","snapshot":null,"tags":null,"title":"loader by K2-dev21","updated":"2024-01-22T16:54:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":68,"cssLen":508,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner {\n background-image: linear-gradient(#acb6e5 35%, #86fde8);\n width: 100px;\n height: 100px;\n animation: spinning21 1.7s linear infinite;\n text-align: center;\n border-radius: 50px;\n filter: blur(1px);\n box-shadow: 0px -5px 20px 0px rgb(186, 66, 255),\n 0px 5px 20px 0px rgb(0, 225, 255);\n}\n\n.Spinner {\n background-color: rgb(36, 36, 36);\n width: 100px;\n height: 100px;\n border-radius: 50px;\n filter: blur(10px);\n}\n\n@keyframes spinning21 {\n to {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:34.000Z","isPrivate":0,"projectId":"7fc9d5","snapshot":null,"tags":null,"title":"loader by Satwinder04","updated":"2024-01-22T16:54:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":366,"cssLen":1262,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader-container {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.loader {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n transform: rotate(45deg);\n}\n\n.loader-inner {\n position: absolute;\n width: 0.5rem;\n height: 0.5rem;\n border-radius: 50%;\n background-color: #db3434;\n animation: loader_05101 1.2s linear infinite;\n}\n\n.loader-inner:nth-child(1) {\n top: 0;\n left: 0;\n animation-delay: 0s;\n}\n\n.loader-inner:nth-child(2) {\n top: 0;\n left: 1.5rem;\n animation-delay: 0.1s;\n}\n\n.loader-inner:nth-child(3) {\n top: 0;\n left: 3rem;\n animation-delay: 0.2s;\n}\n\n.loader-inner:nth-child(4) {\n top: 1.5rem;\n left: 0;\n animation-delay: 0.3s;\n}\n\n.loader-inner:nth-child(5) {\n top: 1.5rem;\n left: 1.5rem;\n animation-delay: 0.4s;\n}\n\n.loader-inner:nth-child(6) {\n top: 1.5rem;\n left: 3rem;\n animation-delay: 0.5s;\n}\n\n.loader-inner:nth-child(7) {\n top: 3rem;\n left: 0;\n animation-delay: 0.6s;\n}\n\n.loader-inner:nth-child(8) {\n top: 3rem;\n left: 1.5rem;\n animation-delay: 0.7s;\n}\n\n.loader-inner:nth-child(9) {\n top: 3rem;\n left: 3rem;\n animation-delay: 0.8s;\n}\n\n@keyframes loader_05101 {\n 0% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n}\n"},{"created":"2024-01-22T16:54:34.000Z","isPrivate":0,"projectId":"92158f","snapshot":null,"tags":null,"title":"loader by SteveBloX","updated":"2024-01-22T16:54:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":136,"cssLen":587,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n width: 200px;\n height: 200px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.loader_cube {\n position: absolute;\n width: 80%;\n height: 80%;\n border-radius: 10px;\n}\n\n.loader_cube--glowing {\n z-index: 2;\n background-color: rgba(255, 255, 255, 0.2);\n border: 2px solid rgba(255, 255, 255, 0.3);\n}\n\n.loader_cube--color {\n z-index: 1;\n filter: blur(4px);\n background: linear-gradient(45deg, #ffca18, #ff6f00);\n animation: loadtwo 3s ease-in-out infinite;\n}\n\n@keyframes loadtwo {\n 50% {\n transform: rotate(-90deg);\n }\n}"},{"created":"2024-01-22T16:54:34.000Z","isPrivate":0,"projectId":"83a120","snapshot":null,"tags":null,"title":"loader by jeremyssocial","updated":"2024-01-22T16:54:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":324,"cssLen":1258,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 10em;\n perspective: 800px;\n}\n\n.loader-cube {\n position: relative;\n width: 5em;\n height: 5em;\n transform-style: preserve-3d;\n animation: rotateCube 2s infinite linear;\n}\n\n.loader-side {\n position: absolute;\n width: 5em;\n height: 5em;\n background: #333; /* Custom property for theming */\n border: 0.1em solid #fff; /* Relative sizing for border */\n}\n\n.front {\n transform: translateZ(2.5em);\n}\n.back {\n transform: rotateY(180deg) translateZ(2.5em);\n}\n.right {\n transform: rotateY(90deg) translateZ(2.5em);\n}\n.left {\n transform: rotateY(-90deg) translateZ(2.5em);\n}\n.top {\n transform: rotateX(90deg) translateZ(2.5em);\n}\n.bottom {\n transform: rotateX(-90deg) translateZ(2.5em);\n}\n\n/* Keyframes for continuous rotation */\n@keyframes rotateCube {\n from {\n transform: rotateX(0deg) rotateY(0deg);\n }\n to {\n transform: rotateX(360deg) rotateY(360deg);\n }\n}\n\n/* Interactive states using pseudo-classes */\n.loader-side:hover {\n background: #555; /* Darker shade on hover */\n}\n\n.loader-side:focus {\n border: 0.1em solid #999; /* Different border color on focus */\n}\n\n.loader-side:active {\n opacity: 0.8; /* Slight transparency on active */\n}\n"},{"created":"2024-01-22T16:54:34.000Z","isPrivate":0,"projectId":"b34dd8","snapshot":null,"tags":null,"title":"loader by Praashoo7","updated":"2024-01-22T16:54:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":33110,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"/* \n\n Design by Adrian Kuleszo\n Number of Keyframes can be increased or decreased based on the smoothness you require.\n \n */\n\n.loader {\n width: 15em;\n height: 8em;\n border-radius: 15px;\n background: conic-gradient(from 0deg at 50% 50%, #FFFFFF, #1d3a3d);\n animation: 1.5s run infinite linear;\n}\n\n@keyframes run {\n 0% {\n background: conic-gradient(from 0deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 0.277% {\n background: conic-gradient(from 1deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 0.554% {\n background: conic-gradient(from 2deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 0.831% {\n background: conic-gradient(from 3deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 1.108% {\n background: conic-gradient(from 4deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 1.385% {\n background: conic-gradient(from 5deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 1.662% {\n background: conic-gradient(from 6deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 1.939% {\n background: conic-gradient(from 7deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 2.216% {\n background: conic-gradient(from 8deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 2.493% {\n background: conic-gradient(from 9deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 2.770% {\n background: conic-gradient(from 10deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 3.047% {\n background: conic-gradient(from 11deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 3.324% {\n background: conic-gradient(from 12deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 3.601% {\n background: conic-gradient(from 13deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 3.878% {\n background: conic-gradient(from 14deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 4.155% {\n background: conic-gradient(from 15deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 4.432% {\n background: conic-gradient(from 16deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 4.709% {\n background: conic-gradient(from 17deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 4.986% {\n background: conic-gradient(from 18deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 5.263% {\n background: conic-gradient(from 19deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 5.540% {\n background: conic-gradient(from 20deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 5.817% {\n background: conic-gradient(from 21deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 6.094% {\n background: conic-gradient(from 22deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 6.371% {\n background: conic-gradient(from 23deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 6.648% {\n background: conic-gradient(from 24deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 6.925% {\n background: conic-gradient(from 25deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 7.202% {\n background: conic-gradient(from 26deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 7.479% {\n background: conic-gradient(from 27deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 7.756% {\n background: conic-gradient(from 28deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 8.033% {\n background: conic-gradient(from 29deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 8.310% {\n background: conic-gradient(from 30deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 8.587% {\n background: conic-gradient(from 31deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 8.864% {\n background: conic-gradient(from 32deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 9.141% {\n background: conic-gradient(from 33deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 9.418% {\n background: conic-gradient(from 34deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 9.695% {\n background: conic-gradient(from 35deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 9.972% {\n background: conic-gradient(from 36deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 10.249% {\n background: conic-gradient(from 37deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 10.526% {\n background: conic-gradient(from 38deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 10.803% {\n background: conic-gradient(from 39deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 11.080% {\n background: conic-gradient(from 40deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 11.357% {\n background: conic-gradient(from 41deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 11.634% {\n background: conic-gradient(from 42deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 11.911% {\n background: conic-gradient(from 43deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 12.188% {\n background: conic-gradient(from 44deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 12.465% {\n background: conic-gradient(from 45deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 12.742% {\n background: conic-gradient(from 46deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 13.019% {\n background: conic-gradient(from 47deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 13.296% {\n background: conic-gradient(from 48deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 13.573% {\n background: conic-gradient(from 49deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 13.850% {\n background: conic-gradient(from 50deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 14.127% {\n background: conic-gradient(from 51deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 14.404% {\n background: conic-gradient(from 52deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 14.681% {\n background: conic-gradient(from 53deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 14.958% {\n background: conic-gradient(from 54deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 15.235% {\n background: conic-gradient(from 55deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 15.512% {\n background: conic-gradient(from 56deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 15.789% {\n background: conic-gradient(from 57deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 16.066% {\n background: conic-gradient(from 58deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 16.343% {\n background: conic-gradient(from 59deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 16.620% {\n background: conic-gradient(from 60deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 16.897% {\n background: conic-gradient(from 61deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 17.174% {\n background: conic-gradient(from 62deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 17.451% {\n background: conic-gradient(from 63deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 17.728% {\n background: conic-gradient(from 64deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 18.005% {\n background: conic-gradient(from 65deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 18.282% {\n background: conic-gradient(from 66deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 18.559% {\n background: conic-gradient(from 67deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 18.836% {\n background: conic-gradient(from 68deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 19.113% {\n background: conic-gradient(from 69deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 19.390% {\n background: conic-gradient(from 70deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 19.667% {\n background: conic-gradient(from 71deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 19.944% {\n background: conic-gradient(from 72deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 20.221% {\n background: conic-gradient(from 73deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 20.498% {\n background: conic-gradient(from 74deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 20.775% {\n background: conic-gradient(from 75deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 21.052% {\n background: conic-gradient(from 76deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 21.329% {\n background: conic-gradient(from 77deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 21.606% {\n background: conic-gradient(from 78deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 21.883% {\n background: conic-gradient(from 79deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 22.160% {\n background: conic-gradient(from 80deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 22.437% {\n background: conic-gradient(from 81deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 22.714% {\n background: conic-gradient(from 82deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 22.991% {\n background: conic-gradient(from 83deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 23.268% {\n background: conic-gradient(from 84deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 23.545% {\n background: conic-gradient(from 85deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 23.822% {\n background: conic-gradient(from 86deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 24.099% {\n background: conic-gradient(from 87deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 24.376% {\n background: conic-gradient(from 88deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 24.653% {\n background: conic-gradient(from 89deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 24.930% {\n background: conic-gradient(from 90deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 25.207% {\n background: conic-gradient(from 91deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 25.484% {\n background: conic-gradient(from 92deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 25.761% {\n background: conic-gradient(from 93deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 26.038% {\n background: conic-gradient(from 94deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 26.315% {\n background: conic-gradient(from 95deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 26.592% {\n background: conic-gradient(from 96deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 26.869% {\n background: conic-gradient(from 97deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 27.146% {\n background: conic-gradient(from 98deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 27.423% {\n background: conic-gradient(from 99deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 27.700% {\n background: conic-gradient(from 100deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 27.977% {\n background: conic-gradient(from 101deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 28.254% {\n background: conic-gradient(from 102deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 28.531% {\n background: conic-gradient(from 103deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 28.808% {\n background: conic-gradient(from 104deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 29.085% {\n background: conic-gradient(from 105deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 29.362% {\n background: conic-gradient(from 106deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 29.639% {\n background: conic-gradient(from 107deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 29.916% {\n background: conic-gradient(from 108deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 30.193% {\n background: conic-gradient(from 109deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 30.470% {\n background: conic-gradient(from 110deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 30.747% {\n background: conic-gradient(from 111deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 31.024% {\n background: conic-gradient(from 112deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 31.301% {\n background: conic-gradient(from 113deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 31.578% {\n background: conic-gradient(from 114deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 31.855% {\n background: conic-gradient(from 115deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 32.132% {\n background: conic-gradient(from 116deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 32.409% {\n background: conic-gradient(from 117deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 32.686% {\n background: conic-gradient(from 118deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 32.963% {\n background: conic-gradient(from 119deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 33.240% {\n background: conic-gradient(from 120deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 33.517% {\n background: conic-gradient(from 121deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 33.794% {\n background: conic-gradient(from 122deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 34.071% {\n background: conic-gradient(from 123deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 34.348% {\n background: conic-gradient(from 124deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 34.625% {\n background: conic-gradient(from 125deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 34.902% {\n background: conic-gradient(from 126deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 35.179% {\n background: conic-gradient(from 127deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 35.456% {\n background: conic-gradient(from 128deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 35.733% {\n background: conic-gradient(from 129deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 36.010% {\n background: conic-gradient(from 130deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 36.287% {\n background: conic-gradient(from 131deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 36.564% {\n background: conic-gradient(from 132deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 36.841% {\n background: conic-gradient(from 133deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 37.118% {\n background: conic-gradient(from 134deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 37.395% {\n background: conic-gradient(from 135deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 37.672% {\n background: conic-gradient(from 136deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 37.949% {\n background: conic-gradient(from 137deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 38.226% {\n background: conic-gradient(from 138deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 38.503% {\n background: conic-gradient(from 139deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 38.780% {\n background: conic-gradient(from 140deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 39.057% {\n background: conic-gradient(from 141deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 39.334% {\n background: conic-gradient(from 142deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 39.611% {\n background: conic-gradient(from 143deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 39.888% {\n background: conic-gradient(from 144deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 40.165% {\n background: conic-gradient(from 145deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 40.442% {\n background: conic-gradient(from 146deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 40.719% {\n background: conic-gradient(from 147deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 40.996% {\n background: conic-gradient(from 148deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 41.273% {\n background: conic-gradient(from 149deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 41.550% {\n background: conic-gradient(from 150deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 41.827% {\n background: conic-gradient(from 151deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 42.104% {\n background: conic-gradient(from 152deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 42.381% {\n background: conic-gradient(from 153deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 42.658% {\n background: conic-gradient(from 154deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 42.935% {\n background: conic-gradient(from 155deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 43.212% {\n background: conic-gradient(from 156deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 43.489% {\n background: conic-gradient(from 157deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 43.766% {\n background: conic-gradient(from 158deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 44.043% {\n background: conic-gradient(from 159deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 44.320% {\n background: conic-gradient(from 160deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 44.597% {\n background: conic-gradient(from 161deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 44.874% {\n background: conic-gradient(from 162deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 45.151% {\n background: conic-gradient(from 163deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 45.428% {\n background: conic-gradient(from 164deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 45.705% {\n background: conic-gradient(from 165deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 45.982% {\n background: conic-gradient(from 166deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 46.259% {\n background: conic-gradient(from 167deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 46.536% {\n background: conic-gradient(from 168deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 46.813% {\n background: conic-gradient(from 169deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 47.090% {\n background: conic-gradient(from 170deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 47.367% {\n background: conic-gradient(from 171deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 47.644% {\n background: conic-gradient(from 172deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 47.921% {\n background: conic-gradient(from 173deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 48.198% {\n background: conic-gradient(from 174deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 48.475% {\n background: conic-gradient(from 175deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 48.752% {\n background: conic-gradient(from 176deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 49.029% {\n background: conic-gradient(from 177deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 49.306% {\n background: conic-gradient(from 178deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 49.583% {\n background: conic-gradient(from 179deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 49.860% {\n background: conic-gradient(from 180deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 50.137% {\n background: conic-gradient(from 181deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 50.414% {\n background: conic-gradient(from 182deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 50.691% {\n background: conic-gradient(from 183deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 50.968% {\n background: conic-gradient(from 184deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 51.245% {\n background: conic-gradient(from 185deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 51.522% {\n background: conic-gradient(from 186deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 51.799% {\n background: conic-gradient(from 187deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 52.076% {\n background: conic-gradient(from 188deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 52.353% {\n background: conic-gradient(from 189deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 52.630% {\n background: conic-gradient(from 190deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 52.907% {\n background: conic-gradient(from 191deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 53.184% {\n background: conic-gradient(from 192deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 53.461% {\n background: conic-gradient(from 193deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 53.738% {\n background: conic-gradient(from 194deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 54.015% {\n background: conic-gradient(from 195deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 54.292% {\n background: conic-gradient(from 196deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 54.569% {\n background: conic-gradient(from 197deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 54.846% {\n background: conic-gradient(from 198deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 55.123% {\n background: conic-gradient(from 199deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 55.400% {\n background: conic-gradient(from 200deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 55.677% {\n background: conic-gradient(from 201deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 55.954% {\n background: conic-gradient(from 202deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 56.231% {\n background: conic-gradient(from 203deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 56.508% {\n background: conic-gradient(from 204deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 56.785% {\n background: conic-gradient(from 205deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 57.062% {\n background: conic-gradient(from 206deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 57.339% {\n background: conic-gradient(from 207deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 57.616% {\n background: conic-gradient(from 208deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 57.893% {\n background: conic-gradient(from 209deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 58.170% {\n background: conic-gradient(from 210deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 58.447% {\n background: conic-gradient(from 211deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 58.724% {\n background: conic-gradient(from 212deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 59.001% {\n background: conic-gradient(from 213deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 59.278% {\n background: conic-gradient(from 214deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 59.555% {\n background: conic-gradient(from 215deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 59.832% {\n background: conic-gradient(from 216deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 60.109% {\n background: conic-gradient(from 217deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 60.386% {\n background: conic-gradient(from 218deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 60.663% {\n background: conic-gradient(from 219deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 60.940% {\n background: conic-gradient(from 220deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 61.217% {\n background: conic-gradient(from 221deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 61.494% {\n background: conic-gradient(from 222deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 61.771% {\n background: conic-gradient(from 223deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 62.048% {\n background: conic-gradient(from 224deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 62.325% {\n background: conic-gradient(from 225deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 62.602% {\n background: conic-gradient(from 226deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 62.879% {\n background: conic-gradient(from 227deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 63.156% {\n background: conic-gradient(from 228deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 63.433% {\n background: conic-gradient(from 229deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 63.710% {\n background: conic-gradient(from 230deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 63.987% {\n background: conic-gradient(from 231deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 64.264% {\n background: conic-gradient(from 232deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 64.541% {\n background: conic-gradient(from 233deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 64.818% {\n background: conic-gradient(from 234deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 65.095% {\n background: conic-gradient(from 235deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 65.372% {\n background: conic-gradient(from 236deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 65.649% {\n background: conic-gradient(from 237deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 65.926% {\n background: conic-gradient(from 238deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 66.203% {\n background: conic-gradient(from 239deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 66.480% {\n background: conic-gradient(from 240deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 66.757% {\n background: conic-gradient(from 241deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 67.034% {\n background: conic-gradient(from 242deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 67.311% {\n background: conic-gradient(from 243deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 67.588% {\n background: conic-gradient(from 244deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 67.865% {\n background: conic-gradient(from 245deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 68.142% {\n background: conic-gradient(from 246deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 68.419% {\n background: conic-gradient(from 247deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 68.696% {\n background: conic-gradient(from 248deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 68.973% {\n background: conic-gradient(from 249deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 69.250% {\n background: conic-gradient(from 250deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 69.527% {\n background: conic-gradient(from 251deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 69.804% {\n background: conic-gradient(from 252deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 70.081% {\n background: conic-gradient(from 253deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 70.358% {\n background: conic-gradient(from 254deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 70.635% {\n background: conic-gradient(from 255deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 70.912% {\n background: conic-gradient(from 256deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 71.189% {\n background: conic-gradient(from 257deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 71.466% {\n background: conic-gradient(from 258deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 71.743% {\n background: conic-gradient(from 259deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 72.020% {\n background: conic-gradient(from 260deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 72.297% {\n background: conic-gradient(from 261deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 72.574% {\n background: conic-gradient(from 262deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 72.851% {\n background: conic-gradient(from 263deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 73.128% {\n background: conic-gradient(from 264deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 73.405% {\n background: conic-gradient(from 265deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 73.682% {\n background: conic-gradient(from 266deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 73.959% {\n background: conic-gradient(from 267deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 74.236% {\n background: conic-gradient(from 268deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 74.513% {\n background: conic-gradient(from 269deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 74.790% {\n background: conic-gradient(from 270deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 75.067% {\n background: conic-gradient(from 271deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 75.344% {\n background: conic-gradient(from 272deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 75.621% {\n background: conic-gradient(from 273deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 75.898% {\n background: conic-gradient(from 274deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 76.175% {\n background: conic-gradient(from 275deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 76.452% {\n background: conic-gradient(from 276deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 76.729% {\n background: conic-gradient(from 277deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 77.006% {\n background: conic-gradient(from 278deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 77.283% {\n background: conic-gradient(from 279deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 77.560% {\n background: conic-gradient(from 280deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 77.837% {\n background: conic-gradient(from 281deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 78.114% {\n background: conic-gradient(from 282deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 78.391% {\n background: conic-gradient(from 283deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 78.668% {\n background: conic-gradient(from 284deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 78.945% {\n background: conic-gradient(from 285deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 79.222% {\n background: conic-gradient(from 286deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 79.499% {\n background: conic-gradient(from 287deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 79.776% {\n background: conic-gradient(from 288deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 80.053% {\n background: conic-gradient(from 289deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 80.330% {\n background: conic-gradient(from 290deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 80.607% {\n background: conic-gradient(from 291deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 80.884% {\n background: conic-gradient(from 292deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 81.161% {\n background: conic-gradient(from 293deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 81.438% {\n background: conic-gradient(from 294deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 81.715% {\n background: conic-gradient(from 295deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 81.992% {\n background: conic-gradient(from 296deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 82.269% {\n background: conic-gradient(from 297deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 82.546% {\n background: conic-gradient(from 298deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 82.823% {\n background: conic-gradient(from 299deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 83.100% {\n background: conic-gradient(from 300deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 83.377% {\n background: conic-gradient(from 301deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 83.654% {\n background: conic-gradient(from 302deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 83.931% {\n background: conic-gradient(from 303deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 84.208% {\n background: conic-gradient(from 304deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 84.485% {\n background: conic-gradient(from 305deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 84.762% {\n background: conic-gradient(from 306deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 85.039% {\n background: conic-gradient(from 307deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 85.316% {\n background: conic-gradient(from 308deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 85.593% {\n background: conic-gradient(from 309deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 85.870% {\n background: conic-gradient(from 310deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 86.147% {\n background: conic-gradient(from 311deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 86.424% {\n background: conic-gradient(from 312deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 86.701% {\n background: conic-gradient(from 313deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 86.978% {\n background: conic-gradient(from 314deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 87.255% {\n background: conic-gradient(from 315deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 87.532% {\n background: conic-gradient(from 316deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 87.809% {\n background: conic-gradient(from 317deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 88.086% {\n background: conic-gradient(from 318deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 88.363% {\n background: conic-gradient(from 319deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 88.640% {\n background: conic-gradient(from 320deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 88.917% {\n background: conic-gradient(from 321deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 89.194% {\n background: conic-gradient(from 322deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 89.471% {\n background: conic-gradient(from 323deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 89.748% {\n background: conic-gradient(from 324deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 90.025% {\n background: conic-gradient(from 325deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 90.302% {\n background: conic-gradient(from 326deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 90.579% {\n background: conic-gradient(from 327deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 90.856% {\n background: conic-gradient(from 328deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 91.133% {\n background: conic-gradient(from 329deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 91.410% {\n background: conic-gradient(from 330deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 91.687% {\n background: conic-gradient(from 331deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 91.964% {\n background: conic-gradient(from 332deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 92.241% {\n background: conic-gradient(from 333deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 92.518% {\n background: conic-gradient(from 334deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 92.795% {\n background: conic-gradient(from 335deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 93.072% {\n background: conic-gradient(from 336deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 93.349% {\n background: conic-gradient(from 337deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 93.626% {\n background: conic-gradient(from 338deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 93.903% {\n background: conic-gradient(from 339deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 94.180% {\n background: conic-gradient(from 340deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 94.457% {\n background: conic-gradient(from 341deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 94.734% {\n background: conic-gradient(from 342deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 95.011% {\n background: conic-gradient(from 343deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 95.288% {\n background: conic-gradient(from 344deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 95.565% {\n background: conic-gradient(from 345deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 95.842% {\n background: conic-gradient(from 346deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 96.119% {\n background: conic-gradient(from 347deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 96.396% {\n background: conic-gradient(from 348deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 96.673% {\n background: conic-gradient(from 349deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 96.950% {\n background: conic-gradient(from 350deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 97.227% {\n background: conic-gradient(from 351deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 97.504% {\n background: conic-gradient(from 352deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 97.781% {\n background: conic-gradient(from 353deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 98.058% {\n background: conic-gradient(from 354deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 98.335% {\n background: conic-gradient(from 355deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 98.612% {\n background: conic-gradient(from 356deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 98.889% {\n background: conic-gradient(from 357deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 99.166% {\n background: conic-gradient(from 358deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 99.443% {\n background: conic-gradient(from 359deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 99.720% {\n background: conic-gradient(from 360deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n\n 100% {\n background: conic-gradient(from 0deg at 50% 50%, #FFFFFF, #1d3a3d);\n }\n}"},{"created":"2024-01-22T16:54:33.000Z","isPrivate":0,"projectId":"825b2b","snapshot":null,"tags":null,"title":"loader by ashish-yadv","updated":"2024-01-22T16:54:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":102,"cssLen":712,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 60px;\n display: flex;\n justify-content: space-evenly;\n}\n\n.ball {\n list-style: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background-color: #fff;\n}\n\n.ball:nth-child(1) {\n animation: bounce-1 2.1s ease-in-out infinite;\n}\n\n@keyframes bounce-1 {\n 50% {\n transform: translateY(-18px);\n background-color: aqua;\n }\n}\n\n.ball:nth-child(2) {\n animation: bounce-3 2.1s ease-in-out 0.3s infinite;\n}\n\n@keyframes bounce-2 {\n 50% {\n transform: translateY(-18px);\n background-color: aqua;\n }\n}\n\n.ball:nth-child(3) {\n animation: bounce-3 2.1s ease-in-out 0.6s infinite;\n}\n\n@keyframes bounce-3 {\n 50% {\n transform: translateY(-18px);\n background-color: aqua;\n }\n}"},{"created":"2024-01-22T16:54:33.000Z","isPrivate":0,"projectId":"876bb0","snapshot":null,"tags":null,"title":"loader by Tsiangana","updated":"2024-01-22T16:54:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":361,"cssLen":2217,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".dot-spinner {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n --uib-speed: 0.9s;\n height: 2.8rem;\n width: 2.8rem;\n /*animation: float 3s linear infinite;*/\n}\n\n@keyframes float {\n 0% {\n transform: rotate(0deg) translate(100px) rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg) translate(100px) rotate(-360deg);\n }\n}\n\n.dot-spinner__dot::before {\n content: '';\n height: 20%;\n width: 20%;\n border-radius: 50%;\n background-color: #fff;\n filter: drop-shadow(0 0 10px rgb(95, 150, 202));\n box-shadow: -6px -6px 11px #c1c1c1,\n 6px 6px 11px #ffffff;\n transform: scale(0);\n opacity: 0.5;\n animation: pulse0112 calc(var(--uib-speed) * 1.111) ease-in-out infinite;\n box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);\n}\n\n.dot-spinner__dot {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n height: 100%;\n width: 100%;\n}\n\n.dot-spinner__dot:nth-child(2) {\n transform: rotate(45deg);\n}\n\n.dot-spinner__dot:nth-child(2)::before {\n animation-delay: calc(var(--uib-speed) * -0.875);\n}\n\n.dot-spinner__dot:nth-child(3) {\n transform: rotate(90deg);\n}\n\n.dot-spinner__dot:nth-child(3)::before {\n animation-delay: calc(var(--uib-speed) * -0.75);\n}\n\n.dot-spinner__dot:nth-child(4) {\n transform: rotate(135deg);\n}\n\n.dot-spinner__dot:nth-child(4)::before {\n animation-delay: calc(var(--uib-speed) * -0.625);\n}\n\n.dot-spinner__dot:nth-child(5) {\n transform: rotate(180deg);\n}\n\n.dot-spinner__dot:nth-child(5)::before {\n animation-delay: calc(var(--uib-speed) * -0.5);\n}\n\n.dot-spinner__dot:nth-child(6) {\n transform: rotate(225deg);\n}\n\n.dot-spinner__dot:nth-child(6)::before {\n animation-delay: calc(var(--uib-speed) * -0.375);\n}\n\n.dot-spinner__dot:nth-child(7) {\n transform: rotate(270deg);\n}\n\n.dot-spinner__dot:nth-child(7)::before {\n animation-delay: calc(var(--uib-speed) * -0.25);\n}\n\n.dot-spinner__dot:nth-child(8) {\n transform: rotate(315deg);\n}\n\n.dot-spinner__dot:nth-child(8)::before {\n animation-delay: calc(var(--uib-speed) * -0.125);\n}\n\n@keyframes pulse0112 {\n 0%,\n 100% {\n transform: scale(0);\n opacity: 0.5;\n }\n\n 50% {\n transform: scale(1);\n opacity: 1;\n }\n}"},{"created":"2024-01-22T16:54:33.000Z","isPrivate":0,"projectId":"d12606","snapshot":null,"tags":null,"title":"loader by guilhermeyohan","updated":"2024-01-22T16:54:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":71,"cssLen":850,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n display: inline-block;\n position: relative;\n width: 80px;\n height: 80px;\n animation: loader_513 2s linear infinite;\n}\n\n.shape {\n position: absolute;\n top: 0;\n left: 0;\n width: 80px;\n height: 80px;\n border-radius: 15px;\n}\n\n.shape {\n background-color: rgb(31, 1, 164);\n animation: rectangle_513 4s linear infinite;\n animation-delay: 2s;\n}\n\n@keyframes loader_513 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes rectangle_513 {\n 0% {\n transform: scale(1, 1);\n border-radius: 15px;\n }\n\n 25% {\n border-radius: 30px;\n box-shadow: 0px 0px 5px rgba(133, 133, 133, 0.523);\n background-color: rgb(13, 60, 189);\n transform: scale(0.9);\n }\n\n 50% {\n border-radius: 20px;\n transform: scale(1.4);\n box-shadow: 2px 5px 50px rgba(90, 90, 90, 0.206);\n }\n}\n "}]}},"actionData":null,"errors":null}