{"loaderData":{"0":null,"0-3":{"total":7498,"projects":[{"created":"2024-01-22T16:54:32.000Z","isPrivate":0,"projectId":"0e11f5","snapshot":null,"tags":null,"title":"loader by vinodjangid07","updated":"2024-01-22T16:54:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":671,"cssLen":1238,"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","css":".loader {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.loaderMiniContainer {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 130px;\n height: fit-content;\n}\n.barContainer {\n width: 100%;\n height: fit-content;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n gap: 10px;\n background-position: left;\n}\n.bar {\n width: 100%;\n height: 8px;\n background: linear-gradient(\n to right,\n rgb(161, 94, 255),\n rgb(217, 190, 255),\n rgb(161, 94, 255)\n );\n background-size: 200% 100%;\n border-radius: 10px;\n animation: bar ease-in-out 3s infinite alternate-reverse;\n}\n@keyframes bar {\n 0% {\n background-position: left;\n }\n 100% {\n background-position: right;\n }\n}\n.bar2 {\n width: 50%;\n}\n.svgIcon {\n position: absolute;\n left: -25px;\n margin-top: 18px;\n z-index: 2;\n width: 70%;\n animation: search ease-in-out 3s infinite alternate-reverse;\n}\n@keyframes search {\n 0% {\n transform: translateX(0%) rotate(70deg);\n }\n\n 100% {\n transform: translateX(100px) rotate(10deg);\n }\n}\n.svgIcon circle,\nline {\n stroke: rgb(162, 55, 255);\n}\n.svgIcon circle {\n fill: rgba(98, 65, 142, 0.238);\n}\n"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"715ea5","snapshot":null,"tags":null,"title":"loader by Saiyed-Tanvir","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":94,"cssLen":846,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".quater {\n height: 1.5cm;\n width: 1.5cm;\n background-color: skyblue;\n float: left;\n position: relative;\n bottom: 1.25cm;\n}\n\n.i {\n border-top-left-radius: 100%;\n animation: spin1 2s ease-in-out infinite;\n transform-origin: 1.5cm 1.5cm;\n}\n\n.ii {\n border-top-right-radius: 100%;\n animation: spin2 2s ease-in-out infinite;\n transform-origin: 0 1.5cm;\n}\n\n@keyframes spin1 {\n 0% {\n transform: rotateZ(0deg);\n }\n\n 25% {\n transform: rotateZ(0deg);\n }\n\n 50% {\n transform: rotateZ(180deg);\n }\n\n 75% {\n transform: rotateZ(180deg);\n }\n\n 100% {\n transform: rotateZ(360deg);\n }\n}\n\n@keyframes spin2 {\n 0% {\n transform: rotateZ(0deg);\n }\n\n 25% {\n transform: rotateZ(180deg);\n }\n\n 50% {\n transform: rotateZ(180deg);\n }\n\n 75% {\n transform: rotateZ(360deg);\n }\n\n 100% {\n transform: rotateZ(360deg);\n }\n}"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"6cd555","snapshot":null,"tags":null,"title":"loader by satyamchaudharydev","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":92,"cssLen":631,"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":".spinner {\n --gap: 5px;\n --clr: #d62d20;\n --height: 23px;\n width: 100px;\n height: 100px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--gap);\n}\n\n.spinner span {\n background: var(--clr);\n width: 6px;\n height: var(--height);\n animation: grow 1s ease-in-out infinite;\n}\n\n.spinner span:nth-child(2) {\n animation: grow 1s ease-in-out 0.15s infinite;\n}\n\n.spinner span:nth-child(3) {\n animation: grow 1s ease-in-out 0.3s infinite;\n}\n\n.spinner span:nth-child(4) {\n animation: grow 1s ease-in-out 0.475s infinite;\n}\n\n@keyframes grow {\n 0%,100% {\n transform: scaleY(1);\n }\n\n 50% {\n transform: scaleY(1.8);\n }\n}"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"346bc8","snapshot":null,"tags":null,"title":"loader by Sourcesketch","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":104,"cssLen":3501,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Loading…\n

\n","css":".flower-loader {\n overflow: hidden;\n position: relative;\n text-indent: -9999px;\n display: inline-block;\n width: 16px;\n height: 16px;\n background: #e96;\n border-radius: 100%;\n -moz-box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px,\n #485 12px -12px 0 4px, #485 12px 12px 0 4px, #485 -12px 12px 0 4px;\n -webkit-box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px,\n #485 12px -12px 0 4px, #485 12px 12px 0 4px, #485 -12px 12px 0 4px;\n box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px, #485 12px -12px 0 4px,\n #485 12px 12px 0 4px, #485 -12px 12px 0 4px;\n -moz-animation: flower-loader 5s infinite ease-in-out;\n -webkit-animation: flower-loader 5s infinite ease-in-out;\n animation: flower-loader 5s infinite ease-in-out;\n -moz-transform-origin: 50% 50%;\n -ms-transform-origin: 50% 50%;\n -webkit-transform-origin: 50% 50%;\n transform-origin: 50% 50%;\n}\n\n@-moz-keyframes flower-loader {\n 0% {\n -moz-transform: rotate(0deg);\n transform: rotate(0deg);\n -moz-box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px,\n #485 12px -12px 0 4px, #485 12px 12px 0 4px, #485 -12px 12px 0 4px;\n box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px, #485 12px -12px 0 4px,\n #485 12px 12px 0 4px, #485 -12px 12px 0 4px;\n }\n 50% {\n -moz-transform: rotate(1080deg);\n transform: rotate(1080deg);\n -moz-box-shadow: white 0 0 15px 0, #485 12px 12px 0 4px,\n #485 -12px 12px 0 4px, #485 -12px -12px 0 4px, #485 12px -12px 0 4px;\n box-shadow: white 0 0 15px 0, #485 12px 12px 0 4px, #485 -12px 12px 0 4px,\n #485 -12px -12px 0 4px, #485 12px -12px 0 4px;\n }\n}\n@-webkit-keyframes flower-loader {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n -webkit-box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px,\n #485 12px -12px 0 4px, #485 12px 12px 0 4px, #485 -12px 12px 0 4px;\n box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px, #485 12px -12px 0 4px,\n #485 12px 12px 0 4px, #485 -12px 12px 0 4px;\n }\n 50% {\n -webkit-transform: rotate(1080deg);\n transform: rotate(1080deg);\n -webkit-box-shadow: white 0 0 15px 0, #485 12px 12px 0 4px,\n #485 -12px 12px 0 4px, #485 -12px -12px 0 4px, #485 12px -12px 0 4px;\n box-shadow: white 0 0 15px 0, #485 12px 12px 0 4px, #485 -12px 12px 0 4px,\n #485 -12px -12px 0 4px, #485 12px -12px 0 4px;\n }\n}\n@keyframes flower-loader {\n 0% {\n -moz-transform: rotate(0deg);\n -ms-transform: rotate(0deg);\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n -moz-box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px,\n #485 12px -12px 0 4px, #485 12px 12px 0 4px, #485 -12px 12px 0 4px;\n -webkit-box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px,\n #485 12px -12px 0 4px, #485 12px 12px 0 4px, #485 -12px 12px 0 4px;\n box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px, #485 12px -12px 0 4px,\n #485 12px 12px 0 4px, #485 -12px 12px 0 4px;\n }\n 50% {\n -moz-transform: rotate(1080deg);\n -ms-transform: rotate(1080deg);\n -webkit-transform: rotate(1080deg);\n transform: rotate(1080deg);\n -moz-box-shadow: white 0 0 15px 0, #485 12px 12px 0 4px,\n #485 -12px 12px 0 4px, #485 -12px -12px 0 4px, #485 12px -12px 0 4px;\n -webkit-box-shadow: white 0 0 15px 0, #485 12px 12px 0 4px,\n #485 -12px 12px 0 4px, #485 -12px -12px 0 4px, #485 12px -12px 0 4px;\n box-shadow: white 0 0 15px 0, #485 12px 12px 0 4px, #485 -12px 12px 0 4px,\n #485 -12px -12px 0 4px, #485 12px -12px 0 4px;\n }\n}\n"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"ccd971","snapshot":null,"tags":null,"title":"loader by zombie223","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":259,"cssLen":2419,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".lds-spinner {\n height: 250px;\n width: 250px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding-right: 50px;\n padding-bottom: 20px;\n}\n\n.lds-spinner div {\n transform-origin: 30px 20px;\n}\n\n.lds-spinner div:after {\n content: \" \";\n display: block;\n position: absolute;\n top: 2px;\n left: 37px;\n width: 6px;\n height: 19px;\n border-radius: 20%;\n animation: color 1.2s ease-in-out infinite;\n}\n\n.lds-spinner div:nth-child(1) {\n transform: rotate(0deg);\n animation-delay: -1.1s;\n}\n\n.lds-spinner div:nth-child(2) {\n transform: rotate(30deg);\n animation-delay: -1s;\n}\n\n.lds-spinner div:nth-child(3) {\n transform: rotate(60deg);\n animation-delay: -0.9s;\n}\n\n.lds-spinner div:nth-child(4) {\n transform: rotate(90deg);\n animation-delay: -0.8s;\n}\n\n.lds-spinner div:nth-child(5) {\n transform: rotate(120deg);\n animation-delay: -0.7s;\n}\n\n.lds-spinner div:nth-child(6) {\n transform: rotate(150deg);\n animation-delay: -0.6s;\n}\n\n.lds-spinner div:nth-child(7) {\n transform: rotate(180deg);\n animation-delay: -0.5s;\n}\n\n.lds-spinner div:nth-child(8) {\n transform: rotate(210deg);\n animation-delay: -0.4s;\n}\n\n.lds-spinner div:nth-child(9) {\n transform: rotate(240deg);\n animation-delay: -0.3s;\n}\n\n.lds-spinner div:nth-child(10) {\n transform: rotate(270deg);\n animation-delay: -0.2s;\n}\n\n.lds-spinner div:nth-child(11) {\n transform: rotate(300deg);\n animation-delay: -0.1s;\n}\n\n.lds-spinner div:nth-child(12) {\n transform: rotate(330deg);\n animation-delay: 0s;\n}\n\n.lds-spinner div:nth-child(12)::after {\n animation-delay: 0s;\n}\n\n.lds-spinner div:nth-child(1)::after {\n animation-delay: -1.1s;\n}\n\n.lds-spinner div:nth-child(2)::after {\n animation-delay: -1s;\n}\n\n.lds-spinner div:nth-child(3)::after {\n animation-delay: -0.9s;\n}\n\n.lds-spinner div:nth-child(4)::after {\n animation-delay: -0.8s;\n}\n\n.lds-spinner div:nth-child(5)::after {\n animation-delay: -0.7s;\n}\n\n.lds-spinner div:nth-child(6)::after {\n animation-delay: -0.6s;\n}\n\n.lds-spinner div:nth-child(7)::after {\n animation-delay: -0.5s;\n}\n\n.lds-spinner div:nth-child(8)::after {\n animation-delay: -0.4s;\n}\n\n.lds-spinner div:nth-child(9)::after {\n animation-delay: -0.3s;\n}\n\n.lds-spinner div:nth-child(10)::after {\n animation-delay: -0.2s;\n}\n\n.lds-spinner div:nth-child(11)::after {\n animation-delay: -0.1s;\n}\n\n@keyframes color {\n 0% {\n background-color: darkcyan;\n }\n\n 100% {\n background-color: white;\n }\n}"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"860674","snapshot":null,"tags":null,"title":"loader by Rajan1092","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":669,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner {\n width: 56px;\n height: 56px;\n display: grid;\n}\n\n.spinner::before,\n.spinner::after {\n content: \"\";\n grid-area: 1/1;\n background: var(--c) 50% 0, \n var(--c) 50% 100%, \n var(--c) 100% 50%, \n var(--c) 0 50%;\n background-size: 13.4px 13.4px;\n background-repeat: no-repeat;\n animation: spinner-3hs4a3 1s infinite;\n}\n\n.spinner::before {\n --c: radial-gradient(farthest-side,#2b55a0 92%,#0000);\n margin: 4.5px;\n background-size: 9px 9px;\n animation-timing-function: linear;\n}\n\n.spinner::after {\n --c: radial-gradient(farthest-side,#2b55a0 92%,#0000);\n}\n\n@keyframes spinner-3hs4a3 {\n 100% {\n transform: rotate(.5turn);\n }\n}"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"faace2","snapshot":null,"tags":null,"title":"loader by Alaner-xs","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":53,"cssLen":693,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n --border-width: 10px;\n --size: 60px;\n border: var(--border-width) solid #f3f3f3;\n border-radius: 50%;\n border-top: var(--border-width) solid #1bbeff;\n border-bottom: var(--border-width) solid #1bbeff;\n border-left: var(--border-width) solid #147ec5;\n border-right: var(--border-width) solid #147ec5;\n width: var(--size);\n height: var(--size);\n animation: spin35112 2s linear infinite;\n}\n\n@keyframes spin35112 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.shake {\n animation: shake61790 1s linear infinite;\n}\n\n@keyframes shake61790 {\n 0% {\n transform: skewX(0deg);\n }\n\n 50% {\n transform: skewX(20deg);\n }\n\n 100% {\n transform: skewX(0deg);\n }\n}"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"e8e247","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":54,"cssLen":539,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".moon, .shadow {\n margin: auto;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background: rgb(216, 216, 216);\n border-radius: 50%;\n height: 50px;\n width: 50px;\n}\n\n.shadow {\n width: 50px;\n height: 50px;\n position: relative;\n background: #212121;\n /*Change these color to the bg of your website*/\n transition: all .3s ease;\n animation: move_4123 1.2s infinite alternate ease-in-out;\n transform: translate3d(8px, -8px, 0);\n}\n\n@keyframes move_4123 {\n 100% {\n transform: translate3d(36px, -36px, 0);\n }\n}"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"a535cc","snapshot":null,"tags":null,"title":"loader by mobinkakei","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":1597,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".loader {\n width: 54px;\n height: 54px;\n position: relative;\n border-radius: 4px;\n background-color: #fff;\n background-image: radial-gradient(circle 5px, #19191a 100%, transparent 0),\n radial-gradient(circle 5px, #19191a 100%, transparent 0),\n radial-gradient(circle 5px, #19191a 100%, transparent 0),\n radial-gradient(circle 5px, #19191a 100%, transparent 0),\n radial-gradient(circle 5px, #19191a 100%, transparent 0),\n radial-gradient(circle 5px, #19191a 100%, transparent 0);\n background-repeat: no-repeat;\n animation: move 4s linear infinite, rotate 2s linear infinite;\n}\n\n@keyframes rotate {\n 0%,\n 20% {\n transform: rotate(0deg);\n }\n 30%,\n 40% {\n transform: rotate(90deg);\n }\n 50%,\n 60% {\n transform: rotate(180deg);\n }\n 70%,\n 80% {\n transform: rotate(270deg);\n }\n 90%,\n 100% {\n transform: rotate(360deg);\n }\n}\n@keyframes move {\n 0%,\n 9% {\n background-position: -12px -15px, -12px 0px, -12px 15px, 12px -15px,\n 12px 0px, 12px 15px;\n }\n 10%,\n 25% {\n background-position: 0px -15px, -12px 0px, -12px 15px, 34px -15px, 12px 0px,\n 12px 15px;\n }\n 30%,\n 45% {\n background-position: 0px -34px, -12px -10px, -12px 12px, 34px -15px,\n 12px -10px, 12px 12px;\n }\n 50%,\n 65% {\n background-position: 0px -34px, -12px -34px, -12px 12px, 34px -12px,\n 0px -10px, 12px 12px;\n }\n 70%,\n 85% {\n background-position: 0px -34px, -12px -34px, 0px 12px, 34px -12px, 0px -10px,\n 34px 12px;\n }\n 90%,\n 100% {\n background-position: 0px -34px, -12px -34px, 0px 0px, 34px -12px, 0px 0px,\n 34px 12px;\n }\n}\n"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"1ee650","snapshot":null,"tags":null,"title":"loader by csozidev","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":218,"cssLen":1319,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"/* Simple loader made by: csozi | Website: www.csozi.hu*/\n\n.square {\n display: flex;\n flex-wrap: wrap;\n width: 100px;\n height: 100px;\n box-sizing: content-box;\n animation: load-big 4s infinite;\n transform-origin: 0px 100px;\n}\n\n.mini_square {\n box-sizing: border-box;\n height: 50px;\n width: 50px;\n background-color: darkcyan;\n}\n\n.sq-1 {\n animation: load-left-top 4s infinite;\n}\n\n.sq-2 {\n animation: load-right-top 4s infinite;\n}\n\n.sq-4 {\n animation: load-right-bottom 4s infinite;\n}\n\n@keyframes load-right-bottom {\n 0% {\n translate: -50px 0px;\n }\n\n 25% {\n translate: 0px 0px;\n }\n\n 100% {\n translate: 0px 0px;\n }\n}\n\n@keyframes load-right-top {\n 0% {\n translate: -50px 50px;\n }\n\n 25% {\n translate: 0px 50px;\n }\n\n 50% {\n translate: 0px 0px;\n }\n\n 100% {\n translate: 0px 0px;\n }\n}\n\n@keyframes load-left-top {\n 0% {\n translate: 0px 50px;\n }\n\n 25% {\n translate: 50px 50px;\n }\n\n 50% {\n translate: 50px 0px;\n }\n\n 75% {\n translate: 0px 0px;\n }\n\n 100% {\n translate: 0px 0px;\n }\n}\n\n@keyframes load-big {\n 0% {\n scale: 1;\n background-color: rgba(0, 0, 0, 0);\n }\n\n 74% {\n scale: 1;\n background-color: rgba(0, 0, 0, 0);\n }\n\n 75% {\n scale: 1;\n background-color: darkcyan;\n }\n\n 100% {\n scale: 0.5;\n background-color: darkcyan;\n }\n}"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"469a9e","snapshot":null,"tags":null,"title":"loader by kerolos23","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":83,"cssLen":891,"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 div {\n position: absolute;\n top: 33px;\n width: 13px;\n height: 13px;\n border-radius: 50%;\n background: #c517f0;\n animation-timing-function: cubic-bezier(0, 1, 1, 0);\n}\n\n.loader div:nth-child(1) {\n left: 8px;\n animation: flip1 0.6s infinite;\n}\n\n.loader div:nth-child(2) {\n left: 8px;\n animation: flip2 0.6s infinite;\n}\n\n.loader div:nth-child(3) {\n left: 32px;\n animation: flip2 0.6s infinite;\n}\n\n.loader div:nth-child(4) {\n left: 56px;\n animation: flip3 0.6s infinite;\n}\n\n@keyframes flip1 {\n 0% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes flip3 {\n 0% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes flip2 {\n 0% {\n transform: translate(0, 0);\n }\n\n 100% {\n transform: translate(24px, 0);\n }\n}\n"},{"created":"2024-01-22T16:54:31.000Z","isPrivate":0,"projectId":"81a6cd","snapshot":null,"tags":null,"title":"loader by jack0237","updated":"2024-01-22T16:54:31.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":158,"cssLen":591,"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}\n\n.loader .dot {\n height: 20px;\n width: 20px;\n border-radius: 50%;\n border: 2px solid #e8e8e8;\n background: #16b0c1;\n animation: jump 0.8s ease-in-out infinite alternate;\n}\n\n@keyframes jump {\n 100% {\n background: #661e92;\n transform: translateZ(-3rem) scale(1.9);\n }\n}\n\n.loader .dot:nth-child(1) {\n animation-delay: 0.1s;\n}\n\n.loader .dot:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.loader .dot:nth-child(3) {\n animation-delay: 0.3s;\n}\n\n.loader .dot:nth-child(4) {\n animation-delay: 0.4s;\n}\n\n.loader .dot:nth-child(5) {\n animation-delay: 0.5s;\n}\n"}]}},"actionData":null,"errors":null}