{"loaderData":{"0":null,"0-3":{"total":7313,"projects":[{"created":"2024-01-22T16:54:33.000Z","isPrivate":0,"projectId":"2cc460","snapshot":null,"tags":null,"title":"loader by Abhi-6284","updated":"2024-01-22T16:54:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":301,"cssLen":1927,"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":".cube-loader {\n position: relative;\n/* u can choose any size */\n width: 75px;\n height: 75px;\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 /* top: 0;\n left: 0; */\n transform-style: preserve-3d;\n}\n\n.cube-loader .cube-wrapper .cube-span {\n position: absolute;\n width: 100%;\n height: 100%;\n /* top: 0;\n left: 0; */\n /* width 75px / 2 = 37.5px */\n transform: rotateY(calc(90deg * var(--i))) translateZ(37.5px);\n background: linear-gradient(\n to bottom,\n hsl(330, 3.13%, 25.1%) 0%,\n hsl(177.27, 21.71%, 32.06%) 5.5%,\n hsl(176.67, 34.1%, 36.88%) 12.1%,\n hsl(176.61, 42.28%, 40.7%) 19.6%,\n hsl(120, 40%, 50%) 27.9%,\n hsl(45, 40%, 50%) 36.6%,\n hsl(240, 40%, 50%) 45.6%,\n hsl(60, 40%, 50%) 54.6%,\n hsl(150, 40%, 50%) 63.4%,\n hsl(300, 40%, 50%) 71.7%,\n hsl(75, 40%, 50%) 79.4%,\n hsl(210, 40%, 50%) 86.2%,\n hsl(15, 40%, 50%) 91.9%,\n hsl(330, 40%, 50%) 96.3%,\n hsl(90, 40%, 50%) 99%,\n hsl(180, 40%, 50%) 100%\n );\n}\n\n.cube-top {\n position: absolute;\n width: 75px;\n height: 75px;\n background: hsl(330, 3.13%, 25.1%) 0%;\n /* width 75px / 2 = 37.5px */\n transform: rotateX(90deg) translateZ(37.5px);\n transform-style: preserve-3d;\n}\n\n.cube-top::before {\n content: '';\n position: absolute;\n/* u can choose any size */\n width: 75px;\n height: 75px;\n background: hsl(176.61, 42.28%, 40.7%) 19.6%;\n transform: translateZ(-90px);\n filter: blur(10px);\n box-shadow: 0 0 10px #323232,\n 0 0 20px hsl(176.61, 42.28%, 40.7%) 19.6%,\n 0 0 30px #323232,\n 0 0 40px hsl(176.61, 42.28%, 40.7%) 19.6%;\n}\n"},{"created":"2024-01-22T16:54:33.000Z","isPrivate":0,"projectId":"f89ced","snapshot":null,"tags":null,"title":"loader by satyamchaudharydev","updated":"2024-01-22T16:54:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":91,"cssLen":1455,"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":".loader {\n --loader: rgb(49, 180, 255);\n --loader-size: 30px;\n position: relative;\n width: 100px;\n height: 40px;\n overflow: hidden;\n transition: .5s;\n letter-spacing: 2px\n}\n\n.loader span {\n position: absolute;\n}\n\n.loader span:nth-child(1) {\n top: 0;\n left: -100%;\n width: 100%;\n height: var(--loader-size);\n background: linear-gradient(90deg, transparent, var(--loader));\n animation: loader-anim1 1s linear infinite;\n}\n\n@keyframes loader-anim1 {\n 0% {\n left: -100%;\n }\n\n 50%,100% {\n left: 100%;\n }\n}\n\n.loader span:nth-child(2) {\n top: -100%;\n right: 0;\n width: var(--loader-size);\n height: 100%;\n background: linear-gradient(180deg, transparent, var(--loader));\n animation: loader-anim2 1s linear infinite;\n animation-delay: .25s\n}\n\n@keyframes loader-anim2 {\n 0% {\n top: -100%;\n }\n\n 50%,100% {\n top: 100%;\n }\n}\n\n.loader span:nth-child(3) {\n bottom: 0;\n right: -100%;\n width: 100%;\n height: var(--loader-size);\n background: linear-gradient(270deg, transparent, var(--loader));\n animation: loader-anim3 1s linear infinite;\n animation-delay: .5s\n}\n\n@keyframes loader-anim3 {\n 0% {\n right: -100%;\n }\n\n 50%,100% {\n right: 100%;\n }\n}\n\n.loader span:nth-child(4) {\n bottom: -100%;\n left: 0;\n width: var(--loader-size);\n height: 100%;\n background: linear-gradient(360deg, transparent, var(--loader));\n animation: loader-anim4 1s linear infinite;\n animation-delay: .75s\n}\n\n@keyframes loader-anim4 {\n 0% {\n bottom: -100%;\n }\n\n 50%,100% {\n bottom: 100%;\n }\n}"},{"created":"2024-01-22T16:54:33.000Z","isPrivate":0,"projectId":"79130c","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1187,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 96px;\n height: 48px;\n display: inline-block;\n position: relative;\n background: #5e5e5e;\n border-radius: 48px 48px 0 0;\n box-sizing: border-box;\n overflow: hidden;\n}\n\n.loader::after {\n content: '';\n box-sizing: border-box;\n position: absolute;\n width: 24px;\n height: 12px;\n border-radius: 24px 24px 0 0;\n background: yellow;\n left: 50%;\n transform: translateX(-50%);\n bottom: 0;\n}\n\n.loader::before {\n content: '';\n position: absolute;\n width: 4px;\n height: 32px;\n left: 0;\n right: 0;\n margin: auto;\n bottom: 0;\n background: yellow;\n transform-origin: 50% 100%;\n box-sizing: border-box;\n animation: animloader 2s linear infinite alternate;\n}\n\n@keyframes animloader {\n 0% {\n transform: rotate(-70deg);\n }\n\n 10% {\n transform: rotate(-40deg);\n }\n\n 20%, 45%, 35% {\n transform: rotate(-10deg);\n }\n\n 40%, 30% {\n transform: rotate(-30deg);\n }\n\n 50%, 60% {\n transform: rotate(20deg);\n }\n\n 55%, 65%, 75% {\n transform: rotate(40deg);\n }\n\n 70% {\n transform: rotate(45deg);\n }\n\n 85%, 90% {\n transform: rotate(50deg);\n }\n\n 95% {\n transform: rotate(75deg);\n }\n\n 100%, 93% {\n transform: rotate(70deg);\n }\n}"},{"created":"2024-01-22T16:54:33.000Z","isPrivate":0,"projectId":"ba7f66","snapshot":null,"tags":null,"title":"loader by ashish-yadv","updated":"2024-01-22T16:54:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":157,"cssLen":606,"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 gap: 0.6em;\n list-style: none;\n}\n\n.dots {\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background: #ffffff;\n}\n\n#dot-1 {\n animation: loader-1 0.6s infinite ease-in-out;\n}\n\n@keyframes loader-1 {\n 50% {\n opacity: 0;\n transform: translateY(-0.3em);\n }\n}\n\n#dot-2 {\n animation: loader-2 0.6s 0.3s infinite ease-in-out;\n}\n\n@keyframes loader-2 {\n 50% {\n opacity: 0;\n transform: translateY(-0.3em);\n }\n}\n\n#dot-3 {\n animation: loader-3 0.6s 0.6s infinite ease-in-out;\n}\n\n@keyframes loader-3 {\n 50% {\n opacity: 0;\n transform: translateY(-0.3em);\n }\n}"},{"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}"}]}},"actionData":null,"errors":null}