{"loaderData":{"0":null,"0-3":{"total":7313,"projects":[{"created":"2024-01-22T16:54:20.000Z","isPrivate":0,"projectId":"543242","snapshot":null,"tags":null,"title":"loader by vikas7754","updated":"2024-01-22T16:54:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":210,"cssLen":1164,"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":".glowing-cube {\n position: relative;\n width: 150px;\n height: 150px;\n transform-style: preserve-3d;\n animation: cube-rotate 4s linear infinite;\n}\n\n@keyframes cube-rotate {\n 0% {\n transform: rotatex(-30deg) rotatey(0deg);\n }\n\n 100% {\n transform: rotatex(-30deg) rotatey(360deg);\n }\n}\n\n.glowing-cube div {\n position: absolute;\n inset: 0;\n transform-style: preserve-3d;\n}\n\n.glowing-cube div span {\n position: absolute;\n inset: 0;\n background: linear-gradient(#151515, #3aff5e);\n transform: rotatey(calc(90deg * var(--i))) translatez(calc(150px / 2));\n}\n\n.glowing-cube .top {\n position: absolute;\n inset: 0;\n background: #222;\n transform: rotatex(90deg) translatez(calc(150px / 2));\n display: flex;\n justify-content: center;\n align-items: center;\n color: var(--top-font-color);\n font-size: 7rem;\n}\n\n.glowing-cube .top::before {\n content: '';\n position: absolute;\n background: #3aff5e;\n inset: 0;\n transform: translatez(calc(0px - calc(150px + 100px)));\n filter: blur(30px);\n box-shadow: 0 0 120px rgba(58, 134, 255, 0.2),\n 0 0 200px rgba(58, 134, 255, 0.4),\n 0 0 300px #00ff2f,\n 0 0 400px #51fd71,\n 0 0 500px #3aff5e;\n}"},{"created":"2024-01-22T16:54:20.000Z","isPrivate":0,"projectId":"edc47b","snapshot":null,"tags":null,"title":"loader by mrhyddenn","updated":"2024-01-22T16:54:20.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":761,"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: block;\n width: 44px;\n height: 44px;\n font-size: 15px;\n box-shadow: 9px 9px 33px #d1d1d1, -9px -9px 33px #ffffff;\n}\n\n.loader::before,\n.loader::after {\n content: '';\n position: absolute;\n display: block;\n}\n\n.loader_bubble::before {\n top: 10px;\n left: 10px;\n width: 10px;\n height: 10px;\n background: #fff;\n border-radius: 50%;\n}\n\n.loader_bubble {\n background: linear-gradient(180deg, rgb(0, 91, 228) 10%, rgb(75, 127, 240) 100%);\n border-radius: 50%;\n transform-origin: 50% 50%;\n animation: bubble7234 1200ms cubic-bezier(0.645, 0.045, 0.355, 1) infinite;\n}\n\n@keyframes bubble7234 {\n 0% {\n transform: translate3d(0,0,0) rotate(0);\n }\n\n 100% {\n transform: translate3d(0,0,0) rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"b7233f","snapshot":null,"tags":null,"title":"loader by fanishah","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1666,"cssLen":2738,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".loader {\n display: block;\n width: 150px;\n height: auto;\n}\n\n.loader_body,\n .loader_front,\n .loader_handlebars,\n .loader_pedals,\n .loader_pedals-spin,\n .loader_seat,\n .loader_spokes,\n .loader_spokes-spin,\n .loader_tire {\n animation: bikeBody 3s ease-in-out infinite;\n stroke: var(--primary);\n transition: stroke var(--trans-dur);\n}\n\n.loader_front {\n animation-name: bikeFront;\n}\n\n.loader_handlebars {\n animation-name: bikeHandlebars;\n}\n\n.loader_pedals {\n animation-name: bikePedals;\n}\n\n.loader_pedals-spin {\n animation-name: bikePedalsSpin;\n}\n\n.loader_seat {\n animation-name: bikeSeat;\n}\n\n.loader_spokes,\n .loader_tire {\n stroke: currentColor;\n}\n\n.loader_spokes {\n animation-name: bikeSpokes;\n}\n\n.loader_spokes-spin {\n animation-name: bikeSpokesSpin;\n}\n\n.loader_tire {\n animation-name: bikeTire;\n}\n\n /* Dark theme */\n@media (prefers-color-scheme: dark) {\n :root {\n --bg: hsl(var(--hue), 90%, 10%);\n --fg: hsl(var(--hue), 90%, 90%);\n }\n}\n\n /* Animations */\n@keyframes bikeBody {\n from {\n stroke-dashoffset: 79;\n }\n\n 33%,\n 67% {\n stroke-dashoffset: 0;\n }\n\n to {\n stroke-dashoffset: -79;\n }\n}\n\n@keyframes bikeFront {\n from {\n stroke-dashoffset: 19;\n }\n\n 33%,\n 67% {\n stroke-dashoffset: 0;\n }\n\n to {\n stroke-dashoffset: -19;\n }\n}\n\n@keyframes bikeHandlebars {\n from {\n stroke-dashoffset: 10;\n }\n\n 33%,\n 67% {\n stroke-dashoffset: 0;\n }\n\n to {\n stroke-dashoffset: -10;\n }\n}\n\n@keyframes bikePedals {\n from {\n animation-timing-function: ease-in;\n stroke-dashoffset: -25.133;\n }\n\n 33%,\n 67% {\n animation-timing-function: ease-out;\n stroke-dashoffset: -21.991;\n }\n\n to {\n stroke-dashoffset: -25.133;\n }\n}\n\n@keyframes bikePedalsSpin {\n from {\n transform: rotate(0.1875turn);\n }\n\n to {\n transform: rotate(3.1875turn);\n }\n}\n\n@keyframes bikeSeat {\n from {\n stroke-dashoffset: 5;\n }\n\n 33%,\n 67% {\n stroke-dashoffset: 0;\n }\n\n to {\n stroke-dashoffset: -5;\n }\n}\n\n@keyframes bikeSpokes {\n from {\n animation-timing-function: ease-in;\n stroke-dashoffset: -31.416;\n }\n\n 33%,\n 67% {\n animation-timing-function: ease-out;\n stroke-dashoffset: -23.562;\n }\n\n to {\n stroke-dashoffset: -31.416;\n }\n}\n\n@keyframes bikeSpokesSpin {\n from {\n transform: rotate(0);\n }\n\n to {\n transform: rotate(3turn);\n }\n}\n\n@keyframes bikeTire {\n from {\n animation-timing-function: ease-in;\n stroke-dashoffset: 56.549;\n transform: rotate(0);\n }\n\n 33% {\n stroke-dashoffset: 0;\n transform: rotate(0.33turn);\n }\n\n 67% {\n animation-timing-function: ease-out;\n stroke-dashoffset: 0;\n transform: rotate(0.67turn);\n }\n\n to {\n stroke-dashoffset: -56.549;\n transform: rotate(1turn);\n }\n}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"21b68e","snapshot":null,"tags":null,"title":"loader by doniaskima","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":957,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"/* HTML:

*/\n.loader {\n height: 60px;\n aspect-ratio: 1;\n position: relative;\n}\n\n.loader::before,\n.loader::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n transform-origin: bottom;\n}\n\n.loader::after {\n background: radial-gradient(at 75% 15%,#fffb,#0000 35%),\n radial-gradient(at 80% 40%,#0000,#0008),\n radial-gradient(circle 5px,#fff 94%,#0000),\n radial-gradient(circle 10px,#000 94%,#0000),\n linear-gradient(#F93318 0 0) top /100% calc(50% - 5px),\n linear-gradient(#fff 0 0) bottom/100% calc(50% - 5px)\n #000;\n background-repeat: no-repeat;\n animation: l20 1s infinite cubic-bezier(0.5,120,0.5,-120);\n}\n\n.loader::before {\n background: #ddd;\n filter: blur(8px);\n transform: scaleY(0.4) translate(-13px, 0px);\n}\n\n@keyframes l20 {\n \n 30%,70% {\n transform: rotate(0deg)\n }\n\n 49.99% {\n transform: rotate(0.2deg)\n }\n\n 50% {\n transform: rotate(-0.2deg)\n }\n}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"e92aff","snapshot":null,"tags":null,"title":"loader by Fadhilmagass","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":188,"cssLen":1260,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: 100%;\n}\n\n.dot {\n display: inline-block;\n width: 10px;\n height: 10px;\n margin-right: 6px;\n border-radius: 50%;\n -webkit-animation: dot-pulse2 1.5s ease-in-out infinite;\n animation: dot-pulse2 1.5s ease-in-out infinite;\n}\n\n.dot-1 {\n background-color: #4285f4;\n -webkit-animation-delay: 0s;\n animation-delay: 0s;\n}\n\n.dot-2 {\n background-color: #34a853;\n -webkit-animation-delay: 0.3s;\n animation-delay: 0.3s;\n}\n\n.dot-3 {\n background-color: #fbbc05;\n -webkit-animation-delay: 0.6s;\n animation-delay: 0.6s;\n}\n\n.dot-4 {\n background-color: #ea4335;\n -webkit-animation-delay: 0.9s;\n animation-delay: 0.9s;\n}\n\n.dot-5 {\n background-color: #4285f4;\n -webkit-animation-delay: 1.2s;\n animation-delay: 1.2s;\n}\n\n@keyframes dot-pulse2 {\n 0% {\n -webkit-transform: scale(0.5);\n transform: scale(0.5);\n opacity: 0.5;\n }\n\n 50% {\n -webkit-transform: scale(1);\n transform: scale(1);\n opacity: 1;\n }\n\n 100% {\n -webkit-transform: scale(0.5);\n transform: scale(0.5);\n opacity: 0.5;\n }\n}\n"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"3a4fdb","snapshot":null,"tags":null,"title":"loader by 0senno","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":547,"cssLen":643,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".loading svg polyline {\n fill: none;\n stroke-width: 3;\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n\n.loading svg polyline#back {\n fill: none;\n stroke: #ff4d5033;\n}\n\n.loading svg polyline#front {\n fill: none;\n stroke: #00ffff;\n stroke-dasharray: 48, 144;\n stroke-dashoffset: 192;\n animation: dash_682 2s linear infinite;\n animation-delay: 0s;\n}\n\n.loading svg polyline#front2 {\n fill: none;\n stroke: #00ffff;\n stroke-dasharray: 48, 144;\n stroke-dashoffset: 192;\n animation: dash_682 2s linear infinite;\n animation-delay: 1s;\n}\n\n@keyframes dash_682 {\n 72.5% {\n opacity: 0;\n }\n\n to {\n stroke-dashoffset: 0;\n }\n}\n"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"a1c43d","snapshot":null,"tags":null,"title":"loader by Satwinder04","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":179,"cssLen":634,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader3 {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.circle1 {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n margin: 0 10px;\n background-color: #333;\n animation: circle1 1s ease-in-out infinite;\n}\n\n.circle1:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.circle1:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n.circle1:nth-child(4) {\n animation-delay: 0.6s;\n}\n\n.circle1:nth-child(5) {\n animation-delay: 0.8s;\n}\n\n@keyframes circle1 {\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n\n 50% {\n transform: scale(1.5);\n opacity: 0.5;\n }\n\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n}\n"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"aabf26","snapshot":null,"tags":null,"title":"loader by BUGHERE","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":919,"cssLen":3174,"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 position: relative;\n justify-items: center;\n align-items: center;\n gap: 1rem;\n height: 55px;\n width: 200px;\n overflow: hidden;\n}\n\n.container {\n width: 100%;\n display: flex;\n flex-direction: column;\n height: 200px;\n position: relative;\n align-items: center;\n}\n\n.carousel {\n display: flex;\n gap: 1rem;\n flex-direction: column;\n position: absolute;\n width: 100%;\n transform-origin: center;\n animation-delay: 2s;\n}\n\n.loader .container:nth-child(3) {\n justify-content: flex-start;\n justify-items: flex-start;\n animation: scroll-up 4s infinite ease-in-out;\n animation-delay: 3s;\n}\n\n.loader .container:nth-child(2) {\n justify-content: flex-end;\n justify-items: flex-end;\n animation: scroll-down 4s infinite ease-in-out;\n animation-delay: 3s;\n}\n\n.loader .container:nth-child(1) {\n justify-content: flex-end;\n justify-items: flex-end;\n animation: scroll-down 3s infinite ease-in-out;\n animation-delay: 3s;\n}\n\n.love {\n background: black;\n display: flex;\n width: 30px;\n height: 30px;\n position: relative;\n align-items: center;\n justify-content: center;\n left: 8px;\n margin: 0.8rem 4px;\n transform: rotate(45deg);\n animation-delay: 2s;\n}\n\n.love::before,\n.love::after {\n content: \"\";\n position: absolute;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background: darkred;\n}\n\n.love::before {\n left: -16px;\n}\n\n.love::after {\n top: -16px;\n}\n\n.death {\n display: flex;\n width: 100%;\n height: 55px;\n position: relative;\n align-items: center;\n justify-content: center;\n animation: rotation 3s infinite ease-in-out;\n animation-delay: 1s;\n}\n\n.death:after {\n content: \"\";\n height: 63px;\n position: absolute;\n border-left: 12px solid black;\n transform: rotate(45deg);\n border-radius: 8px;\n top: -4px;\n}\n\n.death:before {\n content: \"\";\n height: 60px;\n position: absolute;\n border-left: 12px solid darkred;\n transform: rotate(-45deg);\n}\n\n.loader:hover {\n animation: none;\n}\n\n.robots {\n display: flex;\n width: 100%;\n height: 55px;\n justify-content: space-between;\n background-color: black;\n border-radius: 0 8px 8px;\n padding: 8px;\n animation-delay: 5s;\n}\n\n.robots::after {\n content: \"\";\n width: 12px;\n height: 12px;\n top: 0;\n left: 0;\n background-color: darkred;\n border-radius: 50%;\n animation-delay: 2s;\n animation: blink 0.5s 2 forwards;\n}\n\n.robots::before {\n content: \"\";\n width: 12px;\n height: 12px;\n top: 0;\n left: 0;\n background-color: darkred;\n border-radius: 50%;\n animation-delay: 2s;\n animation: blink 0.5s 2 forwards;\n}\n\n@keyframes scroll-up {\n 0% {\n transform: translateY(0);\n filter: blur(0);\n }\n\n 30% {\n transform: translateY(-150%);\n filter: blur(10px);\n }\n\n 60% {\n transform: translateY(0);\n filter: blur(0px);\n }\n}\n\n@keyframes scroll-down {\n 0% {\n transform: translateY(0);\n filter: blur(0);\n }\n\n 30% {\n transform: translateY(150%);\n filter: blur(10px);\n }\n\n 60% {\n transform: translateY(0);\n filter: blur(0px);\n }\n}\n\n@keyframes rotation {\n 20%,\n 100% {\n transform: rotate(180deg);\n }\n}\n\n@keyframes blink {\n 0% {\n height: 0;\n }\n\n 20% {\n height: 12px;\n }\n\n 100% {\n height: 12px;\n }\n}\n"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"330065","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":232,"cssLen":2726,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".cube {\n top: -100px;\n margin: 200px auto 0;\n width: 100px;\n height: 100Px;\n position: relative;\n transform-style: preserve-3d;\n animation: spin 3s infinite cubic-bezier(0.16, 0.61, 0.49, 0.91);\n}\n\n.face {\n position: absolute;\n width: 100%;\n height: 100%;\n background: rgb(67, 191, 207);\n border: 2px solid #fff;\n border-radius: 5px;\n box-shadow: 0 0 15px #fff;\n}\n\n.top {\n transform: rotateX(90deg) translateZ(50px);\n animation: shift-top 3s infinite ease-out;\n}\n\n.bottom {\n transform: rotateX(-90deg) translateZ(50px);\n animation: shift-bottom 3s infinite ease-out;\n}\n\n.right {\n transform: rotateY(90deg) translateZ(50px);\n animation: shift-right 3s infinite ease-out;\n}\n\n.left {\n transform: rotateY(-90deg) translateZ(50px);\n animation: shift-left 3s infinite ease-out;\n}\n\n.front {\n transform: translateZ(50px);\n animation: shift-front 3s infinite ease-out;\n}\n\n.back {\n transform: rotateY(-180deg) translateZ(50px);\n animation: shift-back 3s infinite ease-out;\n}\n\n@keyframes spin {\n 33% {\n transform: rotateX(-36deg) rotateY(-405deg);\n }\n\n 100% {\n transform: rotateX(-36deg) rotateY(-405deg);\n }\n}\n\n@keyframes shift-top {\n 33% {\n transform: rotateX(90deg) translateZ(50px);\n }\n\n 50% {\n transform: rotateX(90deg) translateZ(100px);\n }\n\n 60% {\n transform: rotateX(90deg) translateZ(100px);\n }\n\n 75% {\n transform: rotateX(90deg) translateZ(50px);\n }\n}\n\n@keyframes shift-bottom {\n 33% {\n transform: rotateX(-90deg) translateZ(50px);\n }\n\n 50% {\n transform: rotateX(-90deg) translateZ(100px);\n }\n\n 60% {\n transform: rotateX(-90deg) translateZ(100px);\n }\n\n 75% {\n transform: rotateX(-90deg) translateZ(50px);\n }\n}\n\n@keyframes shift-right {\n 33% {\n transform: rotateY(90deg) translateZ(50px);\n }\n\n 50% {\n transform: rotateY(90deg) translateZ(100px);\n }\n\n 60% {\n transform: rotateY(90deg) translateZ(100px);\n }\n\n 75% {\n transform: rotateY(90deg) translateZ(50px);\n }\n}\n\n@keyframes shift-left {\n 33% {\n transform: rotateY(-90deg) translateZ(50px);\n }\n\n 50% {\n transform: rotateY(-90deg) translateZ(100px);\n }\n\n 60% {\n transform: rotateY(-90deg) translateZ(100px);\n }\n\n 75% {\n transform: rotateY(-90deg) translateZ(50px);\n }\n}\n\n@keyframes shift-front {\n 33% {\n transform: translateZ(50px);\n }\n\n 50% {\n transform: translateZ(100px);\n }\n\n 60% {\n transform: translateZ(100px);\n }\n\n 75% {\n transform: translateZ(50px);\n }\n}\n\n@keyframes shift-back {\n 33% {\n transform: rotateY(-180deg) translateZ(50px);\n }\n\n 50% {\n transform: rotateY(-180deg) translateZ(100px);\n }\n\n 60% {\n transform: rotateY(-180deg) translateZ(100px);\n }\n\n 75% {\n transform: rotateY(-180deg) translateZ(50px);\n }\n}"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"86f42e","snapshot":null,"tags":null,"title":"loader by Ankesh2002","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1024,"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 width: 164px;\n height: 164px;\n}\n\n.loader::before , .loader::after {\n content: '';\n position: absolute;\n width: 40px;\n height: 40px;\n background-color: #00bd26;\n left: 50%;\n top: 50%;\n animation: rotate 1s ease-in infinite;\n}\n\n.loader::after {\n width: 20px;\n height: 20px;\n background-color: #00bd26;\n animation: rotate 1s ease-in infinite, moveY 1s ease-in infinite;\n}\n\n@keyframes moveY {\n 0% , 100% {\n top: 10%\n }\n\n 45% , 55% {\n top: 59%\n }\n\n 60% {\n top: 40%\n }\n}\n\n@keyframes rotate {\n 0% {\n transform: translate(-50%, -100%) rotate(0deg) scale(1 , 1)\n }\n\n 25% {\n transform: translate(-50%, 0%) rotate(180deg) scale(1 , 1)\n }\n\n 45% , 55% {\n transform: translate(-50%, 100%) rotate(180deg) scale(3 , 0.5)\n }\n\n 60% {\n transform: translate(-50%, 100%) rotate(180deg) scale(1, 1)\n }\n\n 75% {\n transform: translate(-50%, 0%) rotate(270deg) scale(1 , 1)\n }\n\n 100% {\n transform: translate(-50%, -100%) rotate(360deg) scale(1 , 1)\n }\n}\n "},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"5e66da","snapshot":null,"tags":null,"title":"loader by sabbircoder07","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":61,"cssLen":533,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".progress {\n background-color: #ffffff;\n width: 220px;\n height: 20px;\n border-radius: 100px;\n overflow: hidden;\n backface-visibility: hidden;\n}\n\n.inner {\n background-image: linear-gradient(to left, #00cdac, #00c2c9, #00b4e3, #00a2f1, #008cef, #0088eb, #0085e6, #0081e2, #0090de, #009bd2, #00a3c1, #02aab0);\n height: 100%;\n transform-origin: left;\n animation: progress 2s infinite;\n}\n\n@keyframes progress {\n 0% {\n transform: scaleX(10%) translateX(-10%);\n }\n\n 100% {\n transform: scaleX(80%) translateX(150%);\n }\n}\n"},{"created":"2024-01-22T16:54:19.000Z","isPrivate":0,"projectId":"5033b9","snapshot":null,"tags":null,"title":"loader by Sree-1821","updated":"2024-01-22T16:54:19.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":80,"cssLen":1515,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Televisa
Univision\n

\n","css":".loader {\n --col1: rgba(228, 19, 141, 0.925);\n --col2: rgb(255, 179, 80);\n font-size: 2em;\n font-weight: 600;\n perspective: 800px;\n position: relative;\n}\n\n.loader::after,\n.loader::before,\n.loader .text::after,\n.loader .text::before {\n perspective: 800px;\n animation: anim 2s ease-in-out infinite, dotMove 10s ease-out alternate infinite, move 10s linear infinite 1s;\n ;\n content: '●';\n color: var(--col1);\n position: absolute;\n translate: -60px 500px;\n width: 5px;\n height: 5px;\n}\n\n.loader::before {\n animation-delay: 3s;\n color: var(--col1);\n}\n\n.loader .text::before {\n color: var(--col2);\n animation-delay: 2s;\n}\n\n.loader .text::after {\n color: var(--col2);\n}\n\n.loader .text {\n animation: anim 20s linear infinite, move 10s linear infinite 1s;\n color: transparent;\n background-image: linear-gradient(90deg, \n var(--col1) 0%,\n var(--col2) 100%);\n background-clip: text;\n background-size: 100%;\n background-repeat: no-repeat;\n transform: skew(5deg, -5deg);\n -webkit-background-clip: text;\n position: relative;\n}\n\n@keyframes anim {\n 0%, 100% {\n text-shadow: 2px 0px 2px rgba(179, 158, 158, .5);\n }\n\n 50% {\n background-size: 0%;\n background-position-x: left;\n text-shadow: 2px 10px 6px rgba(179, 158, 158, 1);\n }\n}\n\n@keyframes move {\n 50% {\n translate: 0px 0px;\n rotate: x 60deg;\n transform: skew(-5deg, 5deg);\n }\n}\n\n@keyframes dotMove {\n 0%, 100% {\n translate: -60px 300px;\n }\n\n 50% {\n translate: 160px -250px;\n scale: .5;\n opacity: .85;\n }\n}"}]}},"actionData":null,"errors":null}