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

","css":".loader {\n width: 160px;\n height: 80px;\n border: 4px solid #00F45B;\n border-right-color: transparent;\n padding: 6px;\n background: repeating-linear-gradient(90deg,#00F45B 0 20px,#0000 0 30px) \n left/0% 100% no-repeat content-box content-box;\n position: relative;\n animation: p5 2s infinite steps(6);\n}\n\n.loader::before {\n content: \"\";\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: 100%;\n width: 20px;\n background: linear-gradient(\n #0000 calc(50% - 14px),#00F45B 0 calc(50% - 10px),\n #0000 0 calc(50% + 10px),#00F45B 0 calc(50% + 14px),#0000 0) left /100% 100%,\n linear-gradient(#00F45B calc(50% - 10px),#0000 0 calc(50% + 10px),#00F45B 0) left /4px 100%,\n linear-gradient(#0000 calc(50% - 10px),#00F45B 0 calc(50% + 10px),#0000 0) right/4px 100%;\n background-repeat: no-repeat;\n}\n\n@keyframes p5 {\n 100% {\n background-size: 120% 100%\n }\n}\n \n"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"f375d9","snapshot":null,"tags":null,"title":"loader by S4tyendra","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":149,"cssLen":1624,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

\n","css":".container {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.container .preloader {\n animation: rotate 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;\n}\n\n@keyframes rotate {\n 50% {\n transform: rotate(360deg);\n }\n\n 100% {\n transform: rotate(720deg);\n }\n}\n\n.preloader span {\n --c: #3f9bf2;\n position: absolute;\n display: block;\n height: 64px;\n width: 64px;\n background: var(--c);\n border: 1px solid var(--c);\n border-radius: 100%;\n}\n\n.preloader span:nth-child(1) {\n transform: translate(-28px, -28px);\n animation: shape_1 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;\n}\n\n@keyframes shape_1 {\n 60% {\n transform: scale(0.4);\n }\n}\n\n.preloader span:nth-child(2) {\n transform: translate(28px, -28px);\n animation: shape_2 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;\n}\n\n@keyframes shape_2 {\n 40% {\n transform: scale(0.4);\n }\n}\n\n.preloader span:nth-child(3) {\n position: relative;\n border-radius: 0px;\n transform: scale(0.98) rotate(-45deg);\n animation: shape_3 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;\n}\n\n@keyframes shape_3 {\n 50% {\n border-radius: 100%;\n transform: scale(0.5) rotate(-45deg);\n }\n\n 100% {\n transform: scale(0.98) rotate(-45deg);\n }\n}\n\n.shadow {\n position: relative;\n top: 30px;\n left: 50%;\n transform: translateX(-50%);\n display: block;\n height: 16px;\n width: 64px;\n border-radius: 50%;\n background-color: #d9d9d9;\n border: 1px solid #d9d9d9;\n animation: shadow 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;\n}\n\n@keyframes shadow {\n 50% {\n transform: translateX(-50%) scale(0.5);\n border-color: #f2f2f2;\n }\n}\n"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"380469","snapshot":null,"tags":null,"title":"loader by Deri-Kurniawan","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":530,"cssLen":555,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n\n","css":".flex{display:flex}.h-32{height:8rem}.h-4{height:1rem}.h-64{height:16rem}.w-2\\/4{width:50%}.w-4\\/5{width:80%}.w-56{width:14rem}.w-full{width:100%}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.flex-col{flex-direction:column}.gap-2{gap:0.5rem}.gap-4{gap:1rem}.rounded-md{border-radius:0.375rem}.rounded-xl{border-radius:0.75rem}.bg-neutral-300{--tw-bg-opacity:1;background-color:rgb(212 212 212 / var(--tw-bg-opacity))}.bg-neutral-400\\/50{background-color:rgb(163 163 163 / 0.5)}.p-4{padding:1rem}"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"09ec5d","snapshot":null,"tags":null,"title":"loader by Pradeepsaranbishnoi","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":85,"cssLen":1286,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"@keyframes pound {\n to {\n transform: scale(1.2);\n box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.65), 2px 6px 12px 0 rgba(0, 0, 0, 0.5), 3px 8px 15px 0 rgba(0, 0, 0, 0.45)\n }\n}\n\nul.loader {\n display: block;\n position: relative;\n width: 5em;\n}\n\n.loader li {\n list-style: none;\n display: block;\n float: left;\n width: 0.5em;\n height: 3em;\n margin: 0 0.5em 0 0;\n background: #635863;\n background: -moz-linear-gradient(top, #635863 0%, #3d353b 100%);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#635863), color-stop(100%,#3d353b));\n background: -webkit-linear-gradient(top, #635863 0%,#3d353b 100%);\n background: -o-linear-gradient(top, #635863 0%,#3d353b 100%);\n background: -ms-linear-gradient(top, #635863 0%,#3d353b 100%);\n background: linear-gradient(to bottom, #635863 0%,#3d353b 100%);\n box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.0), 1px 1px 1px 0 rgba(0, 0, 0, 0.0), 1px 1px 1px 0 rgba(0, 0, 0, 0.0);\n animation: pound .7s ease-in-out infinite alternate;\n animation-delay: 0.05s;\n transform-origin: center;\n}\n\n.loader li:nth-child(2) {\n animation-delay: 0.20s;\n}\n\n.loader li:nth-child(3) {\n animation-delay: 0.35s;\n}\n\n.loader li:nth-child(4) {\n animation-delay: 0.50s;\n}\n\n.loader li:nth-child(5) {\n animation-delay: 0.65s;\n}\n"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"2e447f","snapshot":null,"tags":null,"title":"loader by doniaskima","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1339,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"/* HTML:

*/\n.loader {\n --c1: #673b14;\n --c2: #f8b13b;\n width: 40px;\n height: 80px;\n border-top: 4px solid var(--c1);\n border-bottom: 4px solid var(--c1);\n background: linear-gradient(90deg, var(--c1) 2px, var(--c2) 0 5px,var(--c1) 0) 50%/7px 8px no-repeat;\n display: grid;\n overflow: hidden;\n animation: l5-0 2s infinite linear;\n}\n\n.loader::before,\n.loader::after {\n content: \"\";\n grid-area: 1/1;\n width: 75%;\n height: calc(50% - 4px);\n margin: 0 auto;\n border: 2px solid var(--c1);\n border-top: 0;\n box-sizing: content-box;\n border-radius: 0 0 40% 40%;\n -webkit-mask: linear-gradient(#000 0 0) bottom/4px 2px no-repeat,\n linear-gradient(#000 0 0);\n -webkit-mask-composite: destination-out;\n mask-composite: exclude;\n background: linear-gradient(var(--d,0deg),var(--c2) 50%,#0000 0) bottom /100% 205%,\n linear-gradient(var(--c2) 0 0) center/0 100%;\n background-repeat: no-repeat;\n animation: inherit;\n animation-name: l5-1;\n}\n\n.loader::after {\n transform-origin: 50% calc(100% + 2px);\n transform: scaleY(-1);\n --s: 3px;\n --d: 180deg;\n}\n\n@keyframes l5-0 {\n 80% {\n transform: rotate(0)\n }\n\n 100% {\n transform: rotate(0.5turn)\n }\n}\n\n@keyframes l5-1 {\n 10%,70% {\n background-size: 100% 205%,var(--s,0) 100%\n }\n\n 70%,100% {\n background-position: top,center\n }\n}"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"839a8d","snapshot":null,"tags":null,"title":"loader by Nawsome","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":223,"cssLen":1161,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loading {\n width: 100px;\n height: 100px;\n background: white;\n border-radius: 12px;\n position: relative;\n transform-style: preserve-3d;\n animation: loading_4123 2s linear infinite;\n}\n\n.side {\n background: white;\n border-radius: 12px;\n}\n\n.front, .back {\n width: 100px;\n height: 100px;\n}\n\n.front, .back {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n}\n\n.back {\n transform: translateZ(-10px);\n}\n\n.left, .right {\n width: 10px;\n height: calc(100% - 12px);\n top: 6px;\n position: absolute;\n background: #efefef;\n}\n\n.left {\n left: 0;\n transform-origin: 0;\n transform: rotateY(90deg);\n}\n\n.right {\n right: 0;\n transform-origin: 100%;\n transform: rotateY(-90deg);\n}\n\n.top, .bottom {\n width: calc(100% - 12px);\n height: 10px;\n position: absolute;\n left: 6px;\n background: #efefef;\n}\n\n.top {\n top: -10px;\n transform-origin: 0 100%;\n transform: rotateX(90deg);\n}\n\n.bottom {\n bottom: -10px;\n transform-origin: 0 0;\n transform: rotateX(-90deg);\n}\n\n@keyframes loading_4123 {\n 0% {\n transform: rotate(0);\n }\n\n 50% {\n transform: rotateY(180deg);\n }\n\n 100% {\n transform: rotateY(180deg) rotateX(-180deg);\n }\n}"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"f3e443","snapshot":null,"tags":null,"title":"loader by abrahamcalsin","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":566,"cssLen":1420,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n","css":".jelly-triangle {\n --uib-size: 2.8rem;\n --uib-speed: 1.75s;\n --uib-color: #183153;\n position: relative;\n height: var(--uib-size);\n width: var(--uib-size);\n filter: url('#uib-jelly-triangle-ooze');\n}\n\n.jelly-triangle__dot,\n.jelly-triangle::before,\n.jelly-triangle::after {\n content: '';\n position: absolute;\n width: 33%;\n height: 33%;\n background: var(--uib-color);\n border-radius: 100%;\n box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);\n}\n\n.jelly-triangle__dot {\n top: 6%;\n left: 30%;\n animation: grow7132 var(--uib-speed) ease infinite;\n}\n\n.jelly-triangle::before {\n bottom: 6%;\n right: 0;\n animation: grow7132 var(--uib-speed) ease calc(var(--uib-speed) * -0.666)\n infinite;\n}\n\n.jelly-triangle::after {\n bottom: 6%;\n left: 0;\n animation: grow7132 var(--uib-speed) ease calc(var(--uib-speed) * -0.333)\n infinite;\n}\n\n.jelly-triangle__traveler {\n position: absolute;\n top: 6%;\n left: 30%;\n width: 33%;\n height: 33%;\n background: var(--uib-color);\n border-radius: 100%;\n animation: triangulate6214 var(--uib-speed) ease infinite;\n}\n\n.jelly-maker {\n width: 0;\n height: 0;\n position: absolute;\n}\n\n@keyframes triangulate6214 {\n 0%,\n 100% {\n transform: none;\n }\n\n 33.333% {\n transform: translate(120%, 175%);\n }\n\n 66.666% {\n transform: translate(-95%, 175%);\n }\n}\n\n@keyframes grow7132 {\n 0%,\n 100% {\n transform: scale(1.5);\n }\n\n 20%,\n 70% {\n transform: none;\n }\n}"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"32e51b","snapshot":null,"tags":null,"title":"loader by Praashoo7","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":124,"cssLen":426,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".load {\n display: flex;\n border-radius: 50%;\n flex-direction: row;\n}\n\n.progress {\n width: 2em;\n height: 2em;\n margin: 0.4em;\n scale: 0;\n border-radius: 50%;\n background: rgb(255, 255, 255);\n animation: loading_492 2s ease infinite;\n animation-delay: 1s;\n}\n\n@keyframes loading_492 {\n 50% {\n scale: 1;\n }\n}\n\n.progress:nth-child(2) {\n animation-delay: 1.3s;\n}\n\n.progress:nth-child(3) {\n animation-delay: 1.7s;\n}"},{"created":"2024-01-22T16:52:40.000Z","isPrivate":0,"projectId":"9bfe39","snapshot":null,"tags":null,"title":"loader by xXJollyHAKERXx","updated":"2024-01-22T16:52:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":61,"cssLen":525,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner {\n background-image: linear-gradient(rgb(186, 66, 255) 35%,rgb(0, 225, 255));\n width: 100px;\n height: 100px;\n animation: spinning82341 1.7s linear infinite;\n text-align: center;\n border-radius: 50px;\n filter: blur(1px);\n box-shadow: 0px -5px 20px 0px rgb(186, 66, 255), 0px 5px 20px 0px rgb(0, 225, 255);\n}\n\n.spinner1 {\n background-color: rgb(36, 36, 36);\n width: 100px;\n height: 100px;\n border-radius: 50px;\n filter: blur(10px);\n}\n\n@keyframes spinning82341 {\n to {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:52:40.000Z","isPrivate":0,"projectId":"476fc8","snapshot":null,"tags":null,"title":"loader by NlghtM4re","updated":"2024-01-22T16:52:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1027,"cssLen":1523,"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

","css":".container {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.tree {\n position: relative;\n width: 50px;\n height: 50px;\n transform-style: preserve-3d;\n transform: rotateX(-20deg) rotateY(30deg);\n animation: treeAnimate 5s linear infinite;\n}\n\n@keyframes treeAnimate {\n 0% {\n transform: rotateX(-20deg) rotateY(360deg);\n }\n\n 100% {\n transform: rotateX(-20deg) rotateY(0deg);\n }\n}\n\n.tree div {\n position: absolute;\n top: -50px;\n left: 0;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n transform: translateY(calc(25px * var(--x))) translateZ(0px);\n}\n\n.tree div.branch span {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, #69c069, #77dd77);\n clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n border-bottom: 5px solid #00000019;\n transform-origin: bottom;\n transform: rotateY(calc(90deg * var(--i))) rotateX(30deg) translateZ(28.5px);\n}\n\n.tree div.stem span {\n position: absolute;\n top: 110px;\n /* updated top value */\n left: calc(50% - 7.5px);\n width: 15px;\n height: 50%;\n background: linear-gradient(90deg, #bb4622, #df7214);\n border-bottom: 5px solid #00000019;\n transform-origin: bottom;\n transform: rotateY(calc(90deg * var(--i))) translateZ(7.5px);\n}\n\n.shadow {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.4);\n filter: blur(20px);\n transform-style: preserve-3d;\n transform: rotateX(90deg) translateZ(-65px);\n}\n"},{"created":"2024-01-22T16:52:40.000Z","isPrivate":0,"projectId":"73ad26","snapshot":null,"tags":null,"title":"loader by alexruix","updated":"2024-01-22T16:52:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":964,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 48px;\n height: 48px;\n margin: auto;\n position: relative;\n}\n\n.loader:before {\n content: '';\n width: 48px;\n height: 5px;\n background: #f0808050;\n position: absolute;\n top: 60px;\n left: 0;\n border-radius: 50%;\n animation: shadow324 0.5s linear infinite;\n}\n\n.loader:after {\n content: '';\n width: 100%;\n height: 100%;\n background: #f08080;\n position: absolute;\n top: 0;\n left: 0;\n border-radius: 4px;\n animation: jump7456 0.5s linear infinite;\n}\n\n@keyframes jump7456 {\n 15% {\n border-bottom-right-radius: 3px;\n }\n\n 25% {\n transform: translateY(9px) rotate(22.5deg);\n }\n\n 50% {\n transform: translateY(18px) scale(1, .9) rotate(45deg);\n border-bottom-right-radius: 40px;\n }\n\n 75% {\n transform: translateY(9px) rotate(67.5deg);\n }\n\n 100% {\n transform: translateY(0) rotate(90deg);\n }\n}\n\n@keyframes shadow324 {\n\n 0%,\n 100% {\n transform: scale(1, 1);\n }\n\n 50% {\n transform: scale(1.2, 1);\n }\n}"},{"created":"2024-01-22T16:52:40.000Z","isPrivate":0,"projectId":"f7cbc6","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:52:40.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":369,"cssLen":1124,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"@keyframes loader_5191 {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.square {\n background: #ddd;\n width: 10px;\n height: 10px;\n position: absolute;\n top: 50%;\n left: 50%;\n margin-top: -5px;\n margin-left: -5px;\n}\n\n#sq1 {\n margin-top: -25px;\n margin-left: -25px;\n animation: loader_5191 675ms ease-in-out 0s infinite alternate;\n}\n\n#sq2 {\n margin-top: -25px;\n animation: loader_5191 675ms ease-in-out 75ms infinite alternate;\n}\n\n#sq3 {\n margin-top: -25px;\n margin-left: 15px;\n animation: loader_5191 675ms ease-in-out 150ms infinite;\n}\n\n#sq4 {\n margin-left: -25px;\n animation: loader_5191 675ms ease-in-out 225ms infinite;\n}\n\n#sq5 {\n animation: loader_5191 675ms ease-in-out 300ms infinite;\n}\n\n#sq6 {\n margin-left: 15px;\n animation: loader_5191 675ms ease-in-out 375ms infinite;\n}\n\n#sq7 {\n margin-top: 15px;\n margin-left: -25px;\n animation: loader_5191 675ms ease-in-out 450ms infinite;\n}\n\n#sq8 {\n margin-top: 15px;\n animation: loader_5191 675ms ease-in-out 525ms infinite;\n}\n\n#sq9 {\n margin-top: 15px;\n margin-left: 15px;\n animation: loader_5191 675ms ease-in-out 600ms infinite;\n}"}]}},"actionData":null,"errors":null}