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

","css":".anim-box {\n width: 200px;\n height: 200px;\n border: 5px solid #333;\n margin: 100px auto;\n position: relative;\n}\n\n.anim-interieur {\n width: 100px;\n height: 50px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n /* background-color: orange; */\n text-align: center;\n}\n\n.rect {\n background-color: #333;\n display: inline-block;\n height: 60px;\n width: 6px;\n margin: 0px 1px;\n animation: etire 1.2s infinite ease-in-out;\n}\n\n@keyframes etire {\n 0% {\n transform: scaleY(0.4);\n }\n\n 20% {\n transform: scaleY(1);\n }\n\n 40% {\n transform: scaleY(0.4);\n }\n\n 100% {\n transform: scaleY(0.4);\n }\n}\n\n.rect2 {\n animation-delay: -1.1s;\n}\n\n.rect3 {\n animation-delay: -1s;\n}\n\n.rect4 {\n animation-delay: -0.9s;\n}\n\n.rect5 {\n animation-delay: -0.8s;\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"604f62","snapshot":null,"tags":null,"title":"loader by davidhbt","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":339,"cssLen":987,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"@keyframes bounce {\n 0%, 80%, 100% {\n transform: scale(0);\n opacity: 0;\n }\n\n 40% {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n.loader {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n width: 100px;\n height: 100px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.circle {\n width: 20px;\n height: 20px;\n background-color: rgb(83, 82, 82);\n border-radius: 50%;\n margin: 2px;\n animation: bounce 1.2s infinite ease-in-out;\n}\n\n.circle:nth-child(2) {\n animation-delay: -0.1s;\n}\n\n.circle:nth-child(3) {\n animation-delay: -0.2s;\n}\n\n.circle:nth-child(4) {\n animation-delay: -0.3s;\n}\n\n.circle:nth-child(5) {\n animation-delay: -0.4s;\n}\n\n.circle:nth-child(6) {\n animation-delay: -0.5s;\n}\n\n.circle:nth-child(7) {\n animation-delay: -0.6s;\n}\n\n.circle:nth-child(8) {\n animation-delay: -0.7s;\n}\n\n.circle:nth-child(9) {\n animation-delay: -0.8s;\n}\n\n.circle:nth-child(10) {\n animation-delay: -0.9s;\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"361be5","snapshot":null,"tags":null,"title":"loader by Cybercom682","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":53,"cssLen":1508,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n height: 150px;\n width: 150px;\n border-radius: 50%;\n position: relative;\n}\n\n.loader::before {\n content: \"\";\n height: 100%;\n width: 100%;\n border: 1px solid black;\n border-radius: 50%;\n position: absolute;\n animation: doitreverse 4s infinite;\n}\n\n.loader::after {\n content: \"\";\n height: 100%;\n width: 100%;\n border: 1px solid black;\n border-radius: 50%;\n position: absolute;\n animation: doit 4s infinite;\n}\n\n@keyframes doit {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n border-radius: 20% 50%;\n transform: scale(1.25);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes doitreverse {\n 0% {\n transform: rotate(360deg);\n }\n\n 50% {\n border-radius: 50% 20%;\n transform: rotate(180deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}\n\n.eye {\n height: 50%;\n width: 50%;\n border-radius: 50%;\n border: 1px solid black;\n background-color: rgb(85, 0, 128);\n position: absolute;\n left: 25%;\n top: 25%;\n animation: showme 4s infinite;\n}\n\n.eye::before {\n content: \"\";\n height: 20%;\n width: 20%;\n border-radius: 50%;\n background-color: white;\n position: absolute;\n top: 25%;\n left: 50%;\n animation: showme 4s infinite;\n}\n\n.eye::after {\n content: \"\";\n height: 10%;\n width: 10%;\n border-radius: 50%;\n background-color: white;\n position: absolute;\n top: 60%;\n left: 50%;\n animation: showme 4s infinite;\n}\n\n@keyframes showme {\n 0% {\n transform: scale(0.3);\n }\n\n 50% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(0.3);\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"630098","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":62,"cssLen":306,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader-pulse {\n width: 64px;\n height: 64px;\n border-radius: 50%;\n background: #8f44fd;\n animation: load-pulse 0.85s infinite linear;\n}\n\n@keyframes load-pulse {\n 0% {\n transform: scale(0.15);\n opacity: 0;\n }\n\n 50% {\n opacity: 1;\n }\n\n 100% {\n transform: scale(1);\n opacity: 0;\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"1c26e0","snapshot":null,"tags":null,"title":"loader by carlosepcc","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2265,"cssLen":1598,"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

","css":"/* Butterfly loader created by WerlynDev in Uiverse.io*/\n\n.loader {\n --sizeLoader: 60px;\n --sizeLoaderHalf: calc(var(--sizeLoader) / 2);\n --stepBtf: calc(var(--sizeLoader) / 10);\n display: flex;\n position: relative;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: var(--sizeLoader);\n height: var(--sizeLoader);\n background: radial-gradient(#f1f8,transparent 30%);\n}\n\n.loader:hover {\n cursor: progress;\n}\n\n.loader[anim1] {\n animation: anim1 0.3s alternate ease-in-out infinite;\n}\n\n.loader:not([anim1]) {\n right: var(--sizeLoaderHalf);\n transform-origin: center right;\n animation: moveAround 2s linear infinite;\n}\n\n.loader[showShadow] {\n filter: drop-shadow(0 10px 10px #060606de);\n}\n\n.loader svg:nth-child(1) {\n position: relative;\n height: 100%;\n left: 2%;\n transform-origin: center right;\n animation: wing 0.2s ease-in-out infinite;\n}\n\n.loader svg:nth-child(2) {\n height: 50%;\n}\n\n.loader svg:nth-child(3) {\n position: relative;\n height: 100%;\n left: -2%;\n transform-origin: center left;\n animation: wing 0.25s ease-in-out infinite;\n}\n\n@keyframes wing {\n 0% {\n transform: rotateY(0deg);\n }\n\n 50% {\n transform: rotateY(60deg);\n }\n\n 100% {\n transform: rotateY(0deg);\n }\n}\n\n@keyframes moveAround {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes anim1 {\n from {\n transform: translateY(0px);\n }\n\n to {\n transform: translateY(var(--stepBtf));\n }\n}\n\n/* @media (prefers-color-scheme: dark) {\n .loader[showShadow]{\n filter: drop-shadow(0 10px 10px #dbdbdbde);\n }\n} */"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"bcf599","snapshot":null,"tags":null,"title":"loader by Admin12121","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":352,"cssLen":3913,"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

","css":".content {\n width: 300px;\n height: 300px;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.content .planet {\n width: 65%;\n height: 65%;\n background-color: #546c8c;\n border-radius: 100%;\n position: absolute;\n display: flex;\n align-items: center;\n transform-origin: center center;\n box-shadow: inset 2px -10px 0px rgba(0, 0, 0, 0.1);\n animation: planet 5s ease infinite alternate;\n /* planet ring */\n /* to cover the back of the ring */\n /* planet spots */\n}\n\n@keyframes planet {\n 0% {\n transform: rotate(10deg);\n }\n\n 100% {\n transform: rotate(-10deg);\n }\n}\n\n.content .planet .ring {\n position: absolute;\n width: 300px;\n height: 300px;\n border-radius: 100%;\n background-color: #bacbd9;\n display: flex;\n align-items: center;\n justify-content: center;\n transform-origin: 33% center;\n box-shadow: 2px -10px 0px rgba(0, 0, 0, 0.1), inset -5px -10px 0px rgba(0, 0, 0, 0.1);\n animation: ring 3s ease infinite;\n /* small ball */\n /* inner ring */\n}\n\n@keyframes ring {\n 0% {\n transform: rotateX(110deg) rotateZ(0deg) translate(-50px, 5px);\n }\n\n 100% {\n transform: rotateX(110deg) rotateZ(360deg) translate(-50px, 5px);\n }\n}\n\n.content .planet .ring:before {\n content: \"\";\n position: absolute;\n width: 10px;\n height: 30px;\n border-radius: 100%;\n background-color: #7ea1bf;\n z-index: 2;\n left: calc(0px - 5px);\n box-shadow: inset -3px 3px 0px rgba(0, 0, 0, 0.2);\n}\n\n.content .planet .ring:after {\n content: \"\";\n position: absolute;\n width: 240px;\n height: 240px;\n border-radius: 100%;\n background-color: #7ea1bf;\n box-shadow: inset 2px -10px 0px rgba(0, 0, 0, 0.1);\n}\n\n.content .planet .cover-ring {\n position: absolute;\n width: 100%;\n height: 50%;\n border-bottom-left-radius: 80%;\n border-bottom-right-radius: 80%;\n border-top-left-radius: 100px;\n border-top-right-radius: 100px;\n transform: translate(0px, -17px);\n background-color: #546c8c;\n z-index: 2;\n box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.1);\n}\n\n.content .planet .spots {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n z-index: 2;\n}\n\n.content .planet .spots span {\n width: 30px;\n height: 30px;\n background-color: #3c4359;\n position: absolute;\n border-radius: 100%;\n box-shadow: inset -2px 3px 0px rgba(0, 0, 0, 0.3);\n animation: dots 5s ease infinite alternate;\n}\n\n@keyframes dots {\n 0% {\n box-shadow: inset -3px 3px 0px rgba(0, 0, 0, 0.3);\n }\n\n 100% {\n box-shadow: inset 3px 3px 0px rgba(0, 0, 0, 0.3);\n }\n}\n\n.content .planet .spots span:nth-child(1) {\n top: 20px;\n right: 50px;\n}\n\n.content .planet .spots span:nth-child(2) {\n top: 40px;\n left: 50px;\n width: 15px;\n height: 15px;\n}\n\n.content .planet .spots span:nth-child(3) {\n top: 80px;\n left: 20px;\n width: 25px;\n height: 25px;\n}\n\n.content .planet .spots span:nth-child(4) {\n top: 80px;\n left: 90px;\n width: 40px;\n height: 40px;\n}\n\n.content .planet .spots span:nth-child(5) {\n top: 160px;\n left: 70px;\n width: 15px;\n height: 15px;\n}\n\n.content .planet .spots span:nth-child(6) {\n top: 165px;\n left: 125px;\n width: 10px;\n height: 10px;\n}\n\n.content .planet .spots span:nth-child(7) {\n top: 90px;\n left: 150px;\n width: 15px;\n height: 15px;\n}\n\n.content p {\n color: #bacbd9;\n font-size: 14px;\n z-index: 2;\n position: absolute;\n bottom: -20px;\n font-family: \"Roboto Mono\", monospace;\n animation: text 4s ease infinite;\n width: 100px;\n text-align: center;\n}\n\n@keyframes text {\n 0% {\n transform: translateX(-30px);\n letter-spacing: 0px;\n color: #bacbd9;\n }\n\n 25% {\n letter-spacing: 3px;\n color: #7ea1bf;\n }\n\n 50% {\n transform: translateX(30px);\n letter-spacing: 0px;\n color: #bacbd9;\n }\n\n 75% {\n letter-spacing: 3px;\n color: #7ea1bf;\n }\n\n 100% {\n transform: translateX(-30px);\n letter-spacing: 0px;\n color: #bacbd9;\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"fe411f","snapshot":null,"tags":null,"title":"loader by AbanoubMagdy1","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":336,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n --dim: 5rem;\n width: var(--dim);\n height: var(--dim);\n border: 7px solid #2596be;\n border-top-color: transparent;\n border-bottom-color: transparent;\n border-radius: 50%;\n animation: spin_51 1.5s infinite linear;\n}\n\n@keyframes spin_51 {\n from {\n transform: rotate(0)\n }\n\n to {\n transform: rotate(360deg)\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"f1f5fe","snapshot":null,"tags":null,"title":"loader by alexruix","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1029,"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 margin: auto;\n box-sizing: border-box;\n background-clip: padding-box;\n width: 200px;\n height: 200px;\n border-radius: 50%;\n border: 4px solid rgba(255, 255, 255, 0.1);\n -webkit-mask: linear-gradient(rgba(24, 24, 24, 0.2), rgba(24, 24, 24,0.9) 90%);\n transform-origin: 50% 60%;\n transform: perspective(200px) rotateX(66deg);\n}\n\n.loader:before, .loader:after {\n content: \"\";\n position: absolute;\n margin: -4px;\n box-sizing: inherit;\n width: inherit;\n height: inherit;\n border-radius: inherit;\n opacity: 0.05;\n border: inherit;\n border-color: transparent;\n animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, spinner-fade 1.2s linear infinite;\n}\n\n.loader:before {\n border-top-color: #66e6ff;\n}\n\n.loader:after {\n border-top-color: #f0db75;\n animation-delay: 0.3s;\n}\n\n@keyframes spinner-spin {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes spinner-fade {\n 20% {\n opacity: 0.1;\n }\n\n 40% {\n opacity: 1;\n }\n\n 60% {\n opacity: 0.1;\n }\n}\n "},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"e7c2d1","snapshot":null,"tags":null,"title":"loader by VashonG","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":373,"cssLen":1608,"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":"@media (prefers-reduced-motion) {\n}\n\nfigure {\n --size: 15vmin;\n --duration: 4s;\n --direction: 1;\n --pull: -1.25;\n perspective: 30rem;\n display: grid;\n grid-template-areas: \"figure\";\n place-items: center;\n inline-size: var(--size);\n aspect-ratio: 1;\n animation: spin var(--duration) ease-in-out infinite;\n}\n\nfigure > * {\n --radius: calc(var(--size) / 2);\n --deg: calc(var(--i) * (360deg / 12));\n --hs: 225 100%;\n --transform-start: translate3d(\n calc(cos(var(--deg)) * var(--radius)),\n calc(sin(var(--deg)) * var(--radius)),\n 0\n )\n rotate(calc(var(--deg)));\n grid-area: figure;\n background-color: hsl(var(--hs) var(--l, 60%));\n inline-size: calc(var(--size) / 4);\n aspect-ratio: 1;\n clip-path: polygon(25% 25%, 100% 50%, 25% 75%, 0% 50%);\n transform: var(--transform-start);\n transform-style: preserve-3d;\n animation: diamonds var(--duration) cubic-bezier(0.87, 0, 0.13, 1) infinite;\n}\n\nfigure:nth-child(2) {\n --size: 30vmin;\n --direction: -1;\n --l: 70%;\n}\n\nfigure:nth-child(3) {\n --size: 55vmin;\n --pull: -1.125;\n --l: 80%;\n}\n\n@keyframes spin {\n 0%,\n 25% {\n transform: scaleX(var(--direction)) rotate(0);\n }\n\n 75%,\n 100% {\n transform: scaleX(var(--direction)) rotate(1turn);\n }\n}\n\n@keyframes diamonds {\n 0%,\n 20% {\n transform: var(--transform-start);\n }\n\n 50% {\n clip-path: polygon(75% 25%, 100% 50%, 75% 75%, 0% 50%);\n transform: translate3d(\n calc(cos(var(--deg)) * var(--radius) * var(--pull)),\n calc(sin(var(--deg)) * var(--radius) * var(--pull)),\n 5rem\n )\n rotate(calc(var(--deg) + 90deg));\n }\n}\n"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"b17ad4","snapshot":null,"tags":null,"title":"loader by mobinkakei","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":29,"cssLen":727,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".loader {\n position: relative;\n width: 60px;\n height: 60px;\n background: #a19dad;\n transform: rotateX(65deg) rotate(45deg);\n // remove bellows command for perspective change\n //transform: perspective(200px) rotateX(65deg) rotate(45deg);\n color: #fff;\n animation: layers1 1s linear infinite alternate;\n}\n.loader:after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: rgba(255, 255, 255, 0.7);\n animation: layerTr 1s linear infinite alternate;\n}\n\n@keyframes layers1 {\n 0% {\n box-shadow: 0px 0px 0 0px;\n }\n 90%,\n 100% {\n box-shadow: 20px 20px 0 -4px;\n }\n}\n@keyframes layerTr {\n 0% {\n transform: translate(0, 0) scale(1);\n }\n 100% {\n transform: translate(-25px, -25px) scale(1);\n }\n}\n"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"92fa6d","snapshot":null,"tags":null,"title":"loader by AHMED-MIT","updated":"2024-01-22T16:54:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":658,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner {\n --d: 24.6px;\n width: 4.5px;\n height: 4.5px;\n border-radius: 50%;\n color: #474bff;\n box-shadow: calc(1*var(--d)) calc(0*var(--d)) 0 0,\n calc(0.707*var(--d)) calc(0.707*var(--d)) 0 1.1px,\n calc(0*var(--d)) calc(1*var(--d)) 0 2.2px,\n calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 3.4px,\n calc(-1*var(--d)) calc(0*var(--d)) 0 4.5px,\n calc(-0.707*var(--d)) calc(-0.707*var(--d))0 5.6px,\n calc(0*var(--d)) calc(-1*var(--d)) 0 6.7px;\n animation: spinner-a90wxe 1s infinite steps(8);\n}\n\n@keyframes spinner-a90wxe {\n 100% {\n transform: rotate(1turn);\n }\n}"},{"created":"2024-01-22T16:54:41.000Z","isPrivate":0,"projectId":"8209ac","snapshot":null,"tags":null,"title":"loader by G4b413l","updated":"2024-01-22T16:54:42.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":593,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".ping {\n --uib-size: 50px;\n --uib-speed: 1s;\n --uib-color: #3950cf;\n position: relative;\n height: var(--uib-size);\n width: var(--uib-size);\n}\n\n.ping::before,\n.ping::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n border-radius: 50%;\n background-color: var(--uib-color);\n animation: pulse7132 var(--uib-speed) linear infinite;\n transform: scale(0);\n opacity: 0;\n}\n\n.ping::after {\n animation-delay: calc(var(--uib-speed) / -2);\n}\n\n@keyframes pulse7132 {\n 0% {\n transform: scale(0);\n opacity: 1;\n }\n\n 100% {\n transform: scale(1);\n opacity: 0;\n }\n}\n"}]}},"actionData":null,"errors":null}