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

\n {}\n

","css":".code-loader {\n color: #fff;\n font-family: Consolas, Menlo, Monaco, monospace;\n font-weight: bold;\n font-size: 100px;\n opacity: 0.8;\n}\n\n.code-loader span {\n display: inline-block;\n animation: pulse_414 0.4s alternate infinite ease-in-out;\n}\n\n.code-loader span:nth-child(odd) {\n animation-delay: 0.4s;\n}\n\n@keyframes pulse_414 {\n to {\n transform: scale(0.8);\n opacity: 0.5;\n }\n}"},{"created":"2024-01-22T16:54:32.000Z","isPrivate":0,"projectId":"07849c","snapshot":null,"tags":null,"title":"loader by ChaudaryHammad","updated":"2024-01-22T16:54:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":851,"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 aspect-ratio: 1.154;\n position: relative;\n background: conic-gradient(from 120deg at 50% 64%,#0000, #ff1919 1deg 120deg,#0000 121deg);\n animation: l27-0 1.5s infinite cubic-bezier(0.3,1,0,1);\n}\n\n.loader:before,\n.loader:after {\n content: '';\n position: absolute;\n inset: 0;\n background: inherit;\n transform-origin: 50% 66%;\n animation: l27-1 1.5s infinite;\n}\n\n.loader:after {\n --s: -1;\n}\n\n@keyframes l27-0 {\n 0%,30% {\n transform: rotate(0)\n }\n\n 70% {\n transform: rotate(120deg)\n }\n\n 70.01%,100% {\n transform: rotate(360deg)\n }\n}\n\n@keyframes l27-1 {\n 0% {\n transform: rotate(calc(var(--s,1)*120deg)) translate(0)\n }\n\n 30%,70% {\n transform: rotate(calc(var(--s,1)*120deg)) translate(calc(var(--s,1)*-5px),10px)\n }\n\n 100% {\n transform: rotate(calc(var(--s,1)*120deg)) translate(0)\n }\n}\n\n\n"},{"created":"2024-01-22T16:54:32.000Z","isPrivate":0,"projectId":"f44c56","snapshot":null,"tags":null,"title":"loader by SouravBandyopadhyay","updated":"2024-01-22T16:54:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":962,"cssLen":805,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"#outline {\n stroke-dasharray: 2.42777px, 242.77666px;\n stroke-dashoffset: 0;\n -webkit-animation: anim 1.6s linear infinite;\n animation: anim 1.6s linear infinite;\n}\n\n@-webkit-keyframes anim {\n 12.5% {\n stroke-dasharray: 33.98873px, 242.77666px;\n stroke-dashoffset: -26.70543px;\n }\n\n 43.75% {\n stroke-dasharray: 84.97183px, 242.77666px;\n stroke-dashoffset: -84.97183px;\n }\n\n 100% {\n stroke-dasharray: 2.42777px, 242.77666px;\n stroke-dashoffset: -240.34889px;\n }\n}\n\n@keyframes anim {\n 12.5% {\n stroke-dasharray: 33.98873px, 242.77666px;\n stroke-dashoffset: -26.70543px;\n }\n\n 43.75% {\n stroke-dasharray: 84.97183px, 242.77666px;\n stroke-dashoffset: -84.97183px;\n }\n\n 100% {\n stroke-dasharray: 2.42777px, 242.77666px;\n stroke-dashoffset: -240.34889px;\n }\n}\n"},{"created":"2024-01-22T16:54:32.000Z","isPrivate":0,"projectId":"979a3a","snapshot":null,"tags":null,"title":"loader by adamgiebl","updated":"2024-01-22T16:54:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":302,"cssLen":1204,"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","css":".cube-loader {\n position: relative;\n width: 100px;\n height: 100px;\n transform-style: preserve-3d;\n transform: rotateX(-30deg);\n animation: animate 4s linear infinite;\n}\n\n@keyframes animate {\n 0% {\n transform: rotateX(-30deg) rotateY(0);\n }\n\n 100% {\n transform: rotateX(-30deg) rotateY(360deg);\n }\n}\n\n.cube-loader .cube-wrapper {\n position: absolute;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n}\n\n.cube-loader .cube-wrapper .cube-span {\n position: absolute;\n width: 100%;\n height: 100%;\n transform: rotateY(calc(90deg * var(--i))) translateZ(50px);\n background: linear-gradient(\n to bottom,\n hsl(200, 80%, 50%) 0%,\n hsl(200, 80%, 60%) 100%\n );\n}\n\n.cube-top {\n position: absolute;\n width: 100px;\n height: 100px;\n background: hsl(200, 80%, 50%);\n transform: rotateX(90deg) translateZ(50px);\n transform-style: preserve-3d;\n}\n\n.cube-top::before {\n content: '';\n position: absolute;\n width: 100px;\n height: 100px;\n background: hsl(200, 80%, 60%);\n transform: translateZ(-100px);\n filter: blur(10px);\n box-shadow: 0 0 10px #333,\n 0 0 20px hsl(200, 80%, 60%),\n 0 0 30px #333,\n 0 0 40px hsl(200, 80%, 60%);\n}"},{"created":"2024-01-22T16:54:32.000Z","isPrivate":0,"projectId":"841776","snapshot":null,"tags":null,"title":"loader by Chriskoziol","updated":"2024-01-22T16:54:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":351,"cssLen":1762,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n posts\n images\n followers\n hashtags\n posts\n

","css":".spinnerContainer {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.spinner {\n width: 56px;\n height: 56px;\n display: grid;\n border: 4px solid #0000;\n border-radius: 50%;\n border-right-color: #299fff;\n animation: tri-spinner 1s infinite linear;\n}\n\n.spinner::before,\n.spinner::after {\n content: \"\";\n grid-area: 1/1;\n margin: 2px;\n border: inherit;\n border-radius: 50%;\n animation: tri-spinner 2s infinite;\n}\n\n.spinner::after {\n margin: 8px;\n animation-duration: 3s;\n}\n\n@keyframes tri-spinner {\n 100% {\n transform: rotate(1turn);\n }\n}\n\n.loader {\n color: #4a4a4a;\n font-family: \"Poppins\",sans-serif;\n font-weight: 500;\n font-size: 25px;\n -webkit-box-sizing: content-box;\n box-sizing: content-box;\n height: 40px;\n padding: 10px 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n border-radius: 8px;\n}\n\n.words {\n overflow: hidden;\n}\n\n.word {\n display: block;\n height: 100%;\n padding-left: 6px;\n color: #299fff;\n animation: cycle-words 5s infinite;\n}\n\n@keyframes cycle-words {\n 10% {\n -webkit-transform: translateY(-105%);\n transform: translateY(-105%);\n }\n\n 25% {\n -webkit-transform: translateY(-100%);\n transform: translateY(-100%);\n }\n\n 35% {\n -webkit-transform: translateY(-205%);\n transform: translateY(-205%);\n }\n\n 50% {\n -webkit-transform: translateY(-200%);\n transform: translateY(-200%);\n }\n\n 60% {\n -webkit-transform: translateY(-305%);\n transform: translateY(-305%);\n }\n\n 75% {\n -webkit-transform: translateY(-300%);\n transform: translateY(-300%);\n }\n\n 85% {\n -webkit-transform: translateY(-405%);\n transform: translateY(-405%);\n }\n\n 100% {\n -webkit-transform: translateY(-400%);\n transform: translateY(-400%);\n }\n}\n"},{"created":"2024-01-22T16:54:32.000Z","isPrivate":0,"projectId":"703910","snapshot":null,"tags":null,"title":"loader by Ratinax","updated":"2024-01-22T16:54:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":163,"cssLen":684,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".flex {\n display: flex\n}\n\n.aspect-square {\n aspect-ratio: 1 / 1\n}\n\n.w-8 {\n width: 2rem\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg)\n }\n}\n\n.animate-spin {\n animation: spin 1s linear infinite\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-center {\n justify-content: center\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.border-t-2 {\n border-top-width: 2px\n}\n\n.border-yellow-500 {\n --tw-border-opacity: 1;\n border-color: rgb(234 179 8 / var(--tw-border-opacity))\n}\n\n.bg-yellow-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(253 224 71 / var(--tw-bg-opacity))\n}\n\n.text-yellow-700 {\n --tw-text-opacity: 1;\n color: rgb(161 98 7 / var(--tw-text-opacity))\n}"},{"created":"2024-01-22T16:54:32.000Z","isPrivate":0,"projectId":"222a3e","snapshot":null,"tags":null,"title":"loader by catraco","updated":"2024-01-22T16:54:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":977,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".loader {\n --eye: #212121;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.loader::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n transform: translate(-50%, -50%);\n border: 5px solid var(--eye);\n border-radius: 100%;\n animation: translate-keyframes 2s infinite linear;\n}\n\n.loader span {\n position: absolute;\n width: 40px;\n height: 40px;\n border-radius: 100%;\n border-top: 12px solid var(--eye);\n border-bottom: 5px solid var(--eye);\n outline: 2px solid var(--eye);\n}\n\n.loader span {\n animation: rotate-keyframes 2s infinite linear;\n}\n\n@keyframes translate-keyframes {\n 0% {\n transform: translate(-100%, -50%);\n }\n\n 95% {\n transform: translate(50%, -50%);\n }\n\n 96% {\n transform: translate(-50%, -50%);\n }\n\n 100% {\n transform: translate(-100%, -50%);\n }\n}\n\n@keyframes rotate-keyframes {\n 90% {\n height: 40px;\n }\n\n 95% {\n height: 0px;\n }\n\n 100% {\n height: 40px;\n }\n}"},{"created":"2024-01-22T16:54:32.000Z","isPrivate":0,"projectId":"1b4cf8","snapshot":null,"tags":null,"title":"loader by csemszepp","updated":"2024-01-22T16:54:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":211,"cssLen":852,"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":".loader {\n -webkit-perspective: 700px;\n perspective: 700px;\n background: red;\n padding: 10px 20px;\n}\n\n.loader>span {\n font-size: 60px;\n font-family: \"franklin gothic medium\",sans-serif;\n display: inline-block;\n animation: flip 2.6s infinite linear;\n transform-origin: 0 70%;\n transform-style: preserve-3d;\n -webkit-transform-style: preserve-3d;\n}\n\n@keyframes flip {\n 35% {\n transform: rotatez(360deg);\n }\n\n 100% {\n transform: rotatez(360deg);\n }\n}\n\n.loader>span:nth-child(even) {\n color: white;\n}\n\n.loader>span:nth-child(2) {\n animation-delay: 0.3s;\n}\n\n.loader>span:nth-child(3) {\n animation-delay: 0.6s;\n}\n\n.loader>span:nth-child(4) {\n animation-delay: 0.9s;\n}\n\n.loader>span:nth-child(5) {\n animation-delay: 1.2s;\n}\n\n.loader>span:nth-child(6) {\n animation-delay: 1.5s\n}\n\n.loader>span:nth-child(7) {\n animation-delay: 1.8s\n}"},{"created":"2024-01-22T16:54:32.000Z","isPrivate":0,"projectId":"67fb05","snapshot":null,"tags":null,"title":"loader by Nod3sRus","updated":"2024-01-22T16:54:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":1353,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".loader {\n position: relative;\n width: 150px;\n height: 150px;\n background: transparent;\n border-radius: 50%;\n box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.55);\n border: 1px solid #333;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n\n.loader::before {\n content: \"\";\n position: absolute;\n inset: 20px;\n background: transparent;\n border: 1px dashed#444;\n border-radius: 50%;\n box-shadow: inset -5px -5px 25px rgba(0, 0, 0, 0.25),\n inset 5px 5px 35px rgba(0, 0, 0, 0.25);\n}\n\n.loader::after {\n content: \"\";\n position: absolute;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n border: 1px dashed#444;\n box-shadow: inset -5px -5px 25px rgba(0, 0, 0, 0.25),\n inset 5px 5px 35px rgba(0, 0, 0, 0.25);\n}\n\n.loader span {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 50%;\n height: 100%;\n background: transparent;\n transform-origin: top left;\n animation: radar81 2s linear infinite;\n border-top: 1px dashed #fff;\n}\n\n.loader span::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: seagreen;\n transform-origin: top left;\n transform: rotate(-55deg);\n filter: blur(30px) drop-shadow(20px 20px 20px seagreen);\n}\n\n@keyframes radar81 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:32.000Z","isPrivate":0,"projectId":"b2e97d","snapshot":null,"tags":null,"title":"loader by Deri-Kurniawan","updated":"2024-01-22T16:54:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":259,"cssLen":915,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n perspective: 600px;\n width: 100px;\n height: 100px;\n}\n\n.cube {\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n animation: rotate 4s linear infinite;\n}\n\n.face {\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(45deg, #3498db, #e74c3c);\n opacity: 0.8;\n border: 0.5px solid #fff;\n border-radius: 25%;\n}\n\n.face:nth-child(1) {\n transform: rotateX(90deg) translateZ(50px);\n}\n\n.face:nth-child(2) {\n transform: rotateX(-90deg) translateZ(50px);\n}\n\n.face:nth-child(3) {\n transform: translateZ(50px);\n}\n\n.face:nth-child(4) {\n transform: rotateY(90deg) translateZ(50px);\n}\n\n.face:nth-child(5) {\n transform: rotateY(-90deg) translateZ(50px);\n}\n\n.face:nth-child(6) {\n transform: rotateY(180deg) translateZ(50px);\n}\n\n@keyframes rotate {\n 0% {\n transform: rotateX(0deg) rotateY(0deg);\n }\n\n 100% {\n transform: rotateX(360deg) rotateY(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:32.000Z","isPrivate":0,"projectId":"50fdf8","snapshot":null,"tags":null,"title":"loader by bhaveshxrawat","updated":"2024-01-22T16:54:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":164,"cssLen":480,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n display: flex;\n justify-content: center;\n align-content: center;\n align-items: center;\n gap: 5px;\n height: 80px;\n width: 80px;\n}\n\n.bar {\n width: 7px;\n height: 50px;\n border-radius: 10em;\n background-image: linear-gradient(60deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);\n background-size: 390%;\n animation: live 2s linear infinite;\n}\n\n@keyframes live {\n 0%, 50%, 100% {\n transform: scaleY(1);\n }\n\n 30%, 70% {\n background-position: right;\n transform: scaleY(1.15);\n }\n}"},{"created":"2024-01-22T16:54:32.000Z","isPrivate":0,"projectId":"6e74d4","snapshot":null,"tags":null,"title":"loader by david-mohseni","updated":"2024-01-22T16:54:32.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":80,"cssLen":603,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

","css":".arrow {\n transform: rotate(90deg);\n cursor: pointer;\n}\n\n.arrow span {\n display: block;\n width: 15px;\n height: 15px;\n border-bottom: 5px solid red;\n border-right: 5px solid red;\n transform: rotate(45deg);\n margin: -15px;\n animation: animate28797 2s infinite;\n}\n\n.arrow span:nth-child(2) {\n animation-delay: -0.2s;\n}\n\n.arrow span:nth-child(3) {\n animation-delay: -0.4s;\n}\n\n@keyframes animate28797 {\n 0% {\n opacity: 0;\n transform: rotate(45deg) translate(-20px, -20px);\n }\n\n 50% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n transform: rotate(45deg) translate(20px, 20px);\n }\n}"}]}},"actionData":null,"errors":null}