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

\n\n

","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.left-0 {\n left: 0px\n}\n\n.top-0 {\n top: 0px\n}\n\n.h-10 {\n height: 2.5rem\n}\n\n.h-20 {\n height: 5rem\n}\n\n.h-5 {\n height: 1.25rem\n}\n\n.w-10 {\n width: 2.5rem\n}\n\n.w-20 {\n width: 5rem\n}\n\n.w-5 {\n width: 1.25rem\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg)\n }\n}\n\n.animate-spin {\n animation: spin 1s linear infinite\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.border-2 {\n border-width: 2px\n}\n\n.border-t-2 {\n border-top-width: 2px\n}\n\n.border-lime-200 {\n --tw-border-opacity: 1;\n border-color: rgb(217 249 157 / var(--tw-border-opacity))\n}\n\n.border-lime-700 {\n --tw-border-opacity: 1;\n border-color: rgb(77 124 15 / var(--tw-border-opacity))\n}"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"6c3573","snapshot":null,"tags":null,"title":"loader by AHMED-MIT","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":98,"cssLen":740,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner {\n position: relative;\n width: 33.6px;\n height: 33.6px;\n perspective: 67.2px;\n}\n\n.spinner div {\n width: 100%;\n height: 100%;\n background: #474bff;\n position: absolute;\n left: 50%;\n transform-origin: left;\n animation: spinner-16s03x 2s infinite;\n}\n\n.spinner div:nth-child(1) {\n animation-delay: 0.15s;\n}\n\n.spinner div:nth-child(2) {\n animation-delay: 0.3s;\n}\n\n.spinner div:nth-child(3) {\n animation-delay: 0.45s;\n}\n\n.spinner div:nth-child(4) {\n animation-delay: 0.6s;\n}\n\n.spinner div:nth-child(5) {\n animation-delay: 0.75s;\n}\n\n@keyframes spinner-16s03x {\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:39.000Z","isPrivate":0,"projectId":"f76028","snapshot":null,"tags":null,"title":"loader by Praashoo7","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":209,"cssLen":719,"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 flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.heading {\n color: black;\n letter-spacing: 0.2em;\n margin-bottom: 1em;\n}\n\n.loading {\n display: flex;\n width: 5em;\n align-items: center;\n justify-content: center;\n}\n\n.load {\n width: 23px;\n height: 3px;\n background-color: limegreen;\n animation: 1s move_5011 infinite;\n border-radius: 5px;\n margin: 0.1em;\n}\n\n.load:nth-child(1) {\n animation-delay: 0.2s;\n}\n\n.load:nth-child(2) {\n animation-delay: 0.4s;\n}\n\n.load:nth-child(3) {\n animation-delay: 0.6s;\n}\n\n@keyframes move_5011 {\n 0% {\n width: 0.2em;\n }\n\n 25% {\n width: 0.7em;\n }\n\n 50% {\n width: 1.5em;\n }\n\n 100% {\n width: 0.2em;\n }\n}"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"e95ecb","snapshot":null,"tags":null,"title":"loader by adamgiebl","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":44,"cssLen":1380,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".loader {\n position: relative;\n width: 150px;\n height: 150px;\n background: transparent;\n border-radius: 50%;\n box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.55);\n border: 1px solid #333;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n\n.loader::before {\n content: '';\n position: absolute;\n inset: 20px;\n background: transparent;\n border: 1px dashed #444;\n border-radius: 50%;\n box-shadow: inset -5px -5px 25px rgba(0, 0, 0, 0.25),\n inset 5px 5px 35px rgba(0, 0, 0, 0.25);\n}\n\n.loader::after {\n content: '';\n position: absolute;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n border: 1px dashed #444;\n box-shadow: inset -5px -5px 25px rgba(0, 0, 0, 0.25),\n inset 5px 5px 35px rgba(0, 0, 0, 0.25);\n}\n\n.loader span {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 50%;\n height: 100%;\n background: transparent;\n transform-origin: top left;\n animation: radar81 2s linear infinite;\n border-top: 1px dashed #fff;\n}\n\n.loader span::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #fc5185;\n /* pink */\n transform-origin: top left;\n transform: rotate(-55deg);\n filter: blur(30px) drop-shadow(20px 20px 20px #fc5185);\n /* pink */\n}\n\n@keyframes radar81 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"fba359","snapshot":null,"tags":null,"title":"loader by Yaya12085","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":85,"cssLen":740,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".container {\n background-color: #212121;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.loader {\n height: 100px;\n width: 100px;\n border-radius: 50%;\n background-color: #e8e8e8;\n border: 4px solid #e8e8e8;\n box-shadow: 0 0 3px #e8e8e8;\n filter: blur(.4px);\n}\n\n.shadow {\n height: 120px;\n width: 120px;\n border-radius: 50%;\n background-color: #212121;\n top: -5px;\n left: 0;\n animation: animate 3s infinite 1.5s;\n}\n\n@keyframes animate {\n 0% {\n transform: translateX(150px);\n background-color: #212121;\n }\n\n 50% {\n transform: translateX(-10px);\n background-color: #212121;\n }\n\n 100% {\n transform: translateX(-170px);\n background-color: #212121;\n }\n}\n\n"},{"created":"2024-01-22T16:54:38.000Z","isPrivate":0,"projectId":"d7903a","snapshot":null,"tags":null,"title":"loader by Bethel-nz","updated":"2024-01-22T16:54:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":929,"cssLen":1073,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".pl,\n.pl__worm {\n animation-duration: 3s;\n animation-iteration-count: infinite;\n}\n\n.pl {\n animation-name: bump9;\n animation-timing-function: linear;\n width: 8em;\n height: 8em;\n}\n\n.pl__ring {\n stroke: hsla(var(--hue),10%,10%,0.1);\n transition: stroke 0.3s;\n}\n\n.pl__worm {\n animation-name: worm9;\n animation-timing-function: cubic-bezier(0.42,0.17,0.75,0.83);\n}\n\n/* Animations */\n@keyframes bump9 {\n from,\n 42%,\n 46%,\n 51%,\n 55%,\n 59%,\n 63%,\n 67%,\n 71%,\n 74%,\n 78%,\n 81%,\n 85%,\n 88%,\n 92%,\n to {\n transform: translate(0,0);\n }\n\n 44% {\n transform: translate(1.33%,6.75%);\n }\n\n 53% {\n transform: translate(-16.67%,-0.54%);\n }\n\n 61% {\n transform: translate(3.66%,-2.46%);\n }\n\n 69% {\n transform: translate(-0.59%,15.27%);\n }\n\n 76% {\n transform: translate(-1.92%,-4.68%);\n }\n\n 83% {\n transform: translate(9.38%,0.96%);\n }\n\n 90% {\n transform: translate(-4.55%,1.98%);\n }\n}\n\n@keyframes worm9 {\n from {\n stroke-dashoffset: 10;\n }\n\n 25% {\n stroke-dashoffset: 295;\n }\n\n to {\n stroke-dashoffset: 1165;\n }\n}"},{"created":"2024-01-22T16:54:38.000Z","isPrivate":0,"projectId":"759688","snapshot":null,"tags":null,"title":"loader by shadowmurphy","updated":"2024-01-22T16:54:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1606,"cssLen":1514,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t\n

","css":".pl1 {\n display: block;\n width: 8em;\n height: 8em;\n}\n\n.pl1__g,\n .pl1__rect {\n animation: pl1-a 1.5s cubic-bezier(0.65,0,0.35,1) infinite;\n}\n\n.pl1__g {\n transform-origin: 64px 64px;\n}\n\n.pl1__rect:first-child {\n animation-name: pl1-b;\n}\n\n.pl1__rect:nth-child(2) {\n animation-name: pl1-c;\n}\n\n@keyframes pl1-a {\n from {\n transform: rotate(0);\n }\n\n 80%,\n to {\n animation-timing-function: steps(1,start);\n transform: rotate(90deg);\n }\n}\n\n@keyframes pl1-b {\n from {\n animation-timing-function: cubic-bezier(0.33,0,0.67,0);\n width: 40px;\n height: 40px;\n }\n\n 20% {\n animation-timing-function: steps(1,start);\n width: 40px;\n height: 0;\n }\n\n 60% {\n animation-timing-function: cubic-bezier(0.65,0,0.35,1);\n width: 0;\n height: 40px;\n }\n\n 80%,\n to {\n width: 40px;\n height: 40px;\n }\n}\n\n@keyframes pl1-c {\n from {\n animation-timing-function: cubic-bezier(0.33,0,0.67,0);\n width: 40px;\n height: 40px;\n transform: translate(0,48px);\n }\n\n 20% {\n animation-timing-function: cubic-bezier(0.33,1,0.67,1);\n width: 40px;\n height: 88px;\n transform: translate(0,0);\n }\n\n 40% {\n animation-timing-function: cubic-bezier(0.33,0,0.67,0);\n width: 40px;\n height: 40px;\n transform: translate(0,0);\n }\n\n 60% {\n animation-timing-function: cubic-bezier(0.33,1,0.67,1);\n width: 88px;\n height: 40px;\n transform: translate(0,0);\n }\n\n 80%,\n to {\n width: 40px;\n height: 40px;\n transform: translate(48px,0);\n }\n}"},{"created":"2024-01-22T16:54:38.000Z","isPrivate":0,"projectId":"dbe3c9","snapshot":null,"tags":null,"title":"loader by mobineshaghi","updated":"2024-01-22T16:54:38.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":367,"cssLen":2217,"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","css":".loader {\n position: relative;\n width: 300px;\n height: 300px;\n transform-style: preserve-3d;\n transform: perspective(500px) rotateX(60deg);\n}\n\n.loader span {\n position: absolute;\n display: block;\n border: 5px solid #fff;\n box-shadow: 0 5px 0 #ccc;\n inset: 0 5px 0 #ccc;\n box-sizing: border-box;\n border-radius: 50%;\n animation: animate 3s ease-in-out infinite;\n}\n\n@keyframes animate {\n 0%,100% {\n transform: translateZ(-100px);\n }\n\n 50% {\n transform: translateZ(100px);\n }\n}\n\n.loader span:nth-child(1) {\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n animation-delay: 1.4s;\n}\n\n.loader span:nth-child(2) {\n top: 10px;\n left: 10px;\n bottom: 10px;\n right: 10px;\n animation-delay: 1.3s;\n}\n\n.loader span:nth-child(3) {\n top: 20px;\n left: 20px;\n bottom: 20px;\n right: 20px;\n animation-delay: 1.2s;\n}\n\n.loader span:nth-child(4) {\n top: 30px;\n left: 30px;\n bottom: 30px;\n right: 30px;\n animation-delay: 1.1s;\n}\n\n.loader span:nth-child(5) {\n top: 40px;\n left: 40px;\n bottom: 40px;\n right: 40px;\n animation-delay: 1s;\n}\n\n.loader span:nth-child(6) {\n top: 50px;\n left: 50px;\n bottom: 50px;\n right: 50px;\n animation-delay: 0.9s;\n}\n\n.loader span:nth-child(7) {\n top: 60px;\n left: 60px;\n bottom: 60px;\n right: 60px;\n animation-delay: 0.8s;\n}\n\n.loader span:nth-child(8) {\n top: 70px;\n left: 70px;\n bottom: 70px;\n right: 70px;\n animation-delay: 0.7s;\n}\n\n.loader span:nth-child(9) {\n top: 80px;\n left: 80px;\n bottom: 80px;\n right: 80px;\n animation-delay: 0.6s;\n}\n\n.loader span:nth-child(10) {\n top: 90px;\n left: 90px;\n bottom: 90px;\n right: 90px;\n animation-delay: 0.5s;\n}\n\n.loader span:nth-child(11) {\n top: 100px;\n left: 100px;\n bottom: 100px;\n right: 100px;\n animation-delay: 0.4s;\n}\n\n.loader span:nth-child(12) {\n top: 110px;\n left: 110px;\n bottom: 110px;\n right: 110px;\n animation-delay: 0.3s;\n}\n\n.loader span:nth-child(13) {\n top: 120px;\n left: 120px;\n bottom: 120px;\n right: 120px;\n animation-delay: 0.2s;\n}\n\n.loader span:nth-child(14) {\n top: 130px;\n left: 130px;\n bottom: 130px;\n right: 130px;\n animation-delay: 0.1s;\n}\n\n.loader span:nth-child(15) {\n top: 140px;\n left: 140px;\n bottom: 140px;\n right: 140px;\n animation-delay: 0s;\n}"},{"created":"2024-01-22T16:54:38.000Z","isPrivate":0,"projectId":"e8c28e","snapshot":null,"tags":null,"title":"loader by arshshaikh06","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":345,"cssLen":1198,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".shimmer {\n position: relative;\n background: #3a3a3a;\n background-image: linear-gradient(to right, #3a3a3a 0%, #3f3f3f 10%, #4a4a4a 20%, #3f3f3f 30%, #3a3a3a 50%, #3a3a3a 100%);\n background-repeat: no-repeat;\n background-size: 800px 200px;\n -webkit-animation-duration: 1s;\n -webkit-animation-fill-mode: forwards;\n -webkit-animation-iteration-count: infinite;\n -webkit-animation-name: shimmer;\n -webkit-animation-timing-function: ease-in-out;\n}\n\n@-webkit-keyframes shimmer {\n 0% {\n background-position: -400px 0;\n }\n\n 100% {\n background-position: 400px 0;\n }\n}\n\n#container {\n width: 400px;\n height: 200px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n#square {\n width: 135px;\n height: 135px;\n}\n\n#content {\n flex: 1;\n height: 150px;\n width: 100%;\n padding: 0.5rem 1rem 0 1rem;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: flex-end;\n}\n\n#content-title {\n width: 100%;\n height: 30px;\n margin-bottom: 1rem;\n}\n\n#content-desc {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-evenly;\n align-items: flex-end;\n}\n\n.line {\n width: 100%;\n height: 10px;\n}"},{"created":"2024-01-22T16:54:37.000Z","isPrivate":0,"projectId":"c56982","snapshot":null,"tags":null,"title":"loader by Diox221","updated":"2024-01-22T16:54:37.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":180,"cssLen":728,"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 height: 100%;\n}\n\n.circle {\n position: relative;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n margin: 10px;\n box-shadow: inset 0 0 0 2px #fff;\n transform-origin: center;\n animation: fill 1.5s ease-in-out infinite;\n}\n\n.circle-1 {\n animation-delay: 0s;\n}\n\n.circle-2 {\n animation-delay: -0.4s;\n}\n\n.circle-3 {\n animation-delay: -0.8s;\n}\n\n.circle-4 {\n animation-delay: -1.2s;\n}\n\n@keyframes fill {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 6px #1c1c1e;\n transform: scale(1.5);\n }\n\n 100% {\n box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 6px #fff;\n transform: scale(1);\n }\n}\n"},{"created":"2024-01-22T16:54:37.000Z","isPrivate":0,"projectId":"534c7c","snapshot":null,"tags":null,"title":"loader by Nawsome","updated":"2024-01-22T16:54:37.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":625,"cssLen":1904,"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","css":".cube {\n position: relative;\n width: 300px;\n height: 300px;\n transform-style: preserve-3d;\n transform: rotateX(-30deg);\n animation: animateD 8s linear infinite;\n}\n\n@keyframes animateD {\n 0% {\n transform: rotateX(-15deg) rotateY(0deg);\n }\n\n 100% {\n transform: rotateX(-15deg) rotateY(-360deg);\n }\n}\n\n.cube div {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n}\n\n.cube2 {\n position: relative;\n width: 150px;\n height: 150px;\n transform-style: preserve-3d;\n animation: animateD2 5s ease-out infinite alternate;\n}\n\n@keyframes animateD2 {\n 0% {\n transform: rotateX(0deg) rotateY(0deg);\n }\n\n 100% {\n transform: rotateX(180deg) rotateY(-360deg);\n }\n}\n\n.cube2 div {\n position: absolute;\n top: 35px;\n left: 0;\n width: 65%;\n height: 65%;\n transform-style: preserve-3d;\n}\n\n.cube2 div span {\n position: absolute;\n top: 20%;\n left: 20%;\n width: 65%;\n height: 65%;\n background: transparent;\n border: 2px solid #7dff99;\n transform: rotateY(calc(90deg * var(--i))) translateZ(62px);\n}\n\n.cube3 {\n position: absolute;\n width: 300px;\n height: 300px;\n transform-style: preserve-3d;\n transform: rotateX(-30deg);\n animation: animateD3 1s ease-in-out infinite alternate;\n}\n\n@keyframes animateD3 {\n 0% {\n transform: rotateX(-90deg) rotateY(0deg);\n }\n\n 100% {\n transform: rotateX(90deg) rotateY(45deg);\n }\n}\n\n.cube3 div {\n position: absolute;\n top: 70px;\n left: 70px;\n width: 15%;\n height: 15%;\n transform-style: preserve-3d;\n}\n\n.cube3 div span {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #7dff99;\n transform: rotateY(calc(90deg * var(--i))) translateZ(14px);\n box-shadow: 0px 0px 7px #7dff99;\n}\n\n.top3 {\n position: absolute;\n top: 0;\n left: 0;\n background: #7dff99;\n transform: rotateX(90deg) translateZ(14px);\n box-shadow: 0px 0px 10px #7dff99;\n}\n\n"},{"created":"2024-01-22T16:54:37.000Z","isPrivate":0,"projectId":"a4aa9d","snapshot":null,"tags":null,"title":"loader by CharandeepSingh01","updated":"2024-01-22T16:54:37.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":304,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"/*View in dark mode for good effects*/\n.loader {\n border: 4px solid red;\n width: 100px;\n height: 100px;\n border-radius: 50%;\n border-right-color: transparent;\n animation: rot 1s linear infinite;\n box-shadow: 0px 0px 20px red inset;\n}\n\n@keyframes rot {\n 100% {\n transform: rotate(360deg);\n }\n}"}]}},"actionData":null,"errors":null}