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

","css":".loader {\n width: 50px;\n height: 50px;\n display: inline-block;\n border: 5px solid rgb(255, 17, 0);\n border-radius: 50%;\n border-top-color: transparent;\n border-bottom-color: transparent;\n animation: rot5 1s infinite;\n}\n\n@keyframes rot5 {\n 0% {\n transform: rotate(0);\n }\n\n 50% {\n transform: rotate(180deg);\n border-top-color: rgb(139, 46, 46);\n border-bottom-color: rgb(243, 92, 33);\n border-right-color: transparent;\n border-left-color: transparent;\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:23.000Z","isPrivate":0,"projectId":"bc31ab","snapshot":null,"tags":null,"title":"loader by mrhyddenn","updated":"2024-01-22T16:54:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":374,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 50px;\n height: 50px;\n border: 5px solid rgb(0,0,0,0.11);\n border-radius: 50%;\n border-top-color: rgb(235, 169, 47);\n border-left-color: rgb(43, 145, 87);\n border-right-color: rgb(20, 102, 226);\n border-bottom-color: rgb(224, 71, 71);\n animation: loader1776 2s linear infinite;\n}\n\n@keyframes loader1776 {\n to {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:23.000Z","isPrivate":0,"projectId":"0566d5","snapshot":null,"tags":null,"title":"loader by JaydipPrajapati1910","updated":"2024-01-22T16:54:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":386,"cssLen":2355,"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

","css":".loader {\n --path: #fff;\n --dot: red;\n --duration: 3s;\n width: 44px;\n height: 44px;\n position: relative;\n}\n\n.loader:before {\n content: '';\n width: 6px;\n height: 6px;\n border-radius: 50%;\n position: absolute;\n display: block;\n background: var(--dot);\n top: 37px;\n left: 19px;\n transform: translate(-18px, -18px);\n animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;\n}\n\n.loader svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.loader svg rect, .loader svg polygon, .loader svg circle {\n fill: none;\n stroke: var(--path);\n stroke-width: 10px;\n stroke-linejoin: round;\n stroke-linecap: round;\n}\n\n.loader svg polygon {\n stroke-dasharray: 145 76 145 76;\n stroke-dashoffset: 0;\n animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;\n}\n\n.loader svg rect {\n stroke-dasharray: 192 64 192 64;\n stroke-dashoffset: 0;\n animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;\n}\n\n.loader svg circle {\n stroke-dasharray: 150 50 150 50;\n stroke-dashoffset: 75;\n animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;\n}\n\n.loader.triangle {\n width: 48px;\n}\n\n.loader.triangle:before {\n left: 21px;\n transform: translate(-10px, -18px);\n animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;\n}\n\n@keyframes pathTriangle {\n 33% {\n stroke-dashoffset: 74;\n }\n\n 66% {\n stroke-dashoffset: 147;\n }\n\n 100% {\n stroke-dashoffset: 221;\n }\n}\n\n@keyframes dotTriangle {\n 33% {\n transform: translate(0, 0);\n }\n\n 66% {\n transform: translate(10px, -18px);\n }\n\n 100% {\n transform: translate(-10px, -18px);\n }\n}\n\n@keyframes pathRect {\n 25% {\n stroke-dashoffset: 64;\n }\n\n 50% {\n stroke-dashoffset: 128;\n }\n\n 75% {\n stroke-dashoffset: 192;\n }\n\n 100% {\n stroke-dashoffset: 256;\n }\n}\n\n@keyframes dotRect {\n 25% {\n transform: translate(0, 0);\n }\n\n 50% {\n transform: translate(18px, -18px);\n }\n\n 75% {\n transform: translate(0, -36px);\n }\n\n 100% {\n transform: translate(-18px, -18px);\n }\n}\n\n@keyframes pathCircle {\n 25% {\n stroke-dashoffset: 125;\n }\n\n 50% {\n stroke-dashoffset: 175;\n }\n\n 75% {\n stroke-dashoffset: 225;\n }\n\n 100% {\n stroke-dashoffset: 275;\n }\n}\n\n.loader {\n display: inline-block;\n margin: 0 16px;\n}\n\n "},{"created":"2024-01-22T16:54:23.000Z","isPrivate":0,"projectId":"1b8749","snapshot":null,"tags":null,"title":"loader by doniaskima","updated":"2024-01-22T16:54:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":941,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 80px;\n height: 40px;\n color: #000;\n border: 2px solid currentColor;\n border-right-color: transparent;\n padding: 3px;\n background: repeating-linear-gradient(90deg,currentColor 0 10px,#0000 0 15px) \n 0/0% no-repeat content-box content-box;\n position: relative;\n animation: l5 2s infinite steps(6);\n}\n\n.loader::before {\n content: \"\";\n position: absolute;\n top: -2px;\n bottom: -2px;\n left: 100%;\n width: 10px;\n background: linear-gradient(\n #0000 calc(50% - 7px),currentColor 0 calc(50% - 5px),\n #0000 0 calc(50% + 5px),currentColor 0 calc(50% + 7px),#0000 0) left /100% 100%,\n linear-gradient(currentColor calc(50% - 5px),#0000 0 calc(50% + 5px),currentColor 0) left /2px 100%,\n linear-gradient(#0000 calc(50% - 5px),currentColor 0 calc(50% + 5px),#0000 0) right/2px 100%;\n background-repeat: no-repeat;\n}\n\n@keyframes l5 {\n 100% {\n background-size: 120%\n }\n}"},{"created":"2024-01-22T16:54:23.000Z","isPrivate":0,"projectId":"e2d17d","snapshot":null,"tags":null,"title":"loader by Rkyz","updated":"2024-01-22T16:54:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":123,"cssLen":1496,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

- -

","css":".loader {\n height: 50px;\n width: 20rem;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 15px;\n}\n\n.dot-two {\n background-color: black;\n height: 30px;\n width: 30px;\n border-radius: 50%;\n padding: 4px;\n color: white;\n}\n\n.dot-one,\n.dot-three {\n background-color: black;\n height: 30px;\n width: 20px;\n border-radius: 50%;\n text-align: center;\n animation: flap-wings 1s infinite ease-in-out;\n}\n\n.dot-two {\n position: relative;\n height: 30px;\n width: 30px;\n border-radius: 50%;\n background-color: black;\n animation: flap-wings 1s infinite ease-in-out;\n animation-delay: 0.1s;\n}\n\n.dot-two::before,\n.dot-two::after {\n content: \"\";\n position: absolute;\n background-color: black;\n}\n\n.dot-two::before {\n height: 20px;\n width: 10px;\n bottom: 20px;\n left: 1px;\n border-radius: 50% 50% 0 0;\n transform: rotate(-20deg);\n}\n\n.dot-two::after {\n height: 20px;\n width: 10px;\n bottom: 20px;\n left: 19px;\n transform: rotate(20deg);\n border-radius: 50% 50% 0 0;\n}\n\n.dot-one::before,\n.dot-one::after,\n.dot-three::before,\n.dot-three::after {\n content: \"\";\n position: absolute;\n background-color: white;\n}\n\n.dot-one::before,\n.dot-three::before {\n height: 30px;\n width: 20px;\n top: 10px;\n left: 0;\n background-color: #e8e8e8;\n /*chnage this if u need dark mode to #212121 if need light mode #e8e8e8*/\n border-radius: 50% 50% 0 0;\n}\n\n@keyframes flap-wings {\n 0%,\n 100% {\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(-20px);\n }\n}"},{"created":"2024-01-22T16:54:23.000Z","isPrivate":0,"projectId":"05be90","snapshot":null,"tags":null,"title":"loader by darrylnoakes","updated":"2024-01-22T16:54:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1137,"cssLen":1011,"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

","css":".loader {\n --icon-count: 3;\n --inner-height: 4em;\n --ratio: 2/3;\n /* Customizable */\n --period: 1s;\n /* Customizable */\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--inner-height);\n width: calc(var(--inner-height) * var(--ratio) * var(--icon-count));\n}\n\n.loader .icon {\n width: calc(100% / var(--icon-count));\n height: calc(100% * var(--ratio));\n animation: loader-bounce02 var(--period) infinite linear;\n}\n\n/*\n * animation delay = (n - 1) / steps * period\n */\n\n.loader .icon:nth-of-type(2) {\n animation-delay: calc(1 / 5 * var(--period));\n}\n\n.loader .icon:nth-of-type(3) {\n animation-delay: calc(2 / 5 * var(--period));\n}\n\n@keyframes loader-bounce02 {\n 20% {\n /* Raise */\n transform: translateY(calc(-50% * (1 - var(--ratio))));\n }\n\n 40% {\n /* Lower */\n transform: translateY(calc(50% * (1 - var(--ratio))));\n }\n\n 60% {\n /* Keep centered */\n transform: translateY(0);\n }\n\n 80% {\n /* Keep centered */\n transform: translateY(0);\n }\n}"},{"created":"2024-01-22T16:54:23.000Z","isPrivate":0,"projectId":"ab9677","snapshot":null,"tags":null,"title":"loader by gagan-gv","updated":"2024-01-22T16:54:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":147,"cssLen":760,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n L\n O\n A\n D\n I\n N\n G\n

","css":".spinner {\n height: 50px;\n width: max-content;\n font-size: 18px;\n font-weight: 600;\n font-family: monospace;\n letter-spacing: 1em;\n color: #f5f5f5;\n filter: drop-shadow(0 0 10px);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.spinner span {\n animation: loading6454 1.75s ease infinite;\n}\n\n.spinner span:nth-child(2) {\n animation-delay: 0.25s;\n}\n\n.spinner span:nth-child(3) {\n animation-delay: 0.5s;\n}\n\n.spinner span:nth-child(4) {\n animation-delay: 0.75s;\n}\n\n.spinner span:nth-child(5) {\n animation-delay: 1s;\n}\n\n.spinner span:nth-child(6) {\n animation-delay: 1.25s;\n}\n\n.spinner span:nth-child(7) {\n animation-delay: 1.5s;\n}\n\n@keyframes loading6454 {\n 0%, 100% {\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(-10px);\n }\n}"},{"created":"2024-01-22T16:54:23.000Z","isPrivate":0,"projectId":"68c61f","snapshot":null,"tags":null,"title":"loader by elijahgummer","updated":"2024-01-22T16:54:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":276,"cssLen":867,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".middle {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n position: absolute;\n}\n\n.bar {\n width: 10px;\n height: 70px;\n display: inline-block;\n transform-origin: bottom center;\n border-top-right-radius: 20px;\n border-top-left-radius: 20px;\n box-shadow: 5px 10px 20px inset rgba(52, 152, 219, 0.8);\n animation: loader 1.2s linear infinite;\n}\n\n.bar1 {\n animation-delay: 0.1s;\n}\n.bar2 {\n animation-delay: 0.2s;\n}\n.bar3 {\n animation-delay: 0.3s;\n}\n.bar4 {\n animation-delay: 0.4s;\n}\n.bar5 {\n animation-delay: 0.5s;\n}\n.bar6 {\n animation-delay: 0.6s;\n}\n.bar7 {\n animation-delay: 0.7s;\n}\n.bar8 {\n animation-delay: 0.8s;\n}\n\n@keyframes loader {\n 0% {\n transform: scaleY(0.1);\n background: transparent;\n }\n 50% {\n transform: scaleY(1);\n background: #3498db;\n }\n 100% {\n transform: scaleY(0.1);\n background: transparent;\n }\n}\n"},{"created":"2024-01-22T16:54:23.000Z","isPrivate":0,"projectId":"b45257","snapshot":null,"tags":null,"title":"loader by gagan-gv","updated":"2024-01-22T16:54:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":727,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner {\n border: 0 solid transparent;\n border-radius: 50%;\n width: 50px;\n height: 50px;\n}\n\n.loader {\n width: inherit;\n height: inherit;\n position: absolute;\n}\n\n.loader::before,\n.loader::after {\n content: '';\n border: 3px solid #505065;\n border-radius: 50%;\n width: inherit;\n height: inherit;\n position: absolute;\n opacity: 1;\n}\n\n.l1::before,\n.l1::after {\n animation: clockwiseZ 2.5s infinite;\n}\n\n.l2::after,\n.l2::before {\n animation: anticlockwiseZ 2.5s infinite;\n}\n\n@keyframes clockwiseZ {\n 0%, 100% {\n transform: rotateY(0);\n }\n\n 50% {\n transform: rotateY(180deg) skew(-10deg, -5deg);\n }\n}\n\n@keyframes anticlockwiseZ {\n 0%, 100% {\n transform: rotateX(0);\n }\n\n 50% {\n transform: rotateX(-180deg) skew(10deg, 5deg);\n }\n}"},{"created":"2024-01-22T16:54:23.000Z","isPrivate":0,"projectId":"73e0b8","snapshot":null,"tags":null,"title":"loader by 00Kubi","updated":"2024-01-22T16:54:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2502,"cssLen":4869,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":"css