loading forever

{"loaderData":{"0":null,"0-3":{"total":7314,"projects":[{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"285cae","snapshot":null,"tags":null,"title":"loader by Lmickk2","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":123,"cssLen":508,"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 transition: all 0.4s;\n}\n\n.loader div {\n margin-left: 0.8rem;\n background-color: transparent;\n box-shadow: 0px 2px 2px black;\n border-radius: 3em;\n height: 1rem;\n width: 2rem;\n}\n\n.box-load1 {\n animation: brighten 1.5s infinite;\n}\n\n.box-load2 {\n animation: brighten 1.5s infinite;\n animation-delay: .3s;\n}\n\n.box-load3 {\n animation: brighten 1.5s infinite;\n animation-delay: .6s;\n}\n\n@keyframes brighten {\n 100% {\n background-color: black;\n box-shadow: none;\n }\n}\n"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"9798a5","snapshot":null,"tags":null,"title":"loader by aadium","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":367,"cssLen":1812,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".cloader {\n width: 10em;\n height: 10em;\n border: 4px solid white;\n border-radius: 50%;\n margin: 50px auto;\n position: relative;\n padding: 2rem;\n}\n\n.clface {\n position: relative;\n width: 100%;\n height: 100%;\n transform: translateY(-3px);\n}\n\n.top {\n height: 10px;\n width: 4px;\n content: '';\n background-color: white;\n border-radius: 5em;\n margin-top: -30px;\n margin-left: 42px;\n}\n\n.bottom {\n height: 10px;\n width: 4px;\n content: '';\n background-color: white;\n border-radius: 5em;\n margin-top: 135px;\n margin-left: 42px;\n}\n\n.left {\n height: 4px;\n width: 10px;\n content: '';\n background-color: white;\n border-radius: 5em;\n margin-top: -82px;\n margin-left: 112px;\n}\n\n.right {\n height: 4px;\n width: 10px;\n content: '';\n background-color: white;\n border-radius: 5em;\n margin-top: -4px;\n margin-left: -35px;\n}\n\n.clsface {\n position: absolute;\n width: 40px;\n height: 40px;\n margin-left: 24px;\n margin-top: 15px;\n border-radius: 6em;\n border: 2px solid #636363;\n}\n\n.hand {\n width: 65%;\n height: 4px;\n background-color: white;\n border-radius: 3em;\n border: none;\n position: absolute;\n top: 85%;\n left: -15%;\n transform-origin: 100%;\n transform: rotate(90deg);\n}\n\n.pin {\n width: 25%;\n height: 25%;\n border-radius: 50%;\n background: white;\n position: absolute;\n top: 86%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n#sub {\n width: 10%;\n height: 10%;\n border-radius: 50%;\n background: #636363;\n position: absolute;\n top: 40%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n#h1 {\n animation: rotate 4s linear infinite;\n}\n\n#h2 {\n width: 45%;\n left: 5%;\n top: 45%;\n background-color: #636363;\n animation: rotate 1s linear infinite;\n}\n\n@keyframes rotate {\n from {\n transform: rotate(90deg);\n }\n\n to {\n transform: rotate(450deg);\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"40d7db","snapshot":null,"tags":null,"title":"loader by JaydipPrajapati1910","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1713,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n box-sizing: border-box;\n display: inline-block;\n width: 50px;\n height: 80px;\n border-top: 5px solid #fff;\n border-bottom: 5px solid #fff;\n position: relative;\n background: linear-gradient(#FF3D00 30px, transparent 0) no-repeat;\n background-size: 2px 40px;\n background-position: 50% 0px;\n animation: spinx 5s linear infinite;\n}\n\n.loader:before, .loader:after {\n content: \"\";\n width: 40px;\n left: 50%;\n height: 35px;\n position: absolute;\n top: 0;\n transform: translatex(-50%);\n background: rgba(255, 255, 255, 0.4);\n border-radius: 0 0 20px 20px;\n background-size: 100% auto;\n background-repeat: no-repeat;\n background-position: 0 0px;\n animation: lqt 5s linear infinite;\n}\n\n.loader:after {\n top: auto;\n bottom: 0;\n border-radius: 20px 20px 0 0;\n animation: lqb 5s linear infinite;\n}\n\n@keyframes lqt {\n 0%, 100% {\n background-image: linear-gradient(#FF3D00 40px, transparent 0);\n background-position: 0% 0px;\n }\n\n 50% {\n background-image: linear-gradient(#FF3D00 40px, transparent 0);\n background-position: 0% 40px;\n }\n\n 50.1% {\n background-image: linear-gradient(#FF3D00 40px, transparent 0);\n background-position: 0% -40px;\n }\n}\n\n@keyframes lqb {\n 0% {\n background-image: linear-gradient(#FF3D00 40px, transparent 0);\n background-position: 0 40px;\n }\n\n 100% {\n background-image: linear-gradient(#FF3D00 40px, transparent 0);\n background-position: 0 -40px;\n }\n}\n\n@keyframes spinx {\n 0%, 49% {\n transform: rotate(0deg);\n background-position: 50% 36px;\n }\n\n 51%, 98% {\n transform: rotate(180deg);\n background-position: 50% 4px;\n }\n\n 100% {\n transform: rotate(360deg);\n background-position: 50% 36px;\n }\n}\n \n \n"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"e9d0f8","snapshot":null,"tags":null,"title":"loader by MyNameJeremy","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":94,"cssLen":832,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".neomorph-spinner {\n position: relative;\n width: 80px;\n height: 80px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n margin: auto;\n box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);\n}\n\n.neomorph-spinner > div {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: #004dff;\n box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);\n animation: spin_5113 1s ease infinite;\n}\n\n.neomorph-spinner > div:nth-child(1) {\n transform: rotate(0deg);\n}\n\n.neomorph-spinner > div:nth-child(2) {\n transform: rotate(90deg);\n}\n\n.neomorph-spinner > div:nth-child(3) {\n transform: rotate(180deg);\n}\n\n.neomorph-spinner > div:nth-child(4) {\n transform: rotate(270deg);\n}\n\n@keyframes spin_5113 {\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"ef6071","snapshot":null,"tags":null,"title":"loader by fateself","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":678,"cssLen":683,"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

","css":".loader {\n position: relative;\n width: 120px;\n height: 120px;\n}\n\n.loader span {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform: rotate(calc(18deg * var(--i)));\n}\n\n.loader span::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background: #00ff0a;\n box-shadow: 0 0 10px #00ff0a, 0 0 20px #00ff0a, 0 0 40px #00ff0a,\n 0 0 60px #00ff0a, 0 0 80px #00ff0a, 0 0 100px #00ff0a;\n animation: animate34 2s linear infinite;\n animation-delay: calc(0.1s * var(--i));\n}\n\n@keyframes animate34 {\n 0% {\n transform: scale(1);\n }\n\n 80%,\n 100% {\n transform: scale(0);\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"63ed61","snapshot":null,"tags":null,"title":"loader by vinodjangid07","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":232,"cssLen":1778,"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}\n.panWrapper {\n width: 200px;\n height: fit-content;\n position: relative;\n display: flex;\n align-items: flex-start;\n justify-content: flex-end;\n flex-direction: column;\n gap: 20px;\n}\n\n.pan {\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n width: 100%;\n height: fit-content;\n animation: cooking 1.7s infinite;\n}\n@keyframes cooking {\n 0% {\n transform: rotate(0deg);\n transform-origin: top right;\n }\n 10% {\n transform: rotate(-4deg);\n transform-origin: top right;\n }\n 50% {\n transform: rotate(20deg);\n }\n 100% {\n transform: rotate(0deg);\n }\n}\n\n.food {\n position: absolute;\n width: 40%;\n height: 6px;\n background: linear-gradient(to bottom, rgb(82, 33, 33), rgb(200, 106, 106));\n left: 10px;\n border-radius: 50%;\n animation: flip 1.7s infinite;\n z-index: 2;\n}\n@keyframes flip {\n 0% {\n transform: translateY(0px) rotate(0deg);\n }\n 50% {\n transform: translateY(-100px) rotate(180deg);\n }\n 100% {\n transform: translateY(0px) rotate(360deg);\n }\n}\n.panBase {\n z-index: 3;\n width: 50%;\n height: 22px;\n border-bottom-left-radius: 40px;\n border-bottom-right-radius: 40px;\n background: linear-gradient(to top, rgb(3, 156, 156), rgb(10, 191, 191));\n}\n.panHandle {\n width: 40%;\n background: linear-gradient(to bottom, rgb(18, 18, 18), rgb(74, 74, 74));\n height: 10px;\n border-radius: 10px;\n}\n.panShadow {\n width: 70px;\n height: 8px;\n background-color: rgba(0, 0, 0, 0.21);\n margin-left: 15px;\n border-radius: 10px;\n animation: shadow 1.7s infinite;\n filter: blur(5px);\n}\n@keyframes shadow {\n 0% {\n transform: scaleX(0.7);\n }\n 50% {\n transform: scaleX(1);\n }\n 100% {\n transform: scaleX(0.7);\n }\n}\n"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"86b5c5","snapshot":null,"tags":null,"title":"loader by Javierrocadev","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":296,"cssLen":537,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".flex{display:flex}.h-4{height:1rem}.w-4{width:1rem}@keyframes bounce{0%, 100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,0.2,1)}}.animate-bounce{animation:bounce 1s infinite}.flex-row{flex-direction:row}.gap-2{gap:0.5rem}.rounded-full{border-radius:9999px}.bg-blue-700{--tw-bg-opacity:1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.\\[animation-delay\\:-\\.3s\\]{animation-delay:-.3s}.\\[animation-delay\\:-\\.5s\\]{animation-delay:-.5s}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"853aa8","snapshot":null,"tags":null,"title":"loader by Cornerstone-04","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":239,"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 height: 60px;\n border: 10px solid #1cd42550;\n border-top-color: #1cd425;\n animation: spin013151 1s linear infinite;\n border-radius: 100%;\n}\n\n@keyframes spin013151 {\n to {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"22e757","snapshot":null,"tags":null,"title":"loader by akshat-patel28","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":111,"cssLen":1271,"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: space-between;\n align-items: center;\n gap: 30px;\n}\n\n.box-1,.box-2,.box-3 {\n width: 1px;\n height: 115px;\n border: 1px solid #e9e9e9;\n background-color: transparent;\n box-sizing: border-box;\n}\n\n.box-1 {\n animation: box1animation 4s forwards ease-in-out infinite;\n}\n\n@keyframes box1animation {\n 0% {\n width: 1px;\n }\n\n 12.5% {\n width: 60px;\n }\n\n 25% {\n width: 60px;\n }\n\n 37.5% {\n width: 1px;\n }\n\n 50% {\n width: 1px;\n }\n\n 62.5% {\n width: 1px;\n }\n\n 75% {\n width: 1px;\n }\n\n 100% {\n width: 1px;\n }\n}\n\n.box-2 {\n animation: box2animation 4s forwards ease-in-out infinite;\n}\n\n@keyframes box2animation {\n 0% {\n width: 1px;\n }\n\n 12.5% {\n width: 1px;\n }\n\n 25% {\n width: 1px;\n }\n\n 37.5% {\n width: 60px;\n }\n\n 50% {\n width: 60px;\n }\n\n 62.5% {\n width: 1px;\n }\n\n 75% {\n width: 1px;\n }\n\n 100% {\n width: 1px;\n }\n}\n\n.box-3 {\n animation: box3animation 4s forwards ease-in-out infinite;\n}\n\n@keyframes box3animation {\n 0% {\n width: 1px;\n }\n\n 12.5% {\n width: 1px;\n }\n\n 25% {\n width: 1px;\n }\n\n 37.5% {\n width: 1px;\n }\n\n 50% {\n width: 1px;\n }\n\n 62.5% {\n width: 60px;\n }\n\n 75% {\n width: 60px;\n }\n\n 100% {\n width: 1px;\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"be6511","snapshot":null,"tags":null,"title":"loader by escannord","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":479,"cssLen":507,"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","css":".loader {\n position: relative;\n}\n.load {\n display: inline-block;\n height: calc(var(--i) * 15);\n width: calc(var(--i) * 15);\n background-color: transparent;\n position: absolute;\n border-top: 5px rgb(47, 0, 255) solid;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n animation: turn 2s infinite linear;\n}\n\n.load:nth-child(odd) {\n animation: turn 2s infinite linear reverse;\n}\n\n@keyframes turn {\n 100% {\n transform: translate(-50%, -50%) rotateZ(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"34e9cc","snapshot":null,"tags":null,"title":"loader by htwarriors108","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3261,"cssLen":1519,"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 \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 \n \n \n \n \n \n \n \n

\n\n

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

","css":".cube {\n width: 100px;\n height: 100px;\n transform-style: preserve-3d;\n animation: animate 4s linear infinite;\n cursor: pointer;\n transition: 0.5s;\n}\n\n.cube:hover {\n scale: 1.2;\n animation: animate 3s linear infinite;\n}\n\n.cube__face {\n position: absolute;\n width: 100px;\n height: 100px;\n display: flex;\n align-items: center;\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.faceBox {\n border: calc(100px / 1000) solid rgba(0, 0, 0, 0.8);\n width: calc(100px / 3);\n height: calc(100px / 3);\n opacity: 1;\n}\n\n#cube__face--front span {\n background-color: #FF4949;\n}\n\n#cube__face--right span {\n background-color: #13CE66;\n}\n\n#cube__face--left span {\n background-color: #2D8EFF;\n}\n\n#cube__face--top span {\n background-color: #FFCC3D;\n}\n\n#cube__face--bottom span {\n background-color: #fefefe;\n}\n\n#cube__face--back span {\n background-color: #f1f03e;\n}\n\n#cube__face--front {\n transform: rotateY(0deg) translateZ(calc(100px / 2));\n}\n\n#cube__face--right {\n transform: rotateY(90deg) translateZ(calc(100px / 2));\n}\n\n#cube__face--back {\n transform: rotateY(180deg) translateZ(calc(100px / 2));\n}\n\n#cube__face--left {\n transform: rotateY(-90deg) translateZ(calc(100px / 2));\n}\n\n#cube__face--top {\n transform: rotateX(90deg) translateZ(calc(100px / 2));\n}\n\n#cube__face--bottom {\n transform: rotateX(-90deg) translateZ(calc(100px / 2));\n}\n\n@keyframes animate {\n 0% {\n transform: rotateX(-30deg) rotateY(0deg) rotateZ(0deg);\n }\n\n 100% {\n transform: rotateX(-30deg) rotateY(360deg) rotateZ(360deg);\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"b33114","snapshot":null,"tags":null,"title":"loader by hoi-du","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1114,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"\n\n\n loading forever\n \n \n\n\n \n\n\n"}]}},"actionData":null,"errors":null}