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

","css":".loader {\n height: 5cm;\n width: 5cm;\n border-radius: 1rem;\n /* border: 1px solid #0a7cbe; */\n box-shadow: inset 0 0 0 #0a7cbe;\n animation: load 4s ease infinite;\n}\n\n@keyframes load {\n \n 0% {\n box-shadow: inset -5cm -2.5cm 0 #0a7cbe;\n }\n\n 25% {\n box-shadow: inset 5cm -2.5cm 0 #0a7cbe;\n }\n\n 25.01% {\n box-shadow: inset 2.5cm -5cm 0 #0a7cbe;\n }\n\n 50% {\n box-shadow: inset 2.5cm 5cm 0 #0a7cbe;\n }\n\n 50.01% {\n box-shadow: inset 5cm 2.5cm 0 #0a7cbe;\n }\n\n 75% {\n box-shadow: inset -5cm 2.5cm 0 #0a7cbe;\n }\n\n 75.01% {\n box-shadow: inset -2.5cm 5cm 0 #0a7cbe;\n }\n\n 100% {\n box-shadow: inset -2.5cm -5cm 0 #0a7cbe;\n }\n}"},{"created":"2024-01-22T16:54:33.000Z","isPrivate":0,"projectId":"79b7e0","snapshot":null,"tags":null,"title":"loader by Yaya12085","updated":"2024-01-22T16:54:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":671,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n box-sizing: border-box;\n position: relative;\n display: block;\n width: 60px;\n height: 22px;\n border: 2px solid;\n border-radius: 3px;\n margin-left: -3px\n}\n\n.loader::after,\n.loader::before {\n content: \"\";\n display: block;\n box-sizing: border-box;\n position: absolute;\n height: 12px;\n background: currentColor;\n top: 3px\n}\n\n.loader::before {\n right: -4px;\n border-radius: 3px;\n width: 4px\n}\n\n.loader::after {\n width: 1px;\n left: 3px;\n animation: full 2s ease-in-out infinite;\n}\n\n@keyframes full {\n 20% {\n background-color: red\n }\n\n 45% {\n background-color: yellow;\n }\n\n to {\n width: 50px;\n background-color: greenyellow;\n }\n}"},{"created":"2024-01-22T16:54:33.000Z","isPrivate":0,"projectId":"6e04de","snapshot":null,"tags":null,"title":"loader by PriyanshuGupta28","updated":"2024-01-22T16:54:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":33,"cssLen":623,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".custom-loader {\n width: 50px;\n height: 50px;\n display: grid;\n}\n\n.custom-loader::before,\n.custom-loader::after {\n content: \"\";\n grid-area: 1/1;\n --c: radial-gradient(farthest-side,#1692f8 92%,rgba(179, 53, 53, 0));\n background: var(--c) 50% 0, \n var(--c) 50% 100%, \n var(--c) 100% 50%, \n var(--c) 0 50%;\n background-size: 12px 12px;\n background-repeat: no-repeat;\n animation: s2 1s infinite;\n}\n\n.custom-loader::before {\n margin: 4px;\n filter: hue-rotate(45deg);\n background-size: 8px 8px;\n animation-timing-function: linear\n}\n\n@keyframes s2 {\n \n 100% {\n transform: rotate(.5turn)\n }\n}"},{"created":"2024-01-22T16:54:33.000Z","isPrivate":0,"projectId":"65b849","snapshot":null,"tags":null,"title":"loader by aadium","updated":"2024-01-22T16:54:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":475,"cssLen":370,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".loader {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.spinner {\n width: 250px;\n height: 150px;\n position: relative;\n animation: rotation 0.75s linear infinite;\n border-radius: 100em;\n}\n\n.path {\n stroke-dasharray: 100;\n stroke-dashoffset: 20;\n stroke-linecap: round;\n}\n\n@keyframes rotation {\n to {\n transform: rotate(360deg);\n }\n}\n"},{"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"}]}},"actionData":null,"errors":null}