loading forever

{"loaderData":{"0":null,"0-3":{"total":7413,"projects":[{"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"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"0db7b7","snapshot":null,"tags":null,"title":"loader by JaydipPrajapati1910","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":835,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n background: linear-gradient(to right, #2cc16f 50%, #fafafa 50%);\n border-radius: 100%;\n height: 70px;\n width: 70px;\n animation: loader-circle-time 8s steps(800, start) infinite;\n}\n\n.loader:after {\n content: \"\";\n border-radius: 100% 0 0 100% / 50% 0 0 50%;\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 50%;\n animation: loader-circle-mask 8s steps(250, start) infinite;\n transform-origin: 100% 50%;\n}\n\n@keyframes loader-circle-time {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes loader-circle-mask {\n 0% {\n background: #fafafa;\n transform: rotate(0deg);\n }\n\n 50% {\n background: #fafafa;\n transform: rotate(-180deg);\n }\n\n 50.01% {\n background: #2cc16f;\n transform: rotate(0deg);\n }\n\n 100% {\n background: #2cc16f;\n transform: rotate(-180deg);\n }\n}\n\n \n"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"087c34","snapshot":null,"tags":null,"title":"loader by Pradeepsaranbishnoi","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":592,"cssLen":1906,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

","css":"/* The loader container */\n.loader {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 200px;\n height: 100px;\n margin-top: -100px;\n margin-left: -100px;\n perspective: 1000px;\n transform-style: preserv3d;\n}\n\n.loader--reflect {\n margin-top: 0;\n}\n\n.loader--reflect:after {\n content: '';\n position: absolute;\n top: 0;\n left: -25%;\n width: 150%;\n height: 110%;\n background: linear-gradient(0deg, rgba(238, 238, 238, 1), rgba(238, 238, 238, 1) 20%, rgba(238, 238, 238, 0.3));\n}\n\n\n/* The bar */\n.bar {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 20px;\n height: 100px;\n background-color: #1e3f57;\n transform: scaleY(0);\n transform-style: preserve3d;\n animation: bar 3s cubic-bezier(.81,.04,.4,.7) infinite;\n}\n\n.bar:nth-child(2) {\n left: 20px;\n background-color: #264a63;\n animation-delay: 50ms;\n}\n\n.bar:nth-child(3) {\n left: 40px;\n background-color: #2d566f;\n animation-delay: 100ms;\n}\n\n.bar:nth-child(4) {\n left: 60px;\n background-color: #35617a;\n animation-delay: 150ms;\n}\n\n.bar:nth-child(5) {\n left: 80px;\n background-color: #3d6d86;\n animation-delay: 200ms;\n}\n\n.bar:nth-child(6) {\n left: 100px;\n background-color: #447892;\n animation-delay: 250ms;\n}\n\n.bar:nth-child(7) {\n left: 120px;\n background-color: #4c849e;\n animation-delay: 300ms;\n}\n\n.bar:nth-child(8) {\n left: 140px;\n background-color: #548fa9;\n animation-delay: 350ms;\n}\n\n.bar:nth-child(9) {\n left: 160px;\n background-color: #5c9bb5;\n animation-delay: 400ms;\n}\n\n.bar:nth-child(10) {\n left: 180px;\n background-color: #63a6c1;\n animation-delay: 450ms;\n}\n\n.loader--reflect .bar {\n animation-name: bar-reflect;\n}\n\n@keyframes bar {\n 0% {\n transform: rotateZ(-180deg) rotateX(-360deg);\n }\n\n 75%,100% {\n transform: rotateZ(0) rotateX(0);\n }\n}\n\n@keyframes bar-reflect {\n 0% {\n transform: rotateZ(180deg) rotateX(360deg);\n }\n\n 75%,100% {\n transform: rotateZ(0) rotateX(0);\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"0dafd7","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":156,"cssLen":2205,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".frame {\n position: absolute;\n top: 50%;\n left: 50%;\n margin-top: -200px;\n margin-left: -200px;\n}\n\n.center {\n position: absolute;\n width: 220px;\n height: 220px;\n top: 90px;\n left: 90px;\n}\n\n.dot-1 {\n position: absolute;\n z-index: 3;\n width: 30px;\n height: 30px;\n top: 95px;\n left: 95px;\n background: #fff;\n border-radius: 50%;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n -webkit-animation: jump-jump-1 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;\n animation: jump-jump-1 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;\n}\n\n.dot-2 {\n position: absolute;\n z-index: 2;\n width: 60px;\n height: 60px;\n top: 80px;\n left: 80px;\n background: #fff;\n border-radius: 50%;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n -webkit-animation: jump-jump-2 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;\n animation: jump-jump-2 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;\n}\n\n.dot-3 {\n position: absolute;\n z-index: 1;\n width: 90px;\n height: 90px;\n top: 65px;\n left: 65px;\n background: #fff;\n border-radius: 50%;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n -webkit-animation: jump-jump-3 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;\n animation: jump-jump-3 2s cubic-bezier(0.21, 0.98, 0.6, 0.99) infinite alternate;\n}\n\n@keyframes jump-jump-1 {\n 0%, 70% {\n box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);\n -webkit-transform: scale(0);\n transform: scale(0);\n }\n\n 100% {\n box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n@keyframes jump-jump-2 {\n 0%, 40% {\n box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);\n -webkit-transform: scale(0);\n transform: scale(0);\n }\n\n 100% {\n box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n@keyframes jump-jump-3 {\n 0%, 10% {\n box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);\n -webkit-transform: scale(0);\n transform: scale(0);\n }\n\n 100% {\n box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"7aec4b","snapshot":null,"tags":null,"title":"loader by Saiyed-Tanvir","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":23,"cssLen":460,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".box {\n height: 5cm;\n width: 5cm;\n border: 5px solid #ffa600;\n box-shadow: inset 0 0 0 #ffa600;\n animation: load 2s ease-in-out infinite;\n}\n\n@keyframes load {\n 0% {\n box-shadow: inset -2.5cm -2.5cm 0 #ffa600;\n }\n\n 25% {\n box-shadow: inset 2.5cm -2.5cm 0 #ffa600;\n }\n\n 50% {\n box-shadow: inset 2.5cm 2.5cm 0 #ffa600;\n }\n\n 75% {\n box-shadow: inset -2.5cm 2.5cm 0 #ffa600;\n }\n\n 100% {\n box-shadow: inset -2.5cm -2.5cm 0 #ffa600;\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"e55ee1","snapshot":null,"tags":null,"title":"loader by AqFox","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":229,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".spinner {\n width: 6px;\n height: 6px;\n animation: spinner-xp626r 1.1s infinite;\n border-radius: 50%;\n box-shadow: 24px 0 0 6px #004dff, -24px 0 0 6px #004dff;\n}\n\n@keyframes spinner-xp626r {\n to {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"cc98c1","snapshot":null,"tags":null,"title":"loader by bernethe","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":628,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n clear: both;\n width: 2rem;\n height: 2rem;\n margin: 1rem auto;\n border: 0.0625rem #000 solid;\n border-radius: 0.25rem;\n position: relative;\n background: linear-gradient(45deg, transparent 49%, #000 50%, #000 50%, transparent 51%, transparent),\n\t\t\t\tlinear-gradient(-45deg, transparent 49%, #000 50%, #000 50%, transparent 51%, transparent);\n background-size: 1rem 1rem;\n background-position: 0% 0%;\n -webkit-animation: spTexture 1s infinite linear;\n animation: spTexture 1s infinite linear;\n}\n\n@keyframes spTexture {\n from {\n background-position: 0 0;\n }\n\n to {\n background-position: -1rem 0;\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"cedd43","snapshot":null,"tags":null,"title":"loader by shadowfax29","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":156,"cssLen":1185,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".sharingon {\n width: 6em;\n height: 6em;\n background-color: red;\n border: 6px solid black;\n animation: rot 1s ease-in-out infinite;\n}\n\n.ring {\n position: absolute;\n content: \"\";\n left: 50%;\n top: 50%;\n width: 3.5em;\n height: 3.5em;\n border: 4px solid rgb(110, 13 ,13 ,0.5);\n transform: translate(-50%,-50%);\n}\n\n.sharingon, .ring, .to,.circle {\n border-radius: 50%;\n}\n\n.to,.circle {\n position: absolute;\n content: \"\";\n width: 0.9em;\n height: 0.9em;\n background-color: black;\n}\n\n.to:nth-child(1) {\n top: -0.5em;\n left: 50%;\n transform: translate(-40%);\n}\n\n.to::before {\n content: \"\";\n position: absolute;\n top: -0.5em;\n right: -0.2em;\n width: 1.1em;\n height: 0.9em;\n box-sizing: border-box;\n border-left: 16px solid black;\n border-radius: 100% 0 0;\n}\n\n.to:nth-child(2) {\n bottom: 0.5em;\n left: -0.35em;\n transform: rotate(-120deg);\n}\n\n.to:nth-child(3) {\n bottom: 0.5em;\n right: -0.35em;\n transform: rotate(120deg);\n}\n\n.circle {\n top: 50%;\n left: 50%;\n transform: translate(-50%,-50%);\n box-shadow: 0 0 20px 1px;\n width: 1em;\n height: 1em;\n}\n\n@keyframes rot {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:13.000Z","isPrivate":0,"projectId":"6017eb","snapshot":null,"tags":null,"title":"loader by Cebucoder","updated":"2024-01-22T16:54:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":90,"cssLen":839,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Redirecting...\n

\n","css":".loader {\n width: 350px;\n height: 180px;\n border-radius: 10px;\n background: #fff;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-evenly;\n padding: 30px;\n box-shadow: 2px 2px 10px -5px lightgrey;\n}\n.loading {\n width: 100%;\n height: 10px;\n background: lightgrey;\n border-radius: 10px;\n position: relative;\n}\n.loading::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 50%;\n height: 10px;\n background: #002;\n border-radius: 10px;\n z-index: 1;\n animation: loading 0.6s alternate infinite;\n}\nlabel {\n color: #002;\n font-size: 18px;\n animation: bit 0.6s alternate infinite;\n}\n\n@keyframes bit {\n from {\n opacity: 0.3;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes loading {\n 0% {\n left: 25%;\n }\n 100% {\n left: 50%;\n }\n 0% {\n left: 0%;\n }\n}\n"},{"created":"2024-01-22T16:54:12.000Z","isPrivate":0,"projectId":"5965b5","snapshot":null,"tags":null,"title":"loader by Ratinax","updated":"2024-01-22T16:54:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":146,"cssLen":1515,"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 justify-content: center;\n align-items: center;\n position: relative;\n cursor: not-allowed;\n scale: 0.7;\n}\n\n.central {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 10em;\n height: 10em;\n border-radius: 50%;\n box-shadow: 0.5em 1em 1em red,\n -0.5em 0.5em 1em orange,\n 0.5em -0.5em 1em orangered,\n -0.5em -0.5em 1em yellow;\n}\n\n.external-shadow {\n width: 10em;\n height: 10em;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n box-shadow: 0.5em 0.5em 3em red,\n -0.5em 0.5em 3em orange,\n 0.5em -0.5em 3em orangered,\n -0.5em -0.5em 3em yellow;\n z-index: 999;\n animation: rotate 3s linear infinite;\n background-color: #212121;\n}\n\n.intern {\n position: absolute;\n color: white;\n z-index: 9999;\n}\n\n.intern::before {\n content: \"100%\";\n animation: percent 2s ease-in-out infinite;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(180deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes percent {\n 0% {\n content: '0%';\n }\n\n 25% {\n content: '25%';\n }\n\n 33% {\n content: '33%';\n }\n\n 42% {\n content: '42%';\n }\n\n 51% {\n content: '51%';\n }\n\n 67% {\n content: '67%';\n }\n\n 74% {\n content: '74%';\n }\n\n 75% {\n content: '75%';\n }\n\n 86% {\n content: '86%';\n }\n\n 95% {\n content: '95%';\n }\n\n 98% {\n content: '98%';\n }\n\n 99% {\n content: '99%';\n }\n}"}]}},"actionData":null,"errors":null}