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

","css":".loader {\n --s: 5px;\n /* control the size */\n width: calc(10*var(--s));\n display: grid;\n aspect-ratio: 1;\n border-radius: 50%;\n -webkit-mask: radial-gradient(50% 50%,#0000 calc(99% - 2*var(--s)),#000 calc(101% - 2*var(--s)));\n animation: r 4s linear infinite;\n}\n\n.loader:before {\n content: \"\";\n /* adjust the colors below */\n background: conic-gradient(from 25deg,#f8a201 25%,#fa2402 0 50%,#fdb3b0 0 75%,#02dde1 0);\n -webkit-mask: repeating-conic-gradient(#0000 0 25deg,#000 23% 25%),\n radial-gradient(var(--s) at var(--s) 50%,#000 97%,#0000) \n left/calc(100% - 2*var(--s)) 100% repeat-x,\n radial-gradient(var(--s) at 50% var(--s),#000 97%,#0000) \n top /100% calc(100% - 2*var(--s)) repeat-y;\n}\n\n@keyframes r {\n to {\n transform: rotate(1turn)\n }\n}\n"},{"created":"2024-01-22T16:54:33.000Z","isPrivate":0,"projectId":"576568","snapshot":null,"tags":null,"title":"loader by Df12345677","updated":"2024-01-22T16:54:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":105,"cssLen":652,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

","css":".loader {\n display: flex;\n gap: 10px;\n}\n\n.loader span {\n height: 20px;\n width: 20px;\n background-image: linear-gradient(to right , #333 , #233,#222,#122,#112,#111,#011,#001,#000);\n border-radius: 50%;\n animation-name: animar;\n animation-duration: 3s;\n animation-iteration-count: infinite;\n box-shadow: 20px 20px 18px #666666,\n -20px -20px 18px #ffffff;\n}\n\n#one {\n animation-delay: 1s;\n}\n\n#two {\n animation-delay: 2s;\n}\n\n#three {\n animation-delay: 3s;\n}\n\n@keyframes animar {\n 0% {\n transform: scale(1);\n }\n\n 33% {\n transform: scale(.3);\n }\n\n 66% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T16:54:33.000Z","isPrivate":0,"projectId":"d7be52","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":727,"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 width: 6px;\n height: 6px;\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 width: 6px;\n height: 6px;\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 width: 6px;\n height: 6px;\n }\n}"},{"created":"2024-01-22T16:54:33.000Z","isPrivate":0,"projectId":"7cf811","snapshot":null,"tags":null,"title":"loader by santhoshsj-dev","updated":"2024-01-22T16:54:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":52,"cssLen":2584,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".bg {\n padding: 20px;\n border-radius: 10px;\n background-color: var(--base-color);\n --base-color: #212121;\n /*use your base color*/\n}\n\n.loader {\n width: 60px;\n height: 40px;\n position: relative;\n display: inline-block;\n background-color: var(--base-color);\n}\n\n.loader::before {\n content: '';\n left: 0;\n top: 0;\n position: absolute;\n width: 36px;\n height: 36px;\n border-radius: 50%;\n background-color: #FFF;\n background-image: radial-gradient(circle 8px at 18px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 36px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, var(--base-color) 100%, transparent 0);\n background-repeat: no-repeat;\n box-sizing: border-box;\n animation: rotationBack 3s linear infinite;\n}\n\n.loader::after {\n content: '';\n left: 35px;\n top: 15px;\n position: absolute;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background-color: #FFF;\n background-image: radial-gradient(circle 5px at 12px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 24px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, var(--base-color) 100%, transparent 0);\n background-repeat: no-repeat;\n box-sizing: border-box;\n animation: rotationBack 4s linear infinite reverse;\n}\n\n@keyframes rotationBack {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(-360deg);\n }\n} "},{"created":"2024-01-22T16:54:33.000Z","isPrivate":0,"projectId":"c92ef4","snapshot":null,"tags":null,"title":"loader by fanishah","updated":"2024-01-22T16:54:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":1808,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".planet {\n display: block;\n width: 125px;\n height: 125px;\n position: relative;\n transform-style: preserve-3d;\n border-radius: 50%;\n background: #fcc96b;\n background: #fcc96b;\n background: linear-gradient(\n 180deg,\n #fcc96b 0%,\n #fcc96b 15%,\n #f7ae01 15%,\n #f7ae01 19%,\n #fcc96b 19%,\n #fcc96b 22%,\n #f7ae01 22%,\n #f7ae01 28%,\n #fcc96b 28%,\n #fcc96b 31%,\n #fcc96b 33%,\n #fcc96b 36%,\n #f7ae01 36%,\n #f7ae01 48%,\n #fcc96b 48%,\n #fcc96b 55%,\n #f7ae01 55%,\n #f7ae01 66%,\n #fcc96b 66%,\n #fcc96b 70%,\n #f7ae01 70%,\n #f7ae01 73%,\n #fcc96b 73%,\n #fcc96b 82%,\n #f7ae01 82%,\n #c7ba9d 86%,\n #fcc96b 86%\n );\n box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.25),\n inset 8px -4px 6px rgba(199, 128, 0, 0.5),\n inset -8px 4px 8px rgba(255, 235, 199, 0.5), inset 20px -5px 12px #f7ae01,\n 0 0 100px #ffffff59;\n transform: rotateZ(-15deg);\n}\n\n.planet::before {\n position: absolute;\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border: 16px solid #e1a519;\n border-top-width: 0;\n border-radius: 50%;\n box-shadow: 0 -2px 0 #c18620;\n animation: rings1 0.8s infinite linear;\n}\n\n.planet::after {\n position: absolute;\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border: 8px solid #d48b0c;\n border-top-width: 0;\n border-radius: 50%;\n box-shadow: 0 -2px 0 #b99309;\n animation: rings2 0.8s infinite linear;\n}\n\n@keyframes rings1 {\n 0% {\n transform: rotateX(65deg) rotateZ(0deg) scale(1.75);\n }\n\n 100% {\n transform: rotateX(65deg) rotateZ(360deg) scale(1.75);\n }\n}\n\n@keyframes rings2 {\n 0% {\n transform: rotateX(65deg) rotateZ(0deg) scale(1.7);\n }\n\n 100% {\n transform: rotateX(65deg) rotateZ(360deg) scale(1.7);\n }\n}"},{"created":"2024-01-22T16:54:33.000Z","isPrivate":0,"projectId":"0dcac9","snapshot":null,"tags":null,"title":"loader by Nawsome","updated":"2024-01-22T16:54:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":2429,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"/* Normal Usage */\n.spinner:before {\n transform: rotateX(60deg) rotateY(45deg) rotateZ(45deg);\n animation: 750ms rotateBefore infinite linear reverse;\n}\n\n.spinner:after {\n transform: rotateX(240deg) rotateY(45deg) rotateZ(45deg);\n animation: 750ms rotateAfter infinite linear;\n}\n\n.spinner:before,\n.spinner:after {\n box-sizing: border-box;\n content: '';\n display: block;\n position: absolute;\n margin-top: -5em;\n margin-left: -5em;\n width: 10em;\n height: 10em;\n transform-style: preserve-3d;\n transform-origin: 50%;\n transform: rotateY(50%);\n perspective-origin: 50% 50%;\n perspective: 340px;\n background-size: 10em 10em;\n background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2NnB4IiBoZWlnaHQ9IjI5N3B4IiB2aWV3Qm94PSIwIDAgMjY2IDI5NyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8dGl0bGU+c3Bpbm5lcjwvdGl0bGU+CiAgICA8ZGVzY3JpcHRpb24+Q3JlYXRlZCB3aXRoIFNrZXRjaCAoaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoKTwvZGVzY3JpcHRpb24+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4KICAgICAgICA8cGF0aCBkPSJNMTcxLjUwNzgxMywzLjI1MDAwMDM4IEMyMjYuMjA4MTgzLDEyLjg1NzcxMTEgMjk3LjExMjcyMiw3MS40OTEyODIzIDI1MC44OTU1OTksMTA4LjQxMDE1NSBDMjE2LjU4MjAyNCwxMzUuODIwMzEgMTg2LjUyODQwNSw5Ny4wNjI0OTY0IDE1Ni44MDA3NzQsODUuNzczNDM0NiBDMTI3LjA3MzE0Myw3NC40ODQzNzIxIDc2Ljg4ODQ2MzIsODQuMjE2MTQ2MiA2MC4xMjg5MDY1LDEwOC40MTAxNTMgQy0xNS45ODA0Njg1LDIxOC4yODEyNDcgMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IDE0NS4yNzczNDQsMjk2LjY2Nzk2OCBDMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IC0yNS40NDkyMTg3LDI1Ny4yNDIxOTggMy4zOTg0Mzc1LDEwOC40MTAxNTUgQzE2LjMwNzA2NjEsNDEuODExNDE3NCA4NC43Mjc1ODI5LC0xMS45OTIyOTg1IDE3MS41MDc4MTMsMy4yNTAwMDAzOCBaIiBpZD0iUGF0aC0xIiBmaWxsPSIjMDAwMDAwIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==);\n}\n/* sitNSpin.less */\n@keyframes rotateBefore {\n from {\n transform: rotateX(60deg) rotateY(45deg) rotateZ(0deg);\n }\n\n to {\n transform: rotateX(60deg) rotateY(45deg) rotateZ(-360deg);\n }\n}\n\n@keyframes rotateAfter {\n from {\n transform: rotateX(240deg) rotateY(45deg) rotateZ(0deg);\n }\n\n to {\n transform: rotateX(240deg) rotateY(45deg) rotateZ(360deg);\n }\n}"},{"created":"2024-01-22T16:54:33.000Z","isPrivate":0,"projectId":"c30323","snapshot":null,"tags":null,"title":"loader by jack0237","updated":"2024-01-22T16:54:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":158,"cssLen":561,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".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: translateY(-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"},{"created":"2024-01-22T16:54:33.000Z","isPrivate":0,"projectId":"5ef92e","snapshot":null,"tags":null,"title":"loader by coding-masala","updated":"2024-01-22T16:54:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":132,"cssLen":652,"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 height: 100px;\n}\n\n.box {\n width: 20px;\n height: 20px;\n margin: 0 8px;\n border-radius: 50%;\n animation: jump_4123 1s ease-in-out infinite;\n}\n\n.box:nth-child(1) {\n background-color: #4e4e4e;\n animation-delay: 0.2s;\n}\n\n.box:nth-child(2) {\n background-color: #bdbdbd;\n animation-delay: 0.4s;\n}\n\n.box:nth-child(3) {\n background-color: #4e4e4e;\n animation-delay: 0.6s;\n}\n\n.box:nth-child(4) {\n background-color: #bdbdbd;\n animation-delay: 0.8s;\n}\n\n@keyframes jump_4123 {\n 0%, 100% {\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(-30px);\n }\n}\n"},{"created":"2024-01-22T16:54:33.000Z","isPrivate":0,"projectId":"2cc460","snapshot":null,"tags":null,"title":"loader by Abhi-6284","updated":"2024-01-22T16:54:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":301,"cssLen":1927,"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(\n to bottom,\n hsl(330, 3.13%, 25.1%) 0%,\n hsl(177.27, 21.71%, 32.06%) 5.5%,\n hsl(176.67, 34.1%, 36.88%) 12.1%,\n hsl(176.61, 42.28%, 40.7%) 19.6%,\n hsl(120, 40%, 50%) 27.9%,\n hsl(45, 40%, 50%) 36.6%,\n hsl(240, 40%, 50%) 45.6%,\n hsl(60, 40%, 50%) 54.6%,\n hsl(150, 40%, 50%) 63.4%,\n hsl(300, 40%, 50%) 71.7%,\n hsl(75, 40%, 50%) 79.4%,\n hsl(210, 40%, 50%) 86.2%,\n hsl(15, 40%, 50%) 91.9%,\n hsl(330, 40%, 50%) 96.3%,\n hsl(90, 40%, 50%) 99%,\n hsl(180, 40%, 50%) 100%\n );\n}\n\n.cube-top {\n position: absolute;\n width: 75px;\n height: 75px;\n background: hsl(330, 3.13%, 25.1%) 0%;\n /* width 75px / 2 = 37.5px */\n transform: rotateX(90deg) translateZ(37.5px);\n transform-style: preserve-3d;\n}\n\n.cube-top::before {\n content: '';\n position: absolute;\n/* u can choose any size */\n width: 75px;\n height: 75px;\n background: hsl(176.61, 42.28%, 40.7%) 19.6%;\n transform: translateZ(-90px);\n filter: blur(10px);\n box-shadow: 0 0 10px #323232,\n 0 0 20px hsl(176.61, 42.28%, 40.7%) 19.6%,\n 0 0 30px #323232,\n 0 0 40px hsl(176.61, 42.28%, 40.7%) 19.6%;\n}\n"},{"created":"2024-01-22T16:54:33.000Z","isPrivate":0,"projectId":"f89ced","snapshot":null,"tags":null,"title":"loader by satyamchaudharydev","updated":"2024-01-22T16:54:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":91,"cssLen":1455,"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":".loader {\n --loader: rgb(49, 180, 255);\n --loader-size: 30px;\n position: relative;\n width: 100px;\n height: 40px;\n overflow: hidden;\n transition: .5s;\n letter-spacing: 2px\n}\n\n.loader span {\n position: absolute;\n}\n\n.loader span:nth-child(1) {\n top: 0;\n left: -100%;\n width: 100%;\n height: var(--loader-size);\n background: linear-gradient(90deg, transparent, var(--loader));\n animation: loader-anim1 1s linear infinite;\n}\n\n@keyframes loader-anim1 {\n 0% {\n left: -100%;\n }\n\n 50%,100% {\n left: 100%;\n }\n}\n\n.loader span:nth-child(2) {\n top: -100%;\n right: 0;\n width: var(--loader-size);\n height: 100%;\n background: linear-gradient(180deg, transparent, var(--loader));\n animation: loader-anim2 1s linear infinite;\n animation-delay: .25s\n}\n\n@keyframes loader-anim2 {\n 0% {\n top: -100%;\n }\n\n 50%,100% {\n top: 100%;\n }\n}\n\n.loader span:nth-child(3) {\n bottom: 0;\n right: -100%;\n width: 100%;\n height: var(--loader-size);\n background: linear-gradient(270deg, transparent, var(--loader));\n animation: loader-anim3 1s linear infinite;\n animation-delay: .5s\n}\n\n@keyframes loader-anim3 {\n 0% {\n right: -100%;\n }\n\n 50%,100% {\n right: 100%;\n }\n}\n\n.loader span:nth-child(4) {\n bottom: -100%;\n left: 0;\n width: var(--loader-size);\n height: 100%;\n background: linear-gradient(360deg, transparent, var(--loader));\n animation: loader-anim4 1s linear infinite;\n animation-delay: .75s\n}\n\n@keyframes loader-anim4 {\n 0% {\n bottom: -100%;\n }\n\n 50%,100% {\n bottom: 100%;\n }\n}"},{"created":"2024-01-22T16:54:33.000Z","isPrivate":0,"projectId":"79130c","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1187,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 96px;\n height: 48px;\n display: inline-block;\n position: relative;\n background: #5e5e5e;\n border-radius: 48px 48px 0 0;\n box-sizing: border-box;\n overflow: hidden;\n}\n\n.loader::after {\n content: '';\n box-sizing: border-box;\n position: absolute;\n width: 24px;\n height: 12px;\n border-radius: 24px 24px 0 0;\n background: yellow;\n left: 50%;\n transform: translateX(-50%);\n bottom: 0;\n}\n\n.loader::before {\n content: '';\n position: absolute;\n width: 4px;\n height: 32px;\n left: 0;\n right: 0;\n margin: auto;\n bottom: 0;\n background: yellow;\n transform-origin: 50% 100%;\n box-sizing: border-box;\n animation: animloader 2s linear infinite alternate;\n}\n\n@keyframes animloader {\n 0% {\n transform: rotate(-70deg);\n }\n\n 10% {\n transform: rotate(-40deg);\n }\n\n 20%, 45%, 35% {\n transform: rotate(-10deg);\n }\n\n 40%, 30% {\n transform: rotate(-30deg);\n }\n\n 50%, 60% {\n transform: rotate(20deg);\n }\n\n 55%, 65%, 75% {\n transform: rotate(40deg);\n }\n\n 70% {\n transform: rotate(45deg);\n }\n\n 85%, 90% {\n transform: rotate(50deg);\n }\n\n 95% {\n transform: rotate(75deg);\n }\n\n 100%, 93% {\n transform: rotate(70deg);\n }\n}"},{"created":"2024-01-22T16:54:33.000Z","isPrivate":0,"projectId":"ba7f66","snapshot":null,"tags":null,"title":"loader by ashish-yadv","updated":"2024-01-22T16:54:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":157,"cssLen":606,"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 gap: 0.6em;\n list-style: none;\n}\n\n.dots {\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background: #ffffff;\n}\n\n#dot-1 {\n animation: loader-1 0.6s infinite ease-in-out;\n}\n\n@keyframes loader-1 {\n 50% {\n opacity: 0;\n transform: translateY(-0.3em);\n }\n}\n\n#dot-2 {\n animation: loader-2 0.6s 0.3s infinite ease-in-out;\n}\n\n@keyframes loader-2 {\n 50% {\n opacity: 0;\n transform: translateY(-0.3em);\n }\n}\n\n#dot-3 {\n animation: loader-3 0.6s 0.6s infinite ease-in-out;\n}\n\n@keyframes loader-3 {\n 50% {\n opacity: 0;\n transform: translateY(-0.3em);\n }\n}"}]}},"actionData":null,"errors":null}