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

","css":".typing-indicator {\n width: 60px;\n height: 30px;\n position: relative;\n z-index: 4;\n}\n\n.typing-circle {\n width: 8px;\n height: 8px;\n position: absolute;\n border-radius: 50%;\n background-color: #000;\n left: 15%;\n transform-origin: 50%;\n animation: typing-circle7124 0.5s alternate infinite ease;\n}\n\n@keyframes typing-circle7124 {\n 0% {\n top: 20px;\n height: 5px;\n border-radius: 50px 50px 25px 25px;\n transform: scaleX(1.7);\n }\n\n 40% {\n height: 8px;\n border-radius: 50%;\n transform: scaleX(1);\n }\n\n 100% {\n top: 0%;\n }\n}\n\n.typing-circle:nth-child(2) {\n left: 45%;\n animation-delay: 0.2s;\n}\n\n.typing-circle:nth-child(3) {\n left: auto;\n right: 15%;\n animation-delay: 0.3s;\n}\n\n.typing-shadow {\n width: 5px;\n height: 4px;\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.2);\n position: absolute;\n top: 30px;\n transform-origin: 50%;\n z-index: 3;\n left: 15%;\n filter: blur(1px);\n animation: typing-shadow046 0.5s alternate infinite ease;\n}\n\n@keyframes typing-shadow046 {\n 0% {\n transform: scaleX(1.5);\n }\n\n 40% {\n transform: scaleX(1);\n opacity: 0.7;\n }\n\n 100% {\n transform: scaleX(0.2);\n opacity: 0.4;\n }\n}\n\n.typing-shadow:nth-child(4) {\n left: 45%;\n animation-delay: 0.2s;\n}\n\n.typing-shadow:nth-child(5) {\n left: auto;\n right: 15%;\n animation-delay: 0.3s;\n}"},{"created":"2024-01-22T16:54:23.000Z","isPrivate":0,"projectId":"97f3fb","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":930,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".loader {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n max-width: 6rem;\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n\n.loader:before,\n .loader:after {\n content: \"\";\n position: absolute;\n border-radius: 50%;\n animation: pulsOut 1.8s ease-in-out infinite;\n filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75));\n}\n\n.loader:before {\n width: 100%;\n padding-bottom: 100%;\n box-shadow: inset 0 0 0 1rem #fff;\n animation-name: pulsIn;\n}\n\n.loader:after {\n width: calc(100% - 2rem);\n padding-bottom: calc(100% - 2rem);\n box-shadow: 0 0 0 0 #fff;\n}\n\n@keyframes pulsIn {\n 0% {\n box-shadow: inset 0 0 0 1rem #fff;\n opacity: 1;\n }\n\n 50%, 100% {\n box-shadow: inset 0 0 0 0 #fff;\n opacity: 0;\n }\n}\n\n@keyframes pulsOut {\n 0%, 50% {\n box-shadow: 0 0 0 0 #fff;\n opacity: 0;\n }\n\n 100% {\n box-shadow: 0 0 0 1rem #fff;\n opacity: 1;\n }\n}\n "},{"created":"2024-01-22T16:54:23.000Z","isPrivate":0,"projectId":"94ff14","snapshot":null,"tags":null,"title":"loader by bernethe","updated":"2024-01-22T16:54:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1274,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n border-radius: 50%;\n border-top: 16px rgba(0,0,0,0.75) solid;\n border-left: 16px rgba(0,0,0,0.25) solid;\n border-bottom: 16px rgba(0,0,0,0.25) solid;\n border-right: 16px rgba(0,0,0,0.25) solid;\n animation: spSlices 1s infinite linear;\n}\n\n@keyframes spSlices {\n 0% {\n border-top: 16px rgba(0,0,0,0.75) solid;\n border-right: 16px rgba(0,0,0,0.25) solid;\n border-bottom: 16px rgba(0,0,0,0.25) solid;\n border-left: 16px rgba(0,0,0,0.25) solid;\n }\n\n 25% {\n border-top: 16px rgba(0,0,0,0.25) solid;\n border-right: 16px rgba(0,0,0,0.75) solid;\n border-bottom: 16px rgba(0,0,0,0.25) solid;\n border-left: 16px rgba(0,0,0,0.25) solid;\n }\n\n 50% {\n border-top: 16px rgba(0,0,0,0.25) solid;\n border-right: 16px rgba(0,0,0,0.25) solid;\n border-bottom: 16px rgba(0,0,0,0.75) solid;\n border-left: 16px rgba(0,0,0,0.25) solid;\n }\n\n 75% {\n border-top: 16px rgba(0,0,0,0.25) solid;\n border-right: 16px rgba(0,0,0,0.25) solid;\n border-bottom: 16px rgba(0,0,0,0.25) solid;\n border-left: 16px rgba(0,0,0,0.75) solid;\n }\n\n 100% {\n border-top: 16px rgba(0,0,0,0.75) solid;\n border-right: 16px rgba(0,0,0,0.25) solid;\n border-bottom: 16px rgba(0,0,0,0.25) solid;\n border-left: 16px rgba(0,0,0,0.25) solid;\n }\n}\n\n"},{"created":"2024-01-22T16:54:23.000Z","isPrivate":0,"projectId":"a58406","snapshot":null,"tags":null,"title":"loader by Pradeepsaranbishnoi","updated":"2024-01-22T16:54:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":238,"cssLen":1321,"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 justify-content: center;\n align-items: center;\n height: 100%;\n}\n\n.cube {\n position: relative;\n width: 50px;\n height: 50px;\n transform-style: preserve-3d;\n animation: rotate-cube 2s infinite;\n}\n\n.face1,\n.face2,\n.face3,\n.face4,\n.face5,\n.face6 {\n position: absolute;\n width: 50px;\n height: 50px;\n background-color: transparent;\n border: 2px solid #00BFFF;\n box-sizing: border-box;\n}\n\n.face1 {\n transform: rotateY(0deg) translateZ(25px);\n animation: change-color 2s infinite;\n}\n\n.face2 {\n transform: rotateX(90deg) translateZ(25px);\n}\n\n.face3 {\n transform: rotateY(90deg) translateZ(25px);\n animation: change-color 2s infinite;\n}\n\n.face4 {\n transform: rotateY(180deg) translateZ(25px);\n animation: change-color 2s infinite;\n}\n\n.face5 {\n transform: rotateX(-90deg) translateZ(25px);\n}\n\n.face6 {\n transform: rotateY(-90deg) translateZ(25px);\n animation: change-color 2s infinite;\n}\n\n@keyframes rotate-cube {\n from {\n transform: rotateX(0deg) rotateY(0deg);\n }\n\n to {\n transform: rotateX(360deg) rotateY(360deg);\n }\n}\n\n@keyframes change-color {\n 0% {\n background-color: #00BFFF;\n }\n\n 25% {\n background-color: #FF1493;\n }\n\n 50% {\n background-color: #32CD32;\n }\n\n 75% {\n background-color: #FFA500;\n }\n\n 100% {\n background-color: #00BFFF;\n }\n}\n"},{"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"}]}},"actionData":null,"errors":null}