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

\n\t

","css":".centered {\n width: 400px;\n height: 400px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%,-50%);\n background: rgb(33 33 33 / var(--tw-bg-opacity))!important;\n ;\n\tfilter: blur(10px) contrast(20);\n}\n\n.blob-1,.blob-2 {\n width: 70px;\n height: 70px;\n position: absolute;\n background: #fff;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%,-50%);\n}\n\n.blob-1 {\n left: 20%;\n animation: osc-l 2.5s ease infinite;\n}\n\n.blob-2 {\n left: 80%;\n animation: osc-r 2.5s ease infinite;\n background: #0ff;\n}\n\n@keyframes osc-l {\n 0% {\n left: 20%;\n }\n\n 50% {\n left: 50%;\n }\n\n 100% {\n left: 20%;\n }\n}\n\n@keyframes osc-r {\n 0% {\n left: 80%;\n }\n\n 50% {\n left: 50%;\n }\n\n 100% {\n left: 80%;\n }\n}"},{"created":"2024-01-22T16:54:24.000Z","isPrivate":0,"projectId":"4a4ec1","snapshot":null,"tags":null,"title":"loader by csemszepp","updated":"2024-01-22T16:54:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":52,"cssLen":4163,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\r\n

","css":".ball {\n position: absolute;\n width: 20px;\n height: 20px;\n top: calc(50% - 25px);\n animation: bounce 3s cubic-bezier(1, 0, 0, 1) infinite;\n}\n\n.ball:before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background: #fff;\n border-radius: 100%;\n animation: bounce2 3s ease-in-out infinite;\n transform-origin: bottom;\n}\n\n@keyframes bounce2 {\n 0% {\n transform: scaleY(0.75) scaleX(1.25);\n }\n\n 14.25% {\n transform: scaleY(1);\n }\n\n 28.5% {\n transform: scaleY(0.75) scaleX(1.25);\n }\n\n 42.75% {\n transform: scaleY(1);\n }\n\n 57% {\n transform: scaleY(0.75) scaleX(1.25);\n }\n\n 71.25% {\n transform: scaleY(1);\n }\n\n 80% {\n transform: scaleY(0.75) scaleX(1.25);\n }\n\n 90% {\n transform: scaleY(1);\n }\n\n 100% {\n transform: scaleY(0.75) scaleX(1.25);\n }\n}\n\n@keyframes bounce {\n 0% {\n transform: translateY(0px);\n }\n\n 14.25% {\n transform: translateY(-150px);\n }\n\n 28.5% {\n transform: translateY(-7.5px);\n }\n\n 42.75% {\n transform: translateY(-170px);\n }\n\n 57% {\n transform: translateY(-27.5px);\n }\n\n 71.25% {\n transform: translateY(-180px);\n }\n\n 80% {\n transform: translateY(-35px);\n }\n\n 90% {\n transform: translateY(-200px);\n }\n\n 100% {\n transform: translateY(0px);\n }\n}\n\n.shape {\n width: 300px;\n height: 300px;\n position: absolute;\n left: calc(50% - 150px);\n top: calc(50% - 75px);\n animation: shapes2 3s ease-in-out infinite;\n}\n\n@keyframes shapes2 {\n 0% {\n transform: rotate(90deg) translateX(-20px);\n }\n\n 14.25% {\n transform: rotate(90deg) translateX(-20px);\n }\n\n 28.5% {\n transform: rotate(135deg);\n }\n\n 42.75% {\n transform: rotate(162deg);\n }\n\n 57% {\n transform: rotate(180deg);\n }\n\n 71.25% {\n transform: rotate(245.5deg);\n }\n\n 80% {\n transform: rotate(336.5deg);\n }\n\n 100% {\n transform: rotate(90deg) translateX(-20px);\n }\n}\n\n.shape:before, .shape:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n background: #fdb20f;\n animation: shapes 3s ease-in-out infinite;\n clip-path: polygon(20% 21%, 50% 8%, 80% 21%, 90% 50%, 80% 80%, 50% 91%, 21% 79%, 8% 51%);\n}\n\n.shape:after {\n width: 90%;\n height: 90%;\n background: repeating-linear-gradient(to right, #fff, #fff 2px, #fdb20f 2px, #fdb20f 5px);\n top: 5%;\n left: 5%;\n background-position: 20px 30px;\n}\n\n@keyframes shapes {\n 0% {\n clip-path: polygon(91% 50%, 91% 50%, 29% 86%, 30% 86%, 30% 86%, 30% 86%, 30% 14%, 30% 14%);\n background-position: 20px 30px;\n }\n\n 14.25% {\n clip-path: polygon(91% 50%, 91% 50%, 29% 86%, 30% 86%, 30% 86%, 30% 86%, 30% 14%, 30% 14%);\n background-position: 120px 30px;\n }\n\n 28.5% {\n clip-path: polygon(91% 50%, 91% 50%, 50% 91%, 50% 91%, 50% 91%, 50% 91%, 9% 50%, 50% 9%);\n background-position: 20px 30px;\n }\n\n 42.75% {\n clip-path: polygon(63% 11%, 91% 50%, 63% 89%, 63% 89%, 63% 89%, 63% 89%, 16% 74%, 16% 26%);\n background-position: -120px 30px;\n }\n\n 57% {\n clip-path: polygon(29% 14%, 71% 14%, 91% 50%, 91% 50%, 71% 86%, 71% 86%, 30% 86%, 9% 50%);\n background-position: 20px 30px;\n }\n\n 71.25% {\n clip-path: polygon(13% 32%, 41% 10%, 76% 18%, 91% 50%, 76% 83%, 76% 83%, 41% 90%, 13% 68%);\n background-position: 120px 30px;\n }\n\n 80% {\n clip-path: polygon(20% 21%, 50% 8%, 80% 21%, 90% 50%, 80% 80%, 50% 91%, 21% 79%, 8% 51%);\n background-position: 20px 30px;\n }\n\n 83% {\n clip-path: polygon(13% 32%, 41% 10%, 76% 18%, 91% 50%, 76% 83%, 76% 83%, 41% 90%, 13% 68%);\n background-position: 20px 30px;\n }\n\n 86% {\n clip-path: polygon(29% 14%, 71% 14%, 91% 50%, 91% 50%, 71% 86%, 71% 86%, 30% 86%, 9% 50%);\n background-position: 20px 30px;\n }\n\n 89% {\n clip-path: polygon(63% 11%, 91% 50%, 63% 89%, 63% 89%, 63% 89%, 63% 89%, 16% 74%, 16% 26%);\n background-position: 20px 30px;\n }\n\n 92% {\n clip-path: polygon(91% 50%, 91% 50%, 50% 91%, 50% 91%, 50% 91%, 50% 91%, 9% 50%, 50% 9%);\n }\n\n 95% {\n clip-path: polygon(91% 50%, 91% 50%, 29% 86%, 30% 86%, 30% 86%, 30% 86%, 30% 14%, 30% 14%);\n }\n\n 100% {\n clip-path: polygon(91% 50%, 91% 50%, 29% 86%, 30% 86%, 30% 86%, 30% 86%, 30% 14%, 30% 14%);\n }\n}"},{"created":"2024-01-22T16:54:24.000Z","isPrivate":0,"projectId":"155ee3","snapshot":null,"tags":null,"title":"loader by bhaveshxrawat","updated":"2024-01-22T16:54:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":60,"cssLen":301,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".ball {\n position: relative;\n height: 15px;\n width: 15px;\n background-color: rgb(255, 44, 44);\n border-radius: 50%;\n animation: bounce 0.5s ease-in-out infinite both;\n}\n\n@keyframes bounce {\n 0%, 100% {\n transform: translate(0px, 0px);\n }\n\n 50% {\n transform: translate(0px, 50px) scale(1, 0.77);\n }\n}"},{"created":"2024-01-22T16:54:24.000Z","isPrivate":0,"projectId":"dffa35","snapshot":null,"tags":null,"title":"loader by lesimpleliott","updated":"2024-01-22T16:54:25.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":550,"cssLen":3858,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader__balls {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 15px;\n}\n.loader__balls__group {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: center;\n position: relative;\n height: 100px;\n width: 40px;\n}\n.ball {\n height: 30px;\n width: 30px;\n border-radius: 15px;\n position: absolute;\n transform-origin: bottom;\n}\n\n/* ANIMATION BALL 1*/\n.loader__balls__group :nth-child(1) {\n background-color: #99e2d0;\n animation-name: jumpinBallAnimation1;\n animation-duration: 1000ms;\n animation-iteration-count: infinite;\n}\n@keyframes jumpinBallAnimation1 {\n 0% {\n transform: translateY(0) scale(1, 1);\n }\n 10% {\n transform: translateY(0) scale(1.3, 0.8);\n }\n 11% {\n transform: translateY(0) scale(0.7, 1.2);\n animation-timing-function: cubic-bezier(0, 0, 0.5, 1);\n }\n 39% {\n transform: translateY(-75px) scale(1);\n animation-timing-function: cubic-bezier(0, 0, 0.5, 1);\n }\n 40% {\n transform: translateY(-75px) scale(1);\n }\n 41% {\n transform: translateY(-75px) scale(1);\n animation-timing-function: cubic-bezier(1, 0, 1, 0);\n }\n 69% {\n transform: translateY(0px) scale(1, 1);\n animation-timing-function: cubic-bezier(1, 0, 1, 0);\n }\n 70% {\n transform: translateY(0) scale(1.5, 0.4);\n }\n 80% {\n transform: translateY(0) scale(0.8, 1.2);\n }\n 90% {\n transform: translateY(0) scale(1.1, 0.8);\n }\n 100% {\n transform: translateY(0) scale(1, 1);\n }\n}\n\n/* ANIMATION BALL 2*/\n.loader__balls__group :nth-child(2) {\n background-color: #ff79da;\n animation-name: jumpinBallAnimation2;\n animation-duration: 1000ms;\n animation-iteration-count: infinite;\n}\n@keyframes jumpinBallAnimation2 {\n 0% {\n transform: translateY(0) scale(1, 1);\n }\n 10% {\n transform: translateY(0) scale(1.3, 0.8);\n }\n 11% {\n transform: translateY(0) scale(0.7, 1.2);\n animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);\n }\n 39% {\n transform: translateY(-75px) scale(1);\n animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);\n }\n 40% {\n transform: translateY(-75px) scale(1);\n }\n 41% {\n transform: translateY(-75px) scale(1);\n animation-timing-function: cubic-bezier(1, 0, 1, 0.5);\n }\n 69% {\n transform: translateY(0px) scale(1, 1);\n animation-timing-function: cubic-bezier(1, 0, 1, 0.5);\n }\n 70% {\n transform: translateY(0) scale(1.5, 0.4);\n }\n 80% {\n transform: translateY(0) scale(0.8, 1.2);\n }\n 90% {\n transform: translateY(0) scale(1.1, 0.8);\n }\n 100% {\n transform: translateY(0) scale(1, 1);\n }\n}\n\n/* ANIMATION BALL 3*/\n.loader__balls__group :nth-child(3) {\n background-color: #9356dc;\n animation-name: jumpinBallAnimation3;\n animation-duration: 1000ms;\n animation-iteration-count: infinite;\n}\n@keyframes jumpinBallAnimation3 {\n 0% {\n transform: translateY(0) scale(1, 1);\n }\n 10% {\n transform: translateY(0) scale(1.3, 0.8);\n }\n 11% {\n transform: translateY(0) scale(0.7, 1.2);\n animation-timing-function: cubic-bezier(0, 1, 0.5, 1);\n }\n 39% {\n transform: translateY(-75px) scale(1);\n animation-timing-function: cubic-bezier(0, 1, 0.5, 1);\n }\n 40% {\n transform: translateY(-75px) scale(1);\n }\n 41% {\n transform: translateY(-75px) scale(1);\n animation-timing-function: cubic-bezier(1, 0, 1, 1);\n }\n 69% {\n transform: translateY(0px) scale(1, 1);\n animation-timing-function: cubic-bezier(1, 0, 1, 1);\n }\n 70% {\n transform: translateY(0) scale(1.5, 0.4);\n }\n 80% {\n transform: translateY(0) scale(0.8, 1.2);\n }\n 90% {\n transform: translateY(0) scale(1.1, 0.8);\n }\n 100% {\n transform: translateY(0) scale(1, 1);\n }\n}\n.loader__balls__group .item1 {\n animation-delay: 0ms;\n}\n.loader__balls__group .item2 {\n animation-delay: 100ms;\n}\n.loader__balls__group .item3 {\n animation-delay: 200ms;\n}\n"},{"created":"2024-01-22T16:54:23.000Z","isPrivate":0,"projectId":"0fd7b9","snapshot":null,"tags":null,"title":"loader by Charly-T","updated":"2024-01-22T16:54:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":177,"cssLen":1052,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".loader {\n --moon-r: 0.7em;\n --planet-r: 1.75em;\n --planet-stroke-width: 4;\n --center: 50;\n --moon-max: 80;\n --moon-min: 20;\n --animation-duration: 4000ms;\n --planet-stroke: black;\n --planet-fill: white;\n --moon-fill: #fecb00;\n width: 7em;\n}\n\n.planet {\n cx: var(--center);\n cy: var(--center);\n r: var(--planet-r);\n fill: var(--planet-fill);\n stroke: var(--planet-stroke);\n stroke-width: var(--planet-stroke-width);\n}\n\n.moon {\n fill: var(--moon-fill);\n r: var(--moon-r);\n}\n\n.moon-front {\n animation: orbit0234 var(--animation-duration) ease-in-out infinite,\n orbit-front var(--animation-duration) linear infinite;\n}\n\n.moon-back {\n animation: orbit0234 var(--animation-duration) ease-in-out infinite;\n}\n\n@keyframes orbit0234 {\n 0% {\n cx: var(--moon-max);\n cy: var(--moon-min);\n }\n\n 50% {\n cx: var(--moon-min);\n cy: var(--moon-max);\n }\n\n 100% {\n cx: var(--moon-max);\n cy: var(--moon-min);\n }\n}\n\n@keyframes orbit-front {\n 0% {\n opacity: 0;\n }\n\n 49% {\n opacity: 0;\n }\n\n 50% {\n opacity: 1;\n }\n}\n"},{"created":"2024-01-22T16:54:23.000Z","isPrivate":0,"projectId":"32e73d","snapshot":null,"tags":null,"title":"loader by adamgiebl","updated":"2024-01-22T16:54:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":113,"cssLen":1166,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".spinner {\n width: 80px;\n height: 80px;\n --clr: rgb(127, 207, 255);\n --clr-alpha: rgb(127, 207, 255, .1);\n animation: spinner 2s infinite linear;\n transform-style: preserve-3d;\n}\n\n.spinner > div {\n background-color: var(--clr-alpha);\n height: 100%;\n position: absolute;\n width: 100%;\n border: 5px solid var(--clr);\n}\n\n.spinner div:nth-of-type(1) {\n transform: translateZ(-40px) rotateY(180deg);\n}\n\n.spinner div:nth-of-type(2) {\n transform: rotateY(-270deg) translateX(50%);\n transform-origin: top right;\n}\n\n.spinner div:nth-of-type(3) {\n transform: rotateY(270deg) translateX(-50%);\n transform-origin: center left;\n}\n\n.spinner div:nth-of-type(4) {\n transform: rotateX(90deg) translateY(-50%);\n transform-origin: top center;\n}\n\n.spinner div:nth-of-type(5) {\n transform: rotateX(-90deg) translateY(50%);\n transform-origin: bottom center;\n}\n\n.spinner div:nth-of-type(6) {\n transform: translateZ(40px);\n}\n\n@keyframes spinner {\n 0% {\n transform: rotate(0deg) rotateX(0deg) rotateY(0deg);\n }\n\n 50% {\n transform: rotate(180deg) rotateX(180deg) rotateY(180deg);\n }\n\n 100% {\n transform: rotate(360deg) rotateX(360deg) rotateY(360deg);\n }\n}"},{"created":"2024-01-22T16:54:23.000Z","isPrivate":0,"projectId":"6493d5","snapshot":null,"tags":null,"title":"loader by G4b413l","updated":"2024-01-22T16:54:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":34,"cssLen":2794,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".chaotic-orbit {\n --uib-size: 25px;\n --uib-speed: 1.5s;\n --uib-color: black;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--uib-size);\n width: var(--uib-size);\n animation: rotate936 calc(var(--uib-speed) * 1.667) infinite linear;\n}\n\n.chaotic-orbit::before,\n.chaotic-orbit::after {\n content: '';\n position: absolute;\n height: 60%;\n width: 60%;\n border-radius: 50%;\n background-color: var(--uib-color);\n will-change: transform;\n flex-shrink: 0;\n}\n\n.chaotic-orbit::before {\n animation: orbit var(--uib-speed) linear infinite;\n}\n\n.chaotic-orbit::after {\n animation: orbit var(--uib-speed) linear calc(var(--uib-speed) / -2)\n infinite;\n}\n\n@keyframes rotate936 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes orbit {\n 0% {\n transform: translate(calc(var(--uib-size) * 0.5)) scale(0.73684);\n opacity: 0.65;\n }\n\n 5% {\n transform: translate(calc(var(--uib-size) * 0.4)) scale(0.684208);\n opacity: 0.58;\n }\n\n 10% {\n transform: translate(calc(var(--uib-size) * 0.3)) scale(0.631576);\n opacity: 0.51;\n }\n\n 15% {\n transform: translate(calc(var(--uib-size) * 0.2)) scale(0.578944);\n opacity: 0.44;\n }\n\n 20% {\n transform: translate(calc(var(--uib-size) * 0.1)) scale(0.526312);\n opacity: 0.37;\n }\n\n 25% {\n transform: translate(0%) scale(0.47368);\n opacity: 0.3;\n }\n\n 30% {\n transform: translate(calc(var(--uib-size) * -0.1)) scale(0.526312);\n opacity: 0.37;\n }\n\n 35% {\n transform: translate(calc(var(--uib-size) * -0.2)) scale(0.578944);\n opacity: 0.44;\n }\n\n 40% {\n transform: translate(calc(var(--uib-size) * -0.3)) scale(0.631576);\n opacity: 0.51;\n }\n\n 45% {\n transform: translate(calc(var(--uib-size) * -0.4)) scale(0.684208);\n opacity: 0.58;\n }\n\n 50% {\n transform: translate(calc(var(--uib-size) * -0.5)) scale(0.73684);\n opacity: 0.65;\n }\n\n 55% {\n transform: translate(calc(var(--uib-size) * -0.4)) scale(0.789472);\n opacity: 0.72;\n }\n\n 60% {\n transform: translate(calc(var(--uib-size) * -0.3)) scale(0.842104);\n opacity: 0.79;\n }\n\n 65% {\n transform: translate(calc(var(--uib-size) * -0.2)) scale(0.894736);\n opacity: 0.86;\n }\n\n 70% {\n transform: translate(calc(var(--uib-size) * -0.1)) scale(0.947368);\n opacity: 0.93;\n }\n\n 75% {\n transform: translate(0%) scale(1);\n opacity: 1;\n }\n\n 80% {\n transform: translate(calc(var(--uib-size) * 0.1)) scale(0.947368);\n opacity: 0.93;\n }\n\n 85% {\n transform: translate(calc(var(--uib-size) * 0.2)) scale(0.894736);\n opacity: 0.86;\n }\n\n 90% {\n transform: translate(calc(var(--uib-size) * 0.3)) scale(0.842104);\n opacity: 0.79;\n }\n\n 95% {\n transform: translate(calc(var(--uib-size) * 0.4)) scale(0.789472);\n opacity: 0.72;\n }\n\n 100% {\n transform: translate(calc(var(--uib-size) * 0.5)) scale(0.73684);\n opacity: 0.65;\n }\n}\n\n"},{"created":"2024-01-22T16:54:23.000Z","isPrivate":0,"projectId":"c31e3b","snapshot":null,"tags":null,"title":"loader by omar-alghaish","updated":"2024-01-22T16:54:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":122,"cssLen":1023,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader-1 {\n width: 100px;\n height: 100px;\n border-radius: 50%;\n border: 5px solid rgb(218, 203, 4);\n border-left-color: transparent;\n animation: animate_681 3s linear infinite;\n position: relative;\n}\n\n.loader-2 {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n border: 5px solid rgb(0, 119, 255);\n border-top-color: transparent;\n animation: animate_6810 .9s linear infinite;\n position: absolute;\n margin: 5px;\n}\n\n.loader-3 {\n width: 60px;\n height: 60px;\n border-radius: 50%;\n border: 5px solid rgb(30, 255, 0);\n border-right-color: transparent;\n animation: animate_681 2s linear infinite;\n position: absolute;\n margin: 15px;\n}\n\n.loader-4 {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n border: 5px solid rgb(194, 3, 92);\n border-bottom-color: transparent;\n animation: animate_6810 .7s linear infinite;\n position: absolute;\n margin: 25px;\n}\n\n@keyframes animate_6810 {\n 0% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes animate_681 {\n 0% {\n transform: rotate(-360deg);\n }\n}"},{"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"}]}},"actionData":null,"errors":null}