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

","css":"/* HTML:

*/\n.loader {\n width: 100px;\n height: 60px;\n display: flex;\n animation: l12-0 2s infinite linear;\n}\n\n.loader::before,\n.loader::after {\n content: \"\";\n flex: 4;\n background: radial-gradient(at 50% 20%,#0000,#000a) bottom left/20px 20px repeat-x,\n linear-gradient(red 0 0) bottom/100% 20px no-repeat\n #ddd;\n -webkit-mask: repeating-linear-gradient(90deg,#000 0 4px,#0000 0 20px) 8px 0,\n radial-gradient(farthest-side,#000 90%,#0000) left bottom/20px 20px repeat-x;\n}\n\n.loader::after {\n flex: 1;\n transform-origin: top;\n animation: l12-1 1s cubic-bezier(0,20,1,20) infinite;\n}\n\n@keyframes l12-0 {\n \n 0%,49.9% {\n transform: scaleX(1)\n }\n\n 50%,100% {\n transform: scaleX(-1)\n }\n}\n\n@keyframes l12-1 {\n \n 100% {\n transform: rotate(-2deg)\n }\n}"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"34af09","snapshot":null,"tags":null,"title":"loader by alexruix","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1628,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n --ballcolor: #f2f2f2;\n --shadow: 0px 0 #ffffff00;\n --shadowcolor: #ffffff00;\n width: 10px;\n height: 10px;\n left: -120px;\n border-radius: 50%;\n position: relative;\n color: var(--ballcolor);\n animation: shadowRolling 2s linear infinite;\n}\n\n@keyframes shadowRolling {\n \n 0% {\n box-shadow: var(--shadow),\n var(--shadow),\n var(--shadow),\n var(--shadow);\n }\n\n 12% {\n box-shadow: 100px 0 var(--ballcolor),\n var(--shadow),\n var(--shadow), \n var(--shadow);\n }\n\n 25% {\n box-shadow: 110px 0 var(--ballcolor),\n 100px 0 var(--ballcolor),\n var(--shadow), \n var(--shadow);\n }\n\n 36% {\n box-shadow: 120px 0 var(--ballcolor), \n 110px 0 var(--ballcolor), \n 100px 0 var(--ballcolor), \n var(--shadow);\n }\n\n 50% {\n box-shadow: 130px 0 var(--ballcolor),\n 120px 0 var(--ballcolor),\n 110px 0 var(--ballcolor),\n 100px 0 var(--ballcolor);\n }\n\n 62% {\n box-shadow: 200px 0 var(--shadowcolor),\n 130px 0 var(--ballcolor), \n 120px 0 var(--ballcolor), \n 110px 0 var(--ballcolor);\n }\n\n 75% {\n box-shadow: 200px 0 var(--shadowcolor),\n 200px 0 var(--shadowcolor),\n 130px 0 var(--ballcolor), \n 120px 0 var(--ballcolor);\n }\n\n 87% {\n box-shadow: 200px 0 var(--shadowcolor), \n 200px 0 var(--shadowcolor), \n 200px 0 var(--shadowcolor), \n 130px 0 var(--ballcolor);\n }\n\n 100% {\n box-shadow: 200px 0 var(--shadowcolor), \n 200px 0 var(--shadowcolor),\n 200px 0 var(--shadowcolor),\n 200px 0 var(--shadowcolor);\n }\n}"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"0e3000","snapshot":null,"tags":null,"title":"loader by escannord","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":724,"cssLen":439,"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","css":".loader {\n transform: rotateX(70deg);\n}\n\n.loader .element {\n display: block;\n border-left: 5px solid rgb(120, 47, 255);\n border-right: 5px solid rgb(120, 47, 255);\n border-top: dotted 2px rgb(92, 5, 114);\n width: 10rem;\n height: 1rem;\n margin-top: 0.5rem;\n perspective: 1000px;\n animation: rotate 5s infinite linear;\n animation-delay: calc(var(--i) * 0.2s);\n}\n\n@keyframes rotate {\n 100% {\n transform: rotateY(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"2c63ec","snapshot":null,"tags":null,"title":"loader by AqFox","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":702,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".spinner {\n width: 56px;\n height: 56px;\n display: grid;\n color: #004dff;\n background: radial-gradient(farthest-side, currentColor calc(100% - 7px),#0000 calc(100% - 6px) 0);\n -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 15px),#000 calc(100% - 13px));\n border-radius: 50%;\n animation: spinner-sm4bhi 2s infinite linear;\n}\n\n.spinner::before,\n.spinner::after {\n content: \"\";\n grid-area: 1/1;\n background: linear-gradient(currentColor 0 0) center,\n linear-gradient(currentColor 0 0) center;\n background-size: 100% 11px,11px 100%;\n background-repeat: no-repeat;\n}\n\n.spinner::after {\n transform: rotate(45deg);\n}\n\n@keyframes spinner-sm4bhi {\n 100% {\n transform: rotate(1turn);\n }\n}"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"bad6ee","snapshot":null,"tags":null,"title":"loader by Cornerstone-04","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":114,"cssLen":540,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 100%;\n height: 100%;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: 10px;\n transition: 0.5s linear;\n}\n\n.ball {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n animation: bounce6135 1s alternate infinite;\n transition: 0.5s linear;\n}\n\n.ball {\n background: #fff;\n}\n\n.ball:nth-child(2) {\n animation-delay: 0.25s;\n}\n\n.ball:nth-child(3) {\n animation-delay: 0.5s;\n}\n\n@keyframes bounce6135 {\n from {\n transform: scale(2);\n }\n\n to {\n transform: scale(1);\n }\n}\n\n"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"22b92c","snapshot":null,"tags":null,"title":"loader by kerolos23","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":817,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 53px;\n height: 53px;\n border: 5px dotted #000;\n border-style: solid solid dotted dotted;\n border-radius: 50%;\n display: inline-block;\n position: relative;\n box-sizing: border-box;\n animation: rotation 2s linear infinite;\n}\n\n.loader::after {\n content: '';\n box-sizing: border-box;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n border: 4px dotted #F00;\n border-style: solid solid dotted;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n animation: rotationBack 1s linear infinite;\n transform-origin: center center;\n}\n\n@keyframes rotation {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes rotationBack {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(-360deg);\n }\n} "},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"965a1c","snapshot":null,"tags":null,"title":"loader by Ali-Tahmazi99","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":82,"cssLen":670,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loading {\n width: 60px;\n height: 60px;\n position: relative;\n}\n\n.d1 , .d2 {\n border: 5px solid #6c757d;\n border-radius: 50px;\n}\n\n.loading .d1 {\n width: 55px;\n height: 55px;\n position: absolute;\n border-left-color: transparent;\n animation: load161 1s linear infinite;\n}\n\n.loading .d2 {\n width: 40px;\n height: 40px;\n border-top-color: transparent;\n border-right-color: transparent;\n margin: 7.5px;\n animation: load2812 1.5s linear infinite;\n}\n\n@keyframes load161 {\n 0% {\n transform: rotate(0);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes load2812 {\n 0% {\n transform: rotate(0);\n }\n\n 100% {\n transform: rotate(-360deg);\n }\n}"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"64a2da","snapshot":null,"tags":null,"title":"loader by uxRakhal","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":949,"cssLen":3099,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".pl {\n width: 6em;\n height: 6em;\n}\n\n.pl__ring {\n animation: ringA 2s linear infinite;\n}\n\n.pl__ring--a {\n stroke: #f42f25;\n}\n\n.pl__ring--b {\n animation-name: ringB;\n stroke: #ffdd00;\n}\n\n.pl__ring--c {\n animation-name: ringC;\n stroke: #255ff4;\n}\n\n.pl__ring--d {\n animation-name: ringD;\n stroke: #2cf425;\n}\n\n/* Animations */\n@keyframes ringA {\n from,\n 4% {\n stroke-dasharray: 0 660;\n stroke-width: 20;\n stroke-dashoffset: -330;\n }\n\n 12% {\n stroke-dasharray: 60 600;\n stroke-width: 30;\n stroke-dashoffset: -335;\n }\n\n 32% {\n stroke-dasharray: 60 600;\n stroke-width: 30;\n stroke-dashoffset: -595;\n }\n\n 40%,\n 54% {\n stroke-dasharray: 0 660;\n stroke-width: 20;\n stroke-dashoffset: -660;\n }\n\n 62% {\n stroke-dasharray: 60 600;\n stroke-width: 30;\n stroke-dashoffset: -665;\n }\n\n 82% {\n stroke-dasharray: 60 600;\n stroke-width: 30;\n stroke-dashoffset: -925;\n }\n\n 90%,\n to {\n stroke-dasharray: 0 660;\n stroke-width: 20;\n stroke-dashoffset: -990;\n }\n}\n\n@keyframes ringB {\n from,\n 12% {\n stroke-dasharray: 0 220;\n stroke-width: 20;\n stroke-dashoffset: -110;\n }\n\n 20% {\n stroke-dasharray: 20 200;\n stroke-width: 30;\n stroke-dashoffset: -115;\n }\n\n 40% {\n stroke-dasharray: 20 200;\n stroke-width: 30;\n stroke-dashoffset: -195;\n }\n\n 48%,\n 62% {\n stroke-dasharray: 0 220;\n stroke-width: 20;\n stroke-dashoffset: -220;\n }\n\n 70% {\n stroke-dasharray: 20 200;\n stroke-width: 30;\n stroke-dashoffset: -225;\n }\n\n 90% {\n stroke-dasharray: 20 200;\n stroke-width: 30;\n stroke-dashoffset: -305;\n }\n\n 98%,\n to {\n stroke-dasharray: 0 220;\n stroke-width: 20;\n stroke-dashoffset: -330;\n }\n}\n\n@keyframes ringC {\n from {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: 0;\n }\n\n 8% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -5;\n }\n\n 28% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -175;\n }\n\n 36%,\n 58% {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: -220;\n }\n\n 66% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -225;\n }\n\n 86% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -395;\n }\n\n 94%,\n to {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: -440;\n }\n}\n\n@keyframes ringD {\n from,\n 8% {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: 0;\n }\n\n 16% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -5;\n }\n\n 36% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -175;\n }\n\n 44%,\n 50% {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: -220;\n }\n\n 58% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -225;\n }\n\n 78% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -395;\n }\n\n 86%,\n to {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: -440;\n }\n}\n"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"c1852f","snapshot":null,"tags":null,"title":"loader by StealthWorm","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":939,"cssLen":3161,"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 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: red;\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, .love::after {\n content: '';\n position: absolute;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background: red;\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 red;\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 red;\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: #ff0000;\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: #ffffff;\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: #ffffff;\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%, 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}"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"80ffbf","snapshot":null,"tags":null,"title":"loader by mobinkakei","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":136,"cssLen":592,"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 position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.loader_cube {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 30px;\n}\n\n.loader_cube--glowing {\n z-index: 2;\n background-color: rgba(255, 255, 255, 0.2);\n border: 2px solid rgba(255, 255, 255, 0.3);\n}\n\n.loader_cube--color {\n z-index: 1;\n filter: blur(2px);\n background: linear-gradient(135deg, #1afbf0, #da00ff);\n animation: loadtwo 2.5s ease-in-out infinite;\n}\n\n@keyframes loadtwo {\n 50% {\n transform: rotate(-80deg);\n }\n}"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"f693ba","snapshot":null,"tags":null,"title":"loader by mrhyddenn","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":241,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n border: 3px solid rgb(255,255,255,.2);\n border-top-color: transparent;\n animation: rot1 1.2s linear infinite;\n}\n\n@keyframes rot1 {\n to {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"78b91e","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":752,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n display: block;\n position: relative;\n height: 32px;\n width: 140px;\n border: 3px solid #fff;\n border-radius: 20px;\n box-sizing: border-box;\n animation: balancing 2s linear infinite alternate;\n transform-origin: center center;\n}\n\n.loader:before {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n width: 52px;\n height: 26px;\n border-radius: 20px;\n background: gold;\n animation: ballbns 2s linear infinite alternate;\n}\n\n@keyframes ballbns {\n 0% {\n left: 0;\n transform: translateX(0%);\n }\n\n 100% {\n left: 100%;\n transform: translateX(-100%);\n }\n}\n\n@keyframes balancing {\n 0% {\n transform: rotate(-25deg);\n }\n\n 50% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(25deg);\n }\n}\n "}]}},"actionData":null,"errors":null}