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

\n","css":".loader {\n width: 60px;\n height: 60px;\n background: linear-gradient(#ff8a00 calc(1*100%/6),#fff 0 calc(3*100%/6),#ff8a00 0),\n linear-gradient(#ff8a00 calc(2*100%/6),#fff 0 calc(4*100%/6),#ff8a00 0),\n linear-gradient(#ff8a00 calc(3*100%/6),#fff 0 calc(5*100%/6),#ff8a00 0);\n background-size: 15px 400%;\n background-repeat: no-repeat;\n animation: matrix 1s infinite linear;\n}\n\n@keyframes matrix {\n 0% {\n background-position: 0% 100%, 50% 100%, 100% 100%\n }\n\n 100% {\n background-position: 0% 0%, 50% 0%, 100% 0%\n }\n}"},{"created":"2024-01-22T16:54:29.000Z","isPrivate":0,"projectId":"39ea79","snapshot":null,"tags":null,"title":"loader by Rayan-72","updated":"2024-01-22T16:54:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":505,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".parent {\n display: flex;\n justify-content: center;\n height: 1060px;\n align-items: center;\n transition: all 0.4s;\n}\n\n.square {\n background-color: rgba(228, 34, 16, 0.87);\n height: 50px;\n width: 50px;\n animation: rayan 1.2s infinite;\n}\n\n.circle {\n margin-left: 20px;\n height: 50px;\n width: 50px;\n background-color: rgba(228, 34, 16, 0.87);\n border-radius: 50%;\n animation: rayan 1.2s infinite;\n animation-delay: .4s;\n}\n\n@keyframes rayan {\n 100% {\n background-color: rgb(0, 0, 0);\n }\n}\n"},{"created":"2024-01-22T16:54:29.000Z","isPrivate":0,"projectId":"f8026f","snapshot":null,"tags":null,"title":"loader by Juanes200122","updated":"2024-01-22T16:54:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":301,"cssLen":1870,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n

","css":".cube-loader {\n position: relative;\n /* u can choose any size */\n width: 75px;\n height: 75px;\n transform-style: preserve-3d;\n transform: rotateX(-30deg);\n animation: animate 4s linear infinite;\n}\n\n@keyframes animate {\n 0% {\n transform: rotateX(-30deg) rotateY(0);\n }\n\n 100% {\n transform: rotateX(-30deg) rotateY(360deg);\n }\n}\n\n.cube-loader .cube-wrapper {\n position: absolute;\n width: 100%;\n height: 100%;\n /* top: 0;\n left: 0; */\n transform-style: preserve-3d;\n}\n\n.cube-loader .cube-wrapper .cube-span {\n position: absolute;\n width: 100%;\n height: 100%;\n /* top: 0;\n left: 0; */\n /* width 75px / 2 = 37.5px */\n transform: rotateY(calc(90deg * var(--i))) translateZ(37.5px);\n background: linear-gradient(to bottom,\n hsl(270, 100%, 25.1%) 0%,\n hsl(270, 100%, 32.06%) 5.5%,\n hsl(270, 100%, 36.88%) 12.1%,\n hsl(270, 100%, 40.7%) 19.6%,\n hsl(270, 100%, 43.88%) 27.9%,\n hsl(270, 100%, 46.58%) 36.6%,\n hsl(270, 100%, 48.91%) 45.6%,\n hsl(270, 100%, 50.91%) 54.6%,\n hsl(270, 100%, 52.62%) 63.4%,\n hsl(270, 100%, 54.08%) 71.7%,\n hsl(270, 100%, 55.29%) 79.4%,\n hsl(270, 100%, 56.28%) 86.2%,\n hsl(270, 100%, 57.04%) 91.9%,\n hsl(270, 100%, 57.59%) 96.3%,\n hsl(270, 100%, 57.93%) 99%,\n hsl(270, 100%, 58.04%) 100%);\n}\n\n.cube-top {\n position: absolute;\n width: 75px;\n height: 75px;\n background: hsl(320, 2%, 24%) 0%;\n /* width 75px / 2 = 37.5px */\n transform: rotateX(90deg) translateZ(37.5px);\n transform-style: preserve-3d;\n}\n\n.cube-top::before {\n content: '';\n position: absolute;\n /* u can choose any size */\n width: 75px;\n height: 75px;\n background: hsl(0, 0%, 0%) 19.6%;\n transform: translateZ(-90px);\n filter: blur(10px);\n box-shadow: 0 0 10px #323232,\n 0 0 20px hsl(280, 42%, 41%) 19.6%,\n 0 0 30px #323232,\n 0 0 40px hsl(283, 42%, 41%) 19.6%;\n}"},{"created":"2024-01-22T16:54:29.000Z","isPrivate":0,"projectId":"50130b","snapshot":null,"tags":null,"title":"loader by Avishek255874","updated":"2024-01-22T16:54:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1347,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n}\n\n.loader {\n width: 48px;\n height: 48px;\n position: relative;\n}\n\n.loader::before , .loader::after {\n content: '';\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50% , -50%);\n width: 48em;\n height: 48em;\n background-image: radial-gradient(circle 10px, #FFF 100%, transparent 0),\n radial-gradient(circle 10px, #FFF 100%, transparent 0),\n radial-gradient(circle 10px, #FFF 100%, transparent 0),\n radial-gradient(circle 10px, #FFF 100%, transparent 0),\n radial-gradient(circle 10px, #FFF 100%, transparent 0),\n radial-gradient(circle 10px, #FFF 100%, transparent 0),\n radial-gradient(circle 10px, #FFF 100%, transparent 0),\n radial-gradient(circle 10px, #FFF 100%, transparent 0);\n background-position: 0em -18em, 0em 18em, 18em 0em, -18em 0em,\n 13em -13em, -13em -13em, 13em 13em, -13em 13em;\n background-repeat: no-repeat;\n font-size: 0.5px;\n border-radius: 50%;\n animation: blast 1s ease-in infinite;\n}\n\n.loader::after {\n font-size: 1px;\n background: #fff;\n animation: bounce 1s ease-in infinite;\n}\n\n@keyframes bounce {\n 0% , 100% {\n font-size: 0.75px\n }\n\n 50% {\n font-size: 1.5px\n }\n}\n\n@keyframes blast {\n 0% , 40% {\n font-size: 0.5px;\n }\n\n 70% {\n opacity: 1;\n font-size: 4px;\n }\n\n 100% {\n font-size: 6px;\n opacity: 0;\n }\n}"},{"created":"2024-01-22T16:54:29.000Z","isPrivate":0,"projectId":"c5c08e","snapshot":null,"tags":null,"title":"loader by bernethe","updated":"2024-01-22T16:54:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":484,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n clear: both;\n margin: 1rem auto;\n width: 3.125rem;\n height: 1.125rem;\n border: 1px #000 solid;\n border-radius: 4px;\n background: linear-gradient(-60deg, transparent 0%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent);\n background-size: 20px 30px;\n background-position: 0px 0px;\n animation: spLoadBar 0.8s infinite linear;\n}\n\n@keyframes spLoadBar {\n from {\n background-position: 0px 0px;\n }\n\n to {\n background-position: -20px 0px;\n }\n}"},{"created":"2024-01-22T16:54:29.000Z","isPrivate":0,"projectId":"bb1be8","snapshot":null,"tags":null,"title":"loader by Galahhad","updated":"2024-01-22T16:54:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":267,"cssLen":4260,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Synchronization\n

","css":".ui-abstergo {\n --primary: #fff;\n --secondary: rgba(255, 255, 255, 0.3);\n --shadow-blur: 3px;\n --text-shadow-blur: 3px;\n --animation-duration: 2s;\n --size: 1;\n}\n\n.abstergo-loader * {\n -webkit-box-sizing: content-box;\n box-sizing: content-box;\n}\n\n.ui-abstergo {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n row-gap: 30px;\n scale: var(--size);\n}\n\n.ui-abstergo .ui-text {\n color: var(--primary);\n text-shadow: 0 0 var(--text-shadow-blur) var(--secondary);\n font-family: Menlo, sans-serif;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: baseline;\n -ms-flex-align: baseline;\n align-items: baseline;\n -webkit-column-gap: 3px;\n -moz-column-gap: 3px;\n column-gap: 3px;\n}\n\n.ui-abstergo .ui-dot {\n content: \"\";\n display: block;\n width: 3px;\n height: 3px;\n -webkit-animation: dots var(--animation-duration) infinite linear;\n animation: dots var(--animation-duration) infinite linear;\n -webkit-animation-delay: .4s;\n animation-delay: .4s;\n background-color: var(--primary);\n}\n\n.ui-abstergo .ui-dot:nth-child(2) {\n -webkit-animation-delay: .8s;\n animation-delay: .8s;\n}\n\n.ui-abstergo .ui-dot:nth-child(3) {\n -webkit-animation-delay: 1.2s;\n animation-delay: 1.2s;\n}\n\n.ui-abstergo .ui-dot+.ui-dot {\n margin-left: 3px;\n}\n\n.abstergo-loader {\n width: 103px;\n height: 90px;\n position: relative;\n}\n\n.abstergo-loader div {\n width: 50px;\n border-right: 12px solid transparent;\n border-left: 12px solid transparent;\n border-top: 21px solid var(--primary);\n position: absolute;\n -webkit-filter: drop-shadow(0 0 var(--shadow-blur) var(--secondary));\n filter: drop-shadow(0 0 var(--shadow-blur) var(--secondary));\n}\n\n.abstergo-loader div:nth-child(1) {\n top: 27px;\n left: 7px;\n rotate: -60deg;\n -webkit-animation: line1 var(--animation-duration) linear infinite alternate;\n animation: line1 var(--animation-duration) linear infinite alternate;\n}\n\n.abstergo-loader div:nth-child(2) {\n bottom: 2px;\n left: 0;\n rotate: 180deg;\n -webkit-animation: line2 var(--animation-duration) linear infinite alternate;\n animation: line2 var(--animation-duration) linear infinite alternate;\n}\n\n.abstergo-loader div:nth-child(3) {\n bottom: 16px;\n right: -9px;\n rotate: 60deg;\n -webkit-animation: line3 var(--animation-duration) linear infinite alternate;\n animation: line3 var(--animation-duration) linear infinite alternate;\n}\n\n.abstergo-loader:hover div:nth-child(1) {\n top: 21px;\n left: 14px;\n rotate: 60deg;\n}\n\n.abstergo-loader:hover div:nth-child(2) {\n bottom: 5px;\n left: -8px;\n rotate: 300deg;\n}\n\n.abstergo-loader:hover div:nth-child(3) {\n bottom: 7px;\n right: -11px;\n rotate: 180deg;\n}\n\n@-webkit-keyframes line1 {\n 0%,\n 40% {\n top: 27px;\n left: 7px;\n rotate: -60deg;\n }\n\n 60%,\n 100% {\n top: 22px;\n left: 14px;\n rotate: 60deg;\n }\n}\n\n@keyframes line1 {\n 0%,\n 40% {\n top: 27px;\n left: 7px;\n rotate: -60deg;\n }\n\n 60%,\n 100% {\n top: 22px;\n left: 14px;\n rotate: 60deg;\n }\n}\n\n@-webkit-keyframes line2 {\n 0%,\n 40% {\n bottom: 2px;\n left: 0;\n rotate: 180deg;\n }\n\n 60%,\n 100% {\n bottom: 5px;\n left: -8px;\n rotate: 300deg;\n }\n}\n\n@keyframes line2 {\n 0%,\n 40% {\n bottom: 2px;\n left: 0;\n rotate: 180deg;\n }\n\n 60%,\n 100% {\n bottom: 5px;\n left: -8px;\n rotate: 300deg;\n }\n}\n\n@-webkit-keyframes line3 {\n 0%,\n 40% {\n bottom: 16px;\n right: -9px;\n rotate: 60deg;\n }\n\n 60%,\n 100% {\n bottom: 7px;\n right: -11px;\n rotate: 180deg;\n }\n}\n\n@keyframes line3 {\n 0%,\n 40% {\n bottom: 16px;\n right: -9px;\n rotate: 60deg;\n }\n\n 60%,\n 100% {\n bottom: 7px;\n right: -11px;\n rotate: 180deg;\n }\n}\n\n@-webkit-keyframes dots {\n 0% {\n background-color: var(--secondary);\n }\n\n 30% {\n background-color: var(--primary);\n }\n\n 70%, 100% {\n background-color: var(--secondary);\n }\n}\n\n@keyframes dots {\n 0% {\n background-color: var(--secondary);\n }\n\n 30% {\n background-color: var(--primary);\n }\n\n 70%, 100% {\n background-color: var(--secondary);\n }\n}"},{"created":"2024-01-22T16:54:29.000Z","isPrivate":0,"projectId":"39449f","snapshot":null,"tags":null,"title":"loader by andrew-demchenk0","updated":"2024-01-22T16:54:29.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":607,"cssLen":1704,"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}\n\n.loader .loader_item {\n transform-origin: 40px 40px;\n animation: spinner 1.2s linear infinite;\n}\n\n.loader .loader_item:after {\n content: \" \";\n display: block;\n position: absolute;\n top: 3px;\n left: 37px;\n width: 6px;\n height: 18px;\n border-radius: 20%;\n /* try any color u want (yellow, red, lightskyblue ect...) */\n background: green;\n}\n\n.loader .loader_item:nth-child(1) {\n transform: rotate(0deg);\n animation-delay: -1.1s;\n}\n\n.loader .loader_item:nth-child(2) {\n transform: rotate(30deg);\n animation-delay: -1s;\n}\n\n.loader .loader_item:nth-child(3) {\n transform: rotate(60deg);\n animation-delay: -0.9s;\n}\n\n.loader .loader_item:nth-child(4) {\n transform: rotate(90deg);\n animation-delay: -0.8s;\n}\n\n.loader .loader_item:nth-child(5) {\n transform: rotate(120deg);\n animation-delay: -0.7s;\n}\n\n.loader .loader_item:nth-child(6) {\n transform: rotate(150deg);\n animation-delay: -0.6s;\n}\n\n.loader .loader_item:nth-child(7) {\n transform: rotate(180deg);\n animation-delay: -0.5s;\n}\n\n.loader .loader_item:nth-child(8) {\n transform: rotate(210deg);\n animation-delay: -0.4s;\n}\n\n.loader .loader_item:nth-child(9) {\n transform: rotate(240deg);\n animation-delay: -0.3s;\n}\n\n.loader .loader_item:nth-child(10) {\n transform: rotate(270deg);\n animation-delay: -0.2s;\n}\n\n.loader .loader_item:nth-child(11) {\n transform: rotate(300deg);\n animation-delay: -0.1s;\n}\n\n.loader .loader_item:nth-child(12) {\n transform: rotate(330deg);\n animation-delay: 0s;\n}\n\n@keyframes spinner {\n 0% {\n opacity: 1;\n filter: hue-rotate(0deg);\n }\n\n 100% {\n opacity: 0;\n filter: hue-rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:28.000Z","isPrivate":0,"projectId":"7cc502","snapshot":null,"tags":null,"title":"loader by carlosepcc","updated":"2024-01-22T16:54:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":165,"cssLen":838,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".flex {\n display: flex\n}\n\n.aspect-square {\n aspect-ratio: 1 / 1\n}\n\n.w-8 {\n width: 2rem\n}\n\n@keyframes bounce {\n 0%, 100% {\n transform: translateY(-25%);\n animation-timing-function: cubic-bezier(0.8,0,1,1)\n }\n\n 50% {\n transform: none;\n animation-timing-function: cubic-bezier(0,0,0.2,1)\n }\n}\n\n.animate-bounce {\n animation: bounce 1s infinite\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-center {\n justify-content: center\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.border-r-2 {\n border-right-width: 2px\n}\n\n.border-yellow-500 {\n --tw-border-opacity: 1;\n border-color: rgb(234 179 8 / var(--tw-border-opacity))\n}\n\n.bg-yellow-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(253 224 71 / var(--tw-bg-opacity))\n}\n\n.text-yellow-700 {\n --tw-text-opacity: 1;\n color: rgb(161 98 7 / var(--tw-text-opacity))\n}"},{"created":"2024-01-22T16:54:28.000Z","isPrivate":0,"projectId":"ea96ad","snapshot":null,"tags":null,"title":"loader by ashish-yadv","updated":"2024-01-22T16:54:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":102,"cssLen":628,"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 }\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 }\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 }\n}"},{"created":"2024-01-22T16:54:28.000Z","isPrivate":0,"projectId":"1be4af","snapshot":null,"tags":null,"title":"loader by escannord","updated":"2024-01-22T16:54:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":179,"cssLen":1032,"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","css":".loader {\n text-align: center;\n position: relative;\n display: flex;\n}\n\n.loader .ball {\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);\n}\n\n.ball {\n display: block;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: radial-gradient(circle at 8px 5px, white 5%, black);\n position: relative;\n transform-origin: 50% -100px;\n}\n\n.ball:last-child {\n animation: balance-right 1.2s infinite linear;\n}\n\n.ball:first-child {\n animation: balance-left 1.2s infinite linear;\n}\n\n@keyframes balance-right {\n 0% {\n transform: rotate(0deg);\n animation-timing-function: linear;\n }\n\n 50% {\n transform: rotate(0deg);\n animation-timing-function: ease-out;\n }\n\n 75% {\n transform: rotate(-30deg);\n animation-timing-function: ease-in;\n }\n}\n\n@keyframes balance-left {\n 0% {\n transform: rotate(0deg);\n animation-timing-function: ease-out;\n }\n\n 25% {\n transform: rotate(30deg);\n animation-timing-function: ease-in;\n }\n\n 50% {\n transform: rotate(0deg);\n animation-timing-function: linear;\n }\n}\n"},{"created":"2024-01-22T16:54:28.000Z","isPrivate":0,"projectId":"d2b328","snapshot":null,"tags":null,"title":"loader by Praashoo7","updated":"2024-01-22T16:54:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":279,"cssLen":3447,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n display: flex;\n align-items: center;\n margin-left: -0.65em;\n}\n\n.load1 {\n position: absolute;\n content: \"\";\n margin-right: 1em;\n height: 1.2em;\n width: 1.2em;\n border-radius: 5px;\n background-color: white;\n box-shadow: 0 1px 7px rgba(0,0,0,0.3);\n}\n\n.load2 {\n position: absolute;\n margin-right: 1em;\n content: \"\";\n height: 1.2em;\n width: 1.2em;\n border-radius: 5px;\n background-color: white;\n animation: 2s flow2 infinite;\n}\n\n.load3 {\n position: absolute;\n margin-right: 1em;\n content: \"\";\n height: 1.2em;\n width: 1.2em;\n border-radius: 5px;\n background-color: white;\n animation: 2s flow3 infinite;\n}\n\n.load4 {\n position: absolute;\n margin-right: 1em;\n content: \"\";\n height: 1.2em;\n width: 1.2em;\n border-radius: 5px;\n background-color: white;\n animation: 2s flow4 infinite;\n}\n\n.load5 {\n position: absolute;\n margin-right: 1em;\n content: \"\";\n height: 1.2em;\n width: 1.2em;\n border-radius: 5px;\n background-color: white;\n animation: 2s flow5 infinite;\n}\n\n.load6 {\n position: absolute;\n margin-right: 1em;\n content: \"\";\n height: 1.2em;\n width: 1.2em;\n border-radius: 5px;\n background-color: white;\n animation: 6s flow6 infinite;\n}\n\n.load7 {\n position: absolute;\n margin-right: 1em;\n content: \"\";\n height: 1.2em;\n width: 1.2em;\n border-radius: 5px;\n background-color: white;\n animation: 6s flow7 infinite;\n}\n\n.load8 {\n position: absolute;\n margin-right: 1em;\n content: \"\";\n height: 1.2em;\n width: 1.2em;\n border-radius: 5px;\n background-color: white;\n animation: 6s flow8 infinite;\n}\n\n.load9 {\n position: absolute;\n content: \"\";\n height: 1.2em;\n width: 1.2em;\n border-radius: 5px;\n background-color: white;\n animation: 6s flow9 infinite;\n}\n\n@keyframes flow2 {\n 50% {\n transform: translateX(3em);\n box-shadow: 0 1px 7px rgba(0,0,0,0.3);\n }\n\n 100% {\n transform: translateX(0em);\n }\n}\n\n@keyframes flow3 {\n 50% {\n transform: translateX(-3em);\n box-shadow: 0 1px 7px rgba(0,0,0,0.3);\n }\n\n 100% {\n transform: translateX(0em);\n }\n}\n\n@keyframes flow4 {\n 50% {\n transform: translateY(3em);\n box-shadow: 0 1px 7px rgba(0,0,0,0.3);\n }\n\n 100% {\n transform: translateY(0em);\n }\n}\n\n@keyframes flow5 {\n 50% {\n transform: translateY(-3em);\n box-shadow: 0 1px 7px rgba(0,0,0,0.3);\n }\n\n 100% {\n transform: translateY(0em);\n }\n}\n\n@keyframes flow6 {\n 30% {\n transform: translateX(3em);\n box-shadow: 0 1px 7px rgba(0,0,0,0.3);\n }\n\n 60% {\n transform: translateX(3em) translateY(-3em);\n box-shadow: 0 1px 7px rgba(0,0,0,0.3);\n }\n\n 100% {\n transform: translateX(0em) translateY(0em);\n }\n}\n\n@keyframes flow7 {\n 30% {\n transform: translateX(-3em);\n box-shadow: 0 1px 7px rgba(0,0,0,0.3);\n }\n\n 60% {\n transform: translateX(-3em) translateY(3em);\n box-shadow: 0 1px 7px rgba(0,0,0,0.3);\n }\n\n 100% {\n transform: translateX(0em) translateY(0em);\n }\n}\n\n@keyframes flow8 {\n 30% {\n transform: translateY(3em);\n box-shadow: 0 1px 7px rgba(0,0,0,0.3);\n }\n\n 60% {\n transform: translateY(3em) translateX(3em);\n box-shadow: 0 1px 7px rgba(0,0,0,0.3);\n }\n\n 100% {\n transform: translateX(0em) translateY(0em);\n }\n}\n\n@keyframes flow9 {\n 30% {\n transform: translateY(-3em);\n box-shadow: 0 1px 7px rgba(0,0,0,0.3);\n }\n\n 60% {\n transform: translateY(-3em) translateX(-3em);\n box-shadow: 0 1px 7px rgba(0,0,0,0.3);\n }\n\n 100% {\n transform: translateX(0em) translateY(0em);\n }\n}"},{"created":"2024-01-22T16:54:28.000Z","isPrivate":0,"projectId":"3f5bb9","snapshot":null,"tags":null,"title":"loader by vinodjangid07","updated":"2024-01-22T16:54:28.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":125,"cssLen":1087,"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 align-items: center;\n justify-content: center;\n}\n.wrapper {\n width: 180px;\n height: 50px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2;\n}\n.text {\n z-index: 3;\n font-family: Whitney, -apple-system, Helvetica;\n letter-spacing: 1px;\n font-weight: 700;\n font-size: 20px;\n color: white;\n filter: drop-shadow(2px 2px 0px #ff9e02);\n}\n.box {\n width: 100%;\n height: 100%;\n background-color: #ef5d2e;\n position: absolute;\n z-index: 2;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: loading ease-in-out 0.9s infinite alternate-reverse;\n}\n@keyframes loading {\n 0% {\n transform: translateX(-20px);\n }\n 100% {\n transform: translateX(20px);\n }\n}\n.box::before {\n content: \"\";\n width: 20px;\n height: 170%;\n background-color: #ff9d0089;\n position: absolute;\n z-index: 1;\n animation: loading2 ease-in-out 0.9s infinite alternate-reverse;\n}\n@keyframes loading2 {\n 0% {\n transform: translateX(-50px);\n }\n 100% {\n transform: translateX(50px);\n }\n}\n"}]}},"actionData":null,"errors":null}