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

","css":".loader {\n width: 15px;\n aspect-ratio: 1;\n border-radius: 50%;\n background: #000;\n box-shadow: -20px 0px,20px 0px;\n animation: l18 1s infinite;\n}\n\n@keyframes l18 {\n \n 25% {\n box-shadow: -20px -20px, 20px 20px\n }\n\n 50% {\n box-shadow: 0px -20px, 0px 20px\n }\n\n 75% {\n box-shadow: 20px -20px,-20px 20px\n }\n\n 100% {\n box-shadow: 20px 0px,-20px 0px\n }\n}"},{"created":"2024-01-22T16:54:22.000Z","isPrivate":0,"projectId":"cfd246","snapshot":null,"tags":null,"title":"loader by omriluz","updated":"2024-01-22T16:54:22.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":251,"cssLen":1032,"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 align-items: center;\n justify-content: center;\n flex-direction: row;\n}\n\n.slider {\n overflow: hidden;\n background-color: white;\n margin: 0 15px;\n height: 80px;\n width: 20px;\n border-radius: 30px;\n box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1), -15px -15px 30px #fff,\n inset -5px -5px 10px rgba(0, 0, 255, 0.1),\n inset 5px 5px 10px rgba(0, 0, 0, 0.1);\n position: relative;\n}\n\n.slider::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n height: 20px;\n width: 70px;\n border-radius: 100%;\n box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.3), 0px 420px 0 400px #2697f3,\n inset 0px 0px 0px rgba(0, 0, 0, 0.1);\n animation: animate_2 2.5s ease-in-out infinite;\n animation-delay: calc(-0.09s * var(--i));\n}\n\n@keyframes animate_2 {\n 0% {\n transform: translateY(250px) rotate(-80deg);\n filter: hue-rotate(0deg);\n }\n\n 50% {\n transform: translateY(0) rotate(0deg);\n }\n\n 100% {\n transform: translateY(250px) rotate(80deg);\n filter: hue-rotate(180deg);\n }\n}\n"},{"created":"2024-01-22T16:54:22.000Z","isPrivate":0,"projectId":"331646","snapshot":null,"tags":null,"title":"loader by elijahgummer","updated":"2024-01-22T16:54:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":276,"cssLen":983,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".middle {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n position: absolute;\n}\n\n.bar {\n width: 10px;\n height: 70px;\n display: inline-block;\n transform-origin: bottom center;\n border-top-right-radius: 20px;\n border-top-left-radius: 20px;\n box-shadow: 5px 10px 20px inset rgba(255, 23, 25.2);\n animation: loader 1.2s linear infinite;\n}\n\n.bar1 {\n animation-delay: 0.1s;\n}\n.bar2 {\n animation-delay: 0.2s;\n}\n.bar3 {\n animation-delay: 0.3s;\n}\n.bar4 {\n animation-delay: 0.4s;\n}\n.bar5 {\n animation-delay: 0.5s;\n}\n.bar6 {\n animation-delay: 0.6s;\n}\n.bar7 {\n animation-delay: 0.7s;\n}\n.bar8 {\n animation-delay: 0.8s;\n}\n\n@keyframes loader {\n 0% {\n transform: scaleY(0.1);\n background: transparent; /* Change background to transparent */\n }\n 50% {\n transform: scaleY(1);\n background: #e74c3c; /* Change background to a shade of red */\n }\n 100% {\n transform: scaleY(0.1);\n background: transparent; /* Change background to transparent */\n }\n}\n"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"13beb3","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":629,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 150px;\n height: 150px;\n border-radius: 50%;\n position: relative;\n box-shadow: 0 0 30px 4px rgba(0, 0, 0, 0.5) inset,\n 0 5px 12px rgba(0, 0, 0, 0.15);\n overflow: hidden;\n}\n\n.loader:before,\n .loader:after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 45%;\n top: -40%;\n background-color: #2e2e2e;\n animation: wave 5s linear infinite;\n}\n\n.loader:before {\n border-radius: 30%;\n background: rgba(122, 122, 122, 0.4);\n animation: wave 5s linear infinite;\n}\n\n@keyframes wave {\n 0% {\n transform: rotate(0);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"41f36d","snapshot":null,"tags":null,"title":"loader by sabbircoder07","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":61,"cssLen":574,"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 overflow: hidden;\n backface-visibility: hidden;\n transform: skew(150deg);\n}\n\n.inner {\n background-image: linear-gradient(to right bottom, #1d2671, #4b2776, #6d2677, #8c2674, #a62a6f, #a73071, #a93572, #aa3a74, #943e7b, #7c417e, #65437c, #4e4376);\n height: 100%;\n transform-origin: left;\n transform: skew(-150deg);\n animation: progress 1.8s infinite;\n}\n\n@keyframes progress {\n 0% {\n transform: scaleX(10%) translateX(-10%);\n }\n\n 100% {\n transform: scaleX(90%) translateX(150%);\n }\n}\n"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"4c568c","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":33,"cssLen":661,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".lds-hourglass {\n display: inline-block;\n position: relative;\n width: 80px;\n height: 80px;\n}\n\n.lds-hourglass:after {\n content: \" \";\n display: block;\n border-radius: 50%;\n width: 0;\n height: 0;\n margin: 8px;\n box-sizing: border-box;\n border: 32px solid #fff;\n border-color: #fff transparent #fff transparent;\n animation: lds-hourglass 1.2s infinite;\n}\n\n@keyframes lds-hourglass {\n 0% {\n transform: rotate(0);\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n }\n\n 50% {\n transform: rotate(900deg);\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n }\n\n 100% {\n transform: rotate(1800deg);\n }\n}\n"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"da014f","snapshot":null,"tags":null,"title":"loader by carlosepcc","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":382,"cssLen":3137,"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: flex;\n width: 8rem;\n height: 8rem;\n justify-items: center;\n justify-content: center;\n align-items: center;\n}\n\n.head {\n width: 100%;\n height: 100%;\n background-color: #FA95FB;\n border-radius: 50%;\n animation: move 3s linear infinite;\n box-shadow: 0 1rem 1rem #E220B8;\n filter: blur(.3rem);\n z-index: 1;\n}\n\n.eye {\n display: flex;\n position: absolute;\n width: 4rem;\n height: 4rem;\n background-color: #EFFFC8;\n background: radial-gradient(rgba(255,247,247,1) 20%, rgba(255,170,197,1) 100%);\n border-radius: 50%;\n align-items: center;\n justify-content: center;\n z-index: 2;\n box-shadow: 0 0 1rem #F752F7;\n animation: move 5s alternate infinite;\n}\n\n.eye::before {\n content: \"\";\n display: flex;\n width: 1rem;\n height: 2rem;\n background-color: #000;\n background: radial-gradient(rgba(0,0,0,1) 44%, #E220B8 50%, transparent 60%);\n border-radius: 50%;\n animation: blink 4s ease-in-out alternate infinite;\n}\n\n.flames {\n display: flex;\n position: absolute;\n z-index: 0;\n}\n\n.particle {\n display: flex;\n position: absolute;\n background-color: #FA95FB;\n border-radius: 50%;\n filter: blur(.3rem);\n border-top: 5px solid #E220B8;\n border-left: 5px solid #E220B8;\n}\n\n.flames::before {\n content: \"\";\n position: absolute;\n width: 8rem;\n height: 8rem;\n background: #f865d8;\n filter: blur(5rem);\n opacity: 0.5;\n border-radius: 50%;\n top: -8rem;\n left: -4rem;\n z-index: 4;\n animation: pulse 3s linear infinite;\n}\n\n.particle:nth-child(1) {\n width: 4rem;\n height: 4rem;\n top: -6rem;\n animation: move 7s alternate-reverse infinite;\n}\n\n.particle:nth-child(2) {\n width: 1.5rem;\n height: 1.5rem;\n top: -8rem;\n left: -5rem;\n animation: move 1.5s ease-in-out reverse infinite;\n}\n\n.particle:nth-child(3) {\n width: 4rem;\n height: 4rem;\n top: -5rem;\n left: -4rem;\n animation: move 8s alternate-reverse infinite;\n}\n\n.particle:nth-child(4) {\n width: 3rem;\n height: 3rem;\n top: -7.5rem;\n animation: move 4s alternate-reverse infinite;\n}\n\n.particle:nth-child(5) {\n width: 2rem;\n height: 2rem;\n top: -9rem;\n left: 1rem;\n animation: move 2.5s alternate-reverse infinite;\n}\n\n.particle:nth-child(6) {\n width: 2rem;\n height: 2rem;\n top: -6.8rem;\n left: -1.5rem;\n animation: move 5s alternate-reverse infinite;\n}\n\n.particle:nth-child(7) {\n width: 1rem;\n height: 1rem;\n top: -10rem;\n left: -1rem;\n animation: move 1.2s alternate-reverse infinite;\n}\n\n.particle:nth-child(8) {\n width: 1.3rem;\n height: 1.3rem;\n top: -7.5rem;\n left: -2rem;\n animation: move 2.5s alternate-reverse infinite;\n}\n\n@keyframes move {\n 0% {\n transform: translate(0, 0);\n }\n\n 50% {\n transform: translate(4px, 6px);\n }\n\n 100% {\n transform: translate(0, 0);\n }\n}\n\n@keyframes blink {\n 20% {\n transform: translate(0, 0);\n height: 2rem;\n }\n\n 30% {\n height: 0;\n }\n\n 40% {\n transform: translate(5px, 10px);\n height: 0;\n }\n\n 50% {\n height: 2rem;\n }\n\n 70% {\n transform: translate(-10px, -10px);\n }\n\n 90% {\n transform: translate(0, 0);\n }\n}\n\n@keyframes pulse {\n 0% {\n opacity: 0.5;\n }\n\n 50% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0.5;\n }\n}\n"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"105890","snapshot":null,"tags":null,"title":"loader by JorginoSerra","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":270,"cssLen":1633,"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":"/* \n---------------------------------------------\nLoader Style\n--------------------------------------------- \n*/\n\n.js-preloader {\n /* You must change postion:relative; for position:fixed; */\n position: relative;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: -webkit-box;\n display: flex;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n opacity: 1;\n visibility: visible;\n z-index: 9999;\n -webkit-transition: opacity 0.25s ease;\n transition: opacity 0.25s ease;\n}\n\n.js-preloader.loaded {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n}\n\n@keyframes dot8567 {\n 50% {\n -webkit-transform: translateX(96px);\n transform: translateX(96px);\n }\n}\n\n@keyframes dots723423 {\n 50% {\n -webkit-transform: translateX(-31px);\n transform: translateX(-31px);\n }\n}\n\n.preloader-inner {\n position: relative;\n width: 142px;\n height: 40px;\n background: transparent;\n}\n\n.preloader-inner .dot {\n position: absolute;\n width: 16px;\n height: 16px;\n top: 12px;\n left: 15px;\n background: #e75e8d;\n border-radius: 50%;\n -webkit-transform: translateX(0);\n transform: translateX(0);\n -webkit-animation: dot8567 2.8s infinite;\n animation: dot8567 2.8s infinite;\n}\n\n.preloader-inner .dots {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n margin-top: 12px;\n margin-left: 31px;\n -webkit-animation: dots723423 2.8s infinite;\n animation: dots723423 2.8s infinite;\n}\n\n.preloader-inner .dots span {\n display: block;\n float: left;\n width: 16px;\n height: 16px;\n margin-left: 16px;\n background: #e75e8d;\n border-radius: 50%;\n}\n"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"a22a5f","snapshot":null,"tags":null,"title":"loader by SilasRodrigues19","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":714,"cssLen":708,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

","css":".loader {\n z-index: 20;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: visible;\n}\n\n.loader span {\n width: 50px;\n height: 50px;\n margin: -5px;\n animation: dots_411 1.5s infinite ease-in-out;\n}\n\n.loader span:nth-child(1) {\n -webkit-animation-delay: -.40s;\n animation-delay: -.40s;\n}\n\n.loader span:nth-child(2) {\n -webkit-animation-delay: -.25s;\n animation-delay: -.25s;\n}\n\n.loader span:nth-child(3) {\n -webkit-animation-delay: -.10s;\n animation-delay: -.10s;\n}\n\n@keyframes dots_411 {\n 5% {\n opacity: 0;\n }\n\n 0%, 80%, 100% {\n -webkit-transform: scale(0);\n transform: scale(0);\n }\n\n 40% {\n -webkit-transform: scale(.8);\n transform: scale(.8);\n }\n}\n"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"17b843","snapshot":null,"tags":null,"title":"loader by vk-uiux","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":97,"cssLen":711,"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: 33px;\n height: 33px;\n perspective: 67px;\n}\n\n.loader div {\n width: 100%;\n height: 100%;\n background: #2f3545;\n position: absolute;\n left: 50%;\n transform-origin: left;\n animation: loader 2s infinite;\n}\n\n.loader div:nth-child(1) {\n animation-delay: 0.15s;\n}\n\n.loader div:nth-child(2) {\n animation-delay: 0.3s;\n}\n\n.loader div:nth-child(3) {\n animation-delay: 0.45s;\n}\n\n.loader div:nth-child(4) {\n animation-delay: 0.6s;\n}\n\n.loader div:nth-child(5) {\n animation-delay: 0.75s;\n}\n\n@keyframes loader {\n 0% {\n transform: rotateY(0deg);\n }\n\n 50%, 80% {\n transform: rotateY(-180deg);\n }\n\n 90%, 100% {\n opacity: 0;\n transform: rotateY(-180deg);\n }\n}"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"981c45","snapshot":null,"tags":null,"title":"loader by abuayaan01","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":288,"cssLen":462,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n","css":".flex {\n display: flex;\n}\n.h-14 {\n height: 3.5rem;\n}\n.w-14 {\n width: 3.5rem;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n.animate-spin {\n animation: spin 1s linear infinite;\n}\n.flex-row {\n flex-direction: row;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.bg-gradient-to-tr {\n background-image: linear-gradient(to top right, var(--tw-gradient-stops));\n}\n.\\[animation-delay\\:\\.7s\\] {\n animation-delay: 0.7s;\n}\n"},{"created":"2024-01-22T16:54:21.000Z","isPrivate":0,"projectId":"6368f4","snapshot":null,"tags":null,"title":"loader by vinodjangid07","updated":"2024-01-22T16:54:21.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4354,"cssLen":1759,"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 \n

\n \n \n \n \n \n \n \n \n

\n\n \n \n \n

\n","css":".loader {\n width: fit-content;\n height: fit-content;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.truckWrapper {\n width: 200px;\n height: 100px;\n display: flex;\n flex-direction: column;\n position: relative;\n align-items: center;\n justify-content: flex-end;\n overflow-x: hidden;\n}\n/* truck upper body */\n.truckBody {\n width: 130px;\n height: fit-content;\n margin-bottom: 6px;\n animation: motion 1s linear infinite;\n}\n/* truck suspension animation*/\n@keyframes motion {\n 0% {\n transform: translateY(0px);\n }\n 50% {\n transform: translateY(3px);\n }\n 100% {\n transform: translateY(0px);\n }\n}\n/* truck's tires */\n.truckTires {\n width: 130px;\n height: fit-content;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0px 10px 0px 15px;\n position: absolute;\n bottom: 0;\n}\n.truckTires svg {\n width: 24px;\n}\n\n.road {\n width: 100%;\n height: 1.5px;\n background-color: #282828;\n position: relative;\n bottom: 0;\n align-self: flex-end;\n border-radius: 3px;\n}\n.road::before {\n content: \"\";\n position: absolute;\n width: 20px;\n height: 100%;\n background-color: #282828;\n right: -50%;\n border-radius: 3px;\n animation: roadAnimation 1.4s linear infinite;\n border-left: 10px solid white;\n}\n.road::after {\n content: \"\";\n position: absolute;\n width: 10px;\n height: 100%;\n background-color: #282828;\n right: -65%;\n border-radius: 3px;\n animation: roadAnimation 1.4s linear infinite;\n border-left: 4px solid white;\n}\n\n.lampPost {\n position: absolute;\n bottom: 0;\n right: -90%;\n height: 90px;\n animation: roadAnimation 1.4s linear infinite;\n}\n\n@keyframes roadAnimation {\n 0% {\n transform: translateX(0px);\n }\n 100% {\n transform: translateX(-350px);\n }\n}\n"}]}},"actionData":null,"errors":null}