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

\n Loading...\n

","css":".loader {\n width: 100px;\n height: 100px;\n box-sizing: border-box;\n border-radius: 50%;\n border-top: 5px solid #e74c3c;\n position: relative;\n animation: load 2s linear infinite;\n}\n\n.loader::before,.loader::after {\n content: '';\n width: 100px;\n height: 100px;\n position: absolute;\n left: 0;\n top: 0;\n box-sizing: border-box;\n border-radius: 50%;\n}\n\n.loader::before {\n border-top: 5px solid #e67e22;\n transform: rotate(120deg);\n}\n\n.loader::after {\n border-top: 5px solid #3498db;\n transform: rotate(240deg);\n}\n\n.loader span {\n position: absolute;\n font-size: small;\n width: 100px;\n height: 100px;\n color: #fff;\n text-align: center;\n line-height: 100px;\n animation: a2 2s linear infinite;\n}\n\n@keyframes load {\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes a2 {\n to {\n transform: rotate(-360deg);\n }\n}"},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"27b264","snapshot":null,"tags":null,"title":"loader by Praashoo7","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":433,"cssLen":1004,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".main {\n display: flex;\n flex-wrap: wrap;\n width: 15em;\n align-items: center;\n justify-content: center;\n}\n\n.card {\n width: 40px;\n height: 40px;\n border-top-left-radius: 10px;\n background: lightgrey;\n transition: .4s ease-in-out, .2s background-color;\n background: rgba(255, 255, 255, 0.2);\n backdrop-filter: blur(5px);\n margin: .2em;\n border-radius: 5px;\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.3);\n animation: 2s loading90 infinite;\n}\n\n.card:nth-child(2) {\n animation-delay: 1s;\n}\n\n.card:nth-child(4) {\n animation-delay: 1s;\n}\n\n.card:nth-child(6) {\n animation-delay: 1s;\n}\n\n.card:nth-child(8) {\n animation-delay: 1s;\n}\n\n.card:nth-child(10) {\n animation-delay: 1s;\n}\n\n.card:nth-child(12) {\n animation-delay: 1s;\n}\n\n.card:nth-child(14) {\n animation-delay: 1s;\n}\n\n@keyframes loading90 {\n 0% {\n background: rgba(255, 255, 255, 0.2);\n }\n\n 50% {\n background: limegreen;\n }\n\n 100% {\n background: rgba(255, 255, 255, 0.2);\n }\n}"},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"fc0bbd","snapshot":null,"tags":null,"title":"loader by ashish-yadv","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":102,"cssLen":676,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 60px;\n display: flex;\n justify-content: space-evenly;\n}\n\n.ball {\n list-style: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background-color: #fff;\n}\n\n.ball:nth-child(1) {\n animation: bounce-1 2.1s ease-in-out infinite;\n}\n\n@keyframes bounce-1 {\n 50% {\n transform: translateY(-90px);\n scale: 0.3;\n }\n}\n\n.ball:nth-child(2) {\n animation: bounce-3 2.1s ease-in-out 0.3s infinite;\n}\n\n@keyframes bounce-2 {\n 50% {\n transform: translateY(-90px);\n scale: 0.3;\n }\n}\n\n.ball:nth-child(3) {\n animation: bounce-3 2.1s ease-in-out 0.6s infinite;\n}\n\n@keyframes bounce-3 {\n 50% {\n transform: translateY(-90px);\n scale: 0.3;\n }\n}"},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"b013b8","snapshot":null,"tags":null,"title":"loader by NlghtM4re","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":59,"cssLen":517,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 60%;\n height: 10px;\n border-radius: 2px;\n background-color: rgba(0, 0, 0, 0.2);\n position: absolute;\n}\n\n.loader::before {\n content: \"\";\n position: absolute;\n background-color: rgb(9, 188, 9);\n width: 0%;\n height: 100%;\n border-radius: 2px;\n animation: load 3.5s ease-in-out infinite;\n box-shadow: rgb(9, 188, 9) 0px 2px 29px 0px;\n}\n\n.container {\n display: flex;\n justify-content: center;\n}\n\n@keyframes load {\n 50% {\n width: 100%;\n }\n\n 100% {\n right: 0;\n left: unset;\n }\n}"},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"3a35c2","snapshot":null,"tags":null,"title":"loader by Juanes200122","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":301,"cssLen":2037,"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/* Gradiente amarillo */\n background: linear-gradient(to bottom,\n hsl(60, 100%, 25.1%) 0%,\n hsl(60, 100%, 32.06%) 5.5%,\n hsl(60, 100%, 36.88%) 12.1%,\n hsl(60, 100%, 40.7%) 19.6%,\n hsl(60, 100%, 43.88%) 27.9%,\n hsl(60, 100%, 46.58%) 36.6%,\n hsl(60, 100%, 48.91%) 45.6%,\n hsl(60, 100%, 50.91%) 54.6%,\n hsl(60, 100%, 52.62%) 63.4%,\n hsl(60, 100%, 54.08%) 71.7%,\n hsl(60, 100%, 55.29%) 79.4%,\n hsl(60, 100%, 56.28%) 86.2%,\n hsl(60, 100%, 57.04%) 91.9%,\n hsl(60, 100%, 57.59%) 96.3%,\n hsl(60, 100%, 57.93%) 99%,\n hsl(60, 100%, 58.04%) 100%);\n}\n\n.cube-top {\n position: absolute;\n width: 75px;\n height: 75px;\n background: hsl(320, 2%, 24%) 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(0, 0%, 0%) 19.6%;\n transform: translateZ(-90px);\n filter: blur(10px);\n box-shadow: 0 0 10px #323232,\n 0 0 20px hsl(63, 42%, 41%) 19.6%,\n 0 0 30px #323232,\n 0 0 40px hsl(70, 42%, 41%) 19.6%;\n}"},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"de4faf","snapshot":null,"tags":null,"title":"loader by gharsh11032000","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":98,"cssLen":611,"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: 70px;\n height: 70px;\n}\n\n.loader-large {\n position: absolute;\n inset: 0;\n margin: auto;\n width: 100%;\n height: 100%;\n background-color: #D4ADFC;\n border-radius: 10px;\n animation: loading 2s infinite;\n}\n\n.loader-small {\n position: absolute;\n width: 50%;\n height: 50%;\n inset: 0;\n margin: auto;\n background-color: #5C469C;\n z-index: 2;\n border-radius: 6px;\n animation: loading 2s infinite reverse;\n}\n\n@keyframes loading {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotateY(180deg);\n }\n\n 100% {\n transform: rotateX(180deg);\n }\n}\n"},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"86c36e","snapshot":null,"tags":null,"title":"loader by carhtube","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":90,"cssLen":937,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n background: linear-gradient(\n 90deg,\n #6f22ff,\n #00aaff,\n #2cc92c,\n #00aaff,\n #6f22ff\n );\n background-size: 600% 600%;\n width: 100px;\n height: 100px;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n animation: neonRotate 10s linear infinite;\n position: relative;\n}\n.circleMiddle {\n background-color: rgb(255, 255, 255);\n width: 80px;\n height: 80px;\n border-radius: 50%;\n z-index: 99;\n}\n.worm {\n position: absolute;\n width: 20px;\n height: 105px;\n background-color: hsl(0, 0%, 100%);\n border-radius: 5px;\n animation: rotateWorm 4s linear infinite;\n z-index: 80;\n}\n@keyframes neonRotate {\n 0%,\n 100% {\n background-position: 0% 0%;\n }\n 25%,\n 75% {\n background-position: 100% 0%;\n }\n 50% {\n background-position: 0% 100%;\n }\n}\n@keyframes rotateWorm {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"8c7302","snapshot":null,"tags":null,"title":"loader by mobinkakei","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":184,"cssLen":1184,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader-3 {\n width: 10em;\n display: flex;\n justify-content: space-evenly;\n}\n\n.circle {\n width: 1em;\n height: 1em;\n border-radius: 50%;\n position: relative;\n}\n\n.circle:nth-child(1) {\n background-color: #90be6d;\n}\n\n.circle:nth-child(2) {\n background-color: #f9c74f;\n}\n\n.circle:nth-child(3) {\n background-color: #f8961e;\n}\n\n.circle:nth-child(4) {\n background-color: #f3722c;\n}\n\n.circle:nth-child(5) {\n background-color: #f94346;\n}\n\n.circle::before {\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n border-radius: 50%;\n opacity: 0.5;\n animation: animateLoader38 2s ease-out infinite;\n}\n\n.circle:nth-child(1)::before {\n background-color: #90be6d;\n}\n\n.circle:nth-child(2)::before {\n background-color: #f9c74f;\n animation-delay: 0.2s;\n}\n\n.circle:nth-child(3)::before {\n background-color: #f8961e;\n animation-delay: 0.4s;\n}\n\n.circle:nth-child(4)::before {\n background-color: #f3722c;\n animation-delay: 0.6s;\n}\n\n.circle:nth-child(5)::before {\n background-color: #f94346;\n animation-delay: 0.8s;\n}\n\n@keyframes animateLoader38 {\n 0% {\n transform: scale(1);\n }\n\n 50%,\n 75% {\n transform: scale(2.5);\n }\n\n 80%,\n 100% {\n opacity: 0;\n }\n}"},{"created":"2024-01-22T16:54:27.000Z","isPrivate":0,"projectId":"b415ab","snapshot":null,"tags":null,"title":"loader by Nawsome","updated":"2024-01-22T16:54:27.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":673,"cssLen":219,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n","css":".circle {\n animation: move571 4s linear infinite;\n}\n\n.circle.right {\n animation-direction: reverse;\n}\n\n@keyframes move571 {\n 25% {\n transform: translateX(-32px);\n }\n\n 75% {\n transform: translateX(32px);\n }\n}"},{"created":"2024-01-22T16:54:26.000Z","isPrivate":0,"projectId":"7c6c96","snapshot":null,"tags":null,"title":"loader by SteveBloX","updated":"2024-01-22T16:54:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":69,"cssLen":495,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".progress-loader {\n top: 50%;\n left: 50%;\n position: absolute;\n transform: translate(-50%, -50%);\n width: 150px;\n background: rgba(236, 236, 238, 0.253);\n height: 10px;\n border-radius: 7px;\n}\n\n.progress {\n width: 1px;\n height: 10px;\n border-radius: 7px;\n background: rgb(255, 255, 255);\n transition: 0.5s;\n animation: loading_44 5s cubic-bezier(.4,1.01,1,1) infinite;\n}\n\n@keyframes loading_44 {\n 0% {\n width: 0%;\n }\n\n 50% {\n width: 100%;\n }\n\n 100% {\n width: 0%;\n }\n}"},{"created":"2024-01-22T16:54:26.000Z","isPrivate":0,"projectId":"d27dcb","snapshot":null,"tags":null,"title":"loader by shadowmurphy","updated":"2024-01-22T16:54:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":234,"cssLen":385,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cola {\n --pathlength: 1384;\n width: 45px;\n fill: transparent;\n stroke: black;\n stroke-linecap: round;\n stroke-width: 15px;\n stroke-dashoffset: var(--pathlength);\n stroke-dasharray: 0 var(--pathlength);\n animation: loader 8s cubic-bezier(.5,.1,.5,1) infinite both;\n}\n\n@keyframes loader {\n 90%, 100% {\n stroke-dashoffset: 0;\n stroke-dasharray: var(--pathlength) 0;\n }\n}"},{"created":"2024-01-22T16:54:26.000Z","isPrivate":0,"projectId":"a6c724","snapshot":null,"tags":null,"title":"loader by Pradeepsaranbishnoi","updated":"2024-01-22T16:54:26.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":235,"cssLen":1238,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"/* The loader */\n.loader {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 200px;\n height: 200px;\n margin-top: -100px;\n margin-left: -100px;\n perspective: 600px;\n transform-style: perserve-3d;\n}\n\n/* The dot */\n.dot {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 100px;\n height: 100px;\n margin-top: -50px;\n margin-left: -50px;\n border-radius: 100px;\n border: 20px solid #1e3f57;\n transform-style: perserve-3d;\n transform: scale(0) rotateX(60deg);\n animation: dot 3s cubic-bezier(.67,.08,.46,1.5) infinite;\n}\n\n.dot:nth-child(2) {\n animation-delay: 200ms;\n}\n\n.dot:nth-child(3) {\n animation-delay: 400ms;\n}\n\n.dot:nth-child(4) {\n animation-delay: 600ms;\n}\n\n.dot:nth-child(5) {\n animation-delay: 800ms;\n}\n\n.dot:nth-child(6) {\n animation-delay: 1000ms;\n}\n\n.dot:nth-child(7) {\n animation-delay: 1200ms;\n}\n\n.dot:nth-child(8) {\n animation-delay: 1400ms;\n}\n\n@keyframes dot {\n 0% {\n opacity: 0;\n border-color: #6bb2cd;\n transform: rotateX(60deg) rotateY(45deg) translateZ(-100px) scale(0.1);\n }\n\n 40% {\n opacity: 1;\n transform: rotateX(0deg) rotateY(20deg) translateZ(0) scale(1);\n }\n\n 100% {\n opacity: 0;\n transform: rotateX(60deg) rotateY(-45deg) translateZ(-100px) scale(0.1);\n }\n}"}]}},"actionData":null,"errors":null}