{"loaderData":{"0":null,"0-3":{"total":7556,"projects":[{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"94f824","snapshot":"https://s1.qingting.work/runjs/c17b36a5ef02.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Yaya12085","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":777,"cssLen":706,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n GET IT ON\n Google Play\n \n","css":".playstore-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 2px solid #000;\n border-radius: 9999px;\n background-color: rgba(0, 0, 0, 1);\n padding: 0.625rem 1.5rem;\n text-align: center;\n color: rgba(255, 255, 255, 1);\n outline: 0;\n transition: all .2s ease;\n text-decoration: none;\n}\n\n.playstore-button:hover {\n background-color: transparent;\n color: rgba(0, 0, 0, 1);\n}\n\n.icon {\n height: 1.5rem;\n width: 1.5rem;\n}\n\n.texts {\n margin-left: 1rem;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n line-height: 1;\n}\n\n.text-1 {\n margin-bottom: 0.25rem;\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.text-2 {\n font-weight: 600;\n}"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"f85647","snapshot":"https://s1.qingting.work/runjs/adef6a245fb1.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by OnCloud125252","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":284,"cssLen":1434,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":"/* Note that you only needs to edit the config to customize the button! */\n\n.plusButton {\n /* Config start */\n --plus_sideLength: 2.5rem;\n --plus_topRightTriangleSideLength: 0.9rem;\n /* Config end */\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid white;\n width: var(--plus_sideLength);\n height: var(--plus_sideLength);\n background-color: #000000;\n overflow: hidden;\n}\n\n.plusButton::before {\n position: absolute;\n content: \"\";\n top: 0;\n right: 0;\n width: 0;\n height: 0;\n border-width: 0 var(--plus_topRightTriangleSideLength) var(--plus_topRightTriangleSideLength) 0;\n border-style: solid;\n border-color: transparent white transparent transparent;\n transition-timing-function: ease-in-out;\n transition-duration: 0.2s;\n}\n\n.plusButton:hover {\n cursor: pointer;\n}\n\n.plusButton:hover::before {\n --plus_topRightTriangleSideLength: calc(var(--plus_sideLength) * 2);\n}\n\n.plusButton:focus-visible::before {\n --plus_topRightTriangleSideLength: calc(var(--plus_sideLength) * 2);\n}\n\n.plusButton>.plusIcon {\n fill: white;\n width: calc(var(--plus_sideLength) * 0.7);\n height: calc(var(--plus_sideLength) * 0.7);\n z-index: 1;\n transition-timing-function: ease-in-out;\n transition-duration: 0.2s;\n}\n\n.plusButton:hover>.plusIcon {\n fill: black;\n transform: rotate(180deg);\n}\n\n.plusButton:focus-visible>.plusIcon {\n fill: black;\n transform: rotate(180deg);\n}"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"66906e","snapshot":"https://s1.qingting.work/runjs/18c47917d86e.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by Galahhad","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":64,"cssLen":2355,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".ui-btn {\n --btn-default-bg: rgb(41, 41, 41);\n --btn-padding: 15px 20px;\n --btn-hover-bg: rgb(51, 51, 51);\n --btn-transition: .3s;\n --btn-letter-spacing: .1rem;\n --btn-animation-duration: 1.2s;\n --btn-shadow-color: rgba(0, 0, 0, 0.137);\n --btn-shadow: 0 2px 10px 0 var(--btn-shadow-color);\n --hover-btn-color: #FAC921;\n --default-btn-color: #fff;\n --font-size: 16px;\n /* 👆 this field should not be empty */\n --font-weight: 600;\n --font-family: Menlo,Roboto Mono,monospace;\n /* 👆 this field should not be empty */\n}\n\n/* button settings 👆 */\n\n.ui-btn {\n box-sizing: border-box;\n padding: var(--btn-padding);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--default-btn-color);\n font: var(--font-weight) var(--font-size) var(--font-family);\n background: var(--btn-default-bg);\n border: none;\n cursor: pointer;\n transition: var(--btn-transition);\n overflow: hidden;\n box-shadow: var(--btn-shadow);\n}\n\n.ui-btn span {\n letter-spacing: var(--btn-letter-spacing);\n transition: var(--btn-transition);\n box-sizing: border-box;\n position: relative;\n background: inherit;\n}\n\n.ui-btn span::before {\n box-sizing: border-box;\n position: absolute;\n content: \"\";\n background: inherit;\n}\n\n.ui-btn:hover, .ui-btn:focus {\n background: var(--btn-hover-bg);\n}\n\n.ui-btn:hover span, .ui-btn:focus span {\n color: var(--hover-btn-color);\n}\n\n.ui-btn:hover span::before, .ui-btn:focus span::before {\n animation: chitchat linear both var(--btn-animation-duration);\n}\n\n@keyframes chitchat {\n 0% {\n content: \"#\";\n }\n\n 5% {\n content: \".\";\n }\n\n 10% {\n content: \"^{\";\n }\n\n 15% {\n content: \"-!\";\n }\n\n 20% {\n content: \"#$_\";\n }\n\n 25% {\n content: \"№:0\";\n }\n\n 30% {\n content: \"#{+.\";\n }\n\n 35% {\n content: \"@}-?\";\n }\n\n 40% {\n content: \"?{4@%\";\n }\n\n 45% {\n content: \"=.,^!\";\n }\n\n 50% {\n content: \"?2@%\";\n }\n\n 55% {\n content: \"\\;1}]\";\n }\n\n 60% {\n content: \"?{%:%\";\n right: 0;\n }\n\n 65% {\n content: \"|{f[4\";\n right: 0;\n }\n\n 70% {\n content: \"{4%0%\";\n right: 0;\n }\n\n 75% {\n content: \"'1_0<\";\n right: 0;\n }\n\n 80% {\n content: \"{0%\";\n right: 0;\n }\n\n 85% {\n content: \"]>'\";\n right: 0;\n }\n\n 90% {\n content: \"4\";\n right: 0;\n }\n\n 95% {\n content: \"2\";\n right: 0;\n }\n\n 100% {\n content: \"\";\n right: 0;\n }\n}"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"87a967","snapshot":"https://s1.qingting.work/runjs/afa53c8be10b.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by catraco","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":455,"cssLen":1691,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".absolute{position:absolute}.relative{position:relative}.-top-\\[150\\%\\]{top:-150%}.left-0{left:0px}.inline-flex{display:inline-flex}.h-\\[5px\\]{height:5px}.w-80{width:20rem}.overflow-hidden{overflow:hidden}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-b-4{border-bottom-width:4px}.border-red-400{--tw-border-opacity:1;border-color:rgb(248 113 113 / var(--tw-border-opacity))}.bg-red-400{--tw-bg-opacity:1;background-color:rgb(248 113 113 / var(--tw-bg-opacity))}.bg-red-950{--tw-bg-opacity:1;background-color:rgb(69 10 10 / var(--tw-bg-opacity))}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.font-medium{font-weight:500}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113 / var(--tw-text-opacity))}.opacity-50{opacity:0.5}.shadow-\\[0_0_10px_10px_rgba\$0\\2c 0\\2c 0\\2c 0\\.3\$\\]{--tw-shadow:0 0 10px 10px rgba(0,0,0,0.3);--tw-shadow-colored:0 0 10px 10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-red-400{--tw-shadow-color:#f87171;--tw-shadow:var(--tw-shadow-colored)}.outline-none{outline:2px solid transparent;outline-offset:2px}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.hover\\:border-b:hover{border-bottom-width:1px}.hover\\:border-t-4:hover{border-top-width:4px}.hover\\:brightness-150:hover{--tw-brightness:brightness(1.5);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.active\\:opacity-75:active{opacity:0.75}.group:hover .group-hover\\:top-\\[150\\%\\]{top:150%}"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"cfdad1","snapshot":"https://s1.qingting.work/runjs/666659dab226.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by TISEPSE","updated":"2024-01-22T18:59:24.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":83,"cssLen":1008,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn2 {\n position: relative;\n display: inline-block;\n padding: 15px 30px;\n border: 2px solid #fefefe;\n text-transform: uppercase;\n color: #fefefe;\n text-decoration: none;\n font-weight: 600;\n font-size: 20px;\n transition: 0.3s;\n}\n\n.btn2::before {\n content: '';\n position: absolute;\n top: -2px;\n left: -2px;\n width: calc(100% + 4px);\n height: calc(100% - -2px);\n background-color: #212121;\n transition: 0.3s ease-out;\n transform: scaleY(1);\n}\n\n.btn2::after {\n content: '';\n position: absolute;\n top: -2px;\n left: -2px;\n width: calc(100% + 4px);\n height: calc(100% - 50px);\n background-color: #212121;\n transition: 0.3s ease-out;\n transform: scaleY(1);\n}\n\n.btn2:hover::before {\n transform: translateY(-25px);\n height: 0;\n}\n\n.btn2:hover::after {\n transform: scaleX(0);\n transition-delay: 0.15s;\n}\n\n.btn2:hover {\n border: 2px solid #fefefe;\n}\n\n.btn2 span {\n position: relative;\n z-index: 3;\n}\n\nbutton {\n text-decoration: none;\n border: none;\n background-color: transparent;\n}"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"752ddd","snapshot":"https://s1.qingting.work/runjs/f9c5f55b60ab.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by portseif","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":919,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"button {\n background-color: #FFFFFF;\n border: 1px solid rgb(209,213,219);\n border-radius: .5rem;\n color: #111827;\n font-family: ui-sans-serif,system-ui,-apple-system,system-ui,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";\n font-size: .875rem;\n font-weight: 600;\n line-height: 1.25rem;\n padding: .75rem 1rem;\n text-align: center;\n -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n cursor: pointer;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-user-select: none;\n -ms-touch-action: manipulation;\n touch-action: manipulation;\n}\n\nbutton:hover {\n background-color: #f9fafb;\n}\n\nbutton:focus {\n outline: 2px solid rgba(0,0,0,0.1);\n outline-offset: 2px;\n}\n\nbutton:focus-visible {\n -webkit-box-shadow: none;\n box-shadow: none;\n}"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"5b39c5","snapshot":"https://s1.qingting.work/runjs/2722ea3d5b78.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by carlosepcc","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":275,"cssLen":1829,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cursor-pointer {\n cursor: pointer\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.border-b-\\[4px\\] {\n border-bottom-width: 4px\n}\n\n.border-blue-600 {\n --tw-border-opacity: 1;\n border-color: rgb(37 99 235 / var(--tw-border-opacity))\n}\n\n.bg-blue-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity))\n}\n\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n\n.hover\\:-translate-y-\\[1px\\]:hover {\n --tw-translate-y: -1px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n\n.hover\\:border-b-\\[6px\\]:hover {\n border-bottom-width: 6px\n}\n\n.hover\\:brightness-110:hover {\n --tw-brightness: brightness(1.1);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)\n}\n\n.active\\:translate-y-\\[2px\\]:active {\n --tw-translate-y: 2px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n\n.active\\:border-b-\\[2px\\]:active {\n border-bottom-width: 2px\n}\n\n.active\\:brightness-90:active {\n --tw-brightness: brightness(.9);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)\n}"},{"created":"2024-01-22T16:59:09.000Z","isPrivate":0,"projectId":"c1b3c1","snapshot":"https://s1.qingting.work/runjs/b41d92376172.png?x-oss-process=style/webp-w-500","tags":null,"title":"button by SharpTH","updated":"2024-01-22T18:59:23.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4981,"cssLen":1821,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".btn-cssbuttons {\n --btn-color: #275efe;\n position: relative;\n padding: 16px 32px;\n font-family: Roboto, sans-serif;\n font-weight: 500;\n font-size: 16px;\n line-height: 1;\n color: white;\n background: none;\n border: none;\n outline: none;\n overflow: hidden;\n cursor: pointer;\n filter: drop-shadow(0 2px 8px rgba(39, 94, 254, 0.32));\n transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.btn-cssbuttons::before {\n position: absolute;\n content: \"\";\n top: 0;\n left: 0;\n z-index: -1;\n width: 100%;\n height: 100%;\n background: var(--btn-color);\n border-radius: 24px;\n transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.btn-cssbuttons span,\n.btn-cssbuttons span span {\n display: inline-flex;\n vertical-align: middle;\n transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.btn-cssbuttons span {\n transition-delay: 0.05s;\n}\n\n.btn-cssbuttons span:first-child {\n padding-right: 7px;\n}\n\n.btn-cssbuttons span span {\n margin-left: 8px;\n transition-delay: 0.1s;\n}\n\n.btn-cssbuttons ul {\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n display: flex;\n margin: 0;\n padding: 0;\n list-style-type: none;\n transform: translateY(-50%);\n}\n\n.btn-cssbuttons ul li {\n flex: 1;\n}\n\n.btn-cssbuttons ul li a {\n display: inline-flex;\n vertical-align: middle;\n transform: translateY(55px);\n transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.btn-cssbuttons ul li a:hover {\n opacity: 0.5;\n}\n\n.btn-cssbuttons:hover::before {\n transform: scale(1.2);\n}\n\n.btn-cssbuttons:hover span,\n.btn-cssbuttons:hover span span {\n transform: translateY(-55px);\n}\n\n.btn-cssbuttons:hover ul li a {\n transform: translateY(0);\n}\n\n.btn-cssbuttons:hover ul li:nth-child(1) a {\n transition-delay: 0.15s;\n}\n\n.btn-cssbuttons:hover ul li:nth-child(2) a {\n transition-delay: 0.2s;\n}\n\n.btn-cssbuttons:hover ul li:nth-child(3) a {\n transition-delay: 0.25s;\n}"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"65edcd","snapshot":null,"tags":null,"title":"loader by satyamchaudharydev","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":202,"cssLen":1090,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".spinner {\n --red: #d62d20;\n --blue: #0057e7;\n --green: #008744;\n --yellow: #ffa700;\n position: relative;\n width: 60px;\n}\n\n.spinner:before {\n content: \"\";\n display: block;\n padding-top: 100%;\n}\n\n.circular {\n animation: rotate73451 2s linear infinite;\n height: 100%;\n transform-origin: center center;\n width: 100%;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n}\n\n.path {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n animation: dash0175 1.5s ease-in-out infinite, color7123 6s ease-in-out infinite;\n stroke-linecap: round;\n}\n\n@keyframes rotate73451 {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes dash0175 {\n 0% {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n }\n\n 50% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -35px;\n }\n\n 100% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -124px;\n }\n}\n\n@keyframes color7123 {\n 100%, 0% {\n stroke: var(--red);\n }\n\n 40% {\n stroke: var(--blue);\n }\n\n 66% {\n stroke: var(--green);\n }\n\n 80%, 90% {\n stroke: var(--yellow);\n }\n}\n\n\n"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"94fee5","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1897,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 148px;\n height: 148px;\n border-radius: 50%;\n margin: -64px auto 0;\n background-color: #ccc;\n background-image: radial-gradient(#fff 4px, #0000 0),\n radial-gradient(#fff 4px, #0000 0),\n radial-gradient(#fff 4px, #0000 0),\n radial-gradient(#fff 4px, #0000 0);\n background-position: 24px center, 8px center, -8px center, -24px center;\n position: relative;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.15) inset;\n animation: flash 1s linear infinite;\n}\n\n.loader::before , .loader::after {\n content: '';\n position: absolute;\n border: 1px solid #ccc;\n border-top-color: #0000;\n left: 50%;\n top: 100%;\n transform: translateX(-50%);\n width: 16px;\n height: 18px;\n background: #fff;\n}\n\n.loader::before {\n width: 0px;\n height: 64px;\n transform: translate(-50% , 18px);\n}\n\n@keyframes flash {\n 0% {\n background-image: radial-gradient(#DDD 4px, #0000 0),\n radial-gradient(#DDD 4px, #0000 0),\n radial-gradient(#DDD 4px, #0000 0),\n radial-gradient(#DDD 4px, #0000 0);\n }\n\n 25% {\n background-image: radial-gradient(#DDD 4px, #0000 0),\n radial-gradient(#DDD 4px, #0000 0),\n radial-gradient(#DDD 4px, #0000 0),\n radial-gradient(#fff 4px, #0000 0);\n }\n\n 50% {\n background-image: radial-gradient(#DDD 4px, #0000 0),\n radial-gradient(#DDD 4px, #0000 0),\n radial-gradient(#fff 4px, #0000 0),\n radial-gradient(#fff 4px, #0000 0);\n }\n\n 75% {\n background-image: radial-gradient(#DDD 4px, #0000 0),\n radial-gradient(#fff 4px, #0000 0),\n radial-gradient(#fff 4px, #0000 0),\n radial-gradient(#fff 4px, #0000 0);\n }\n\n 100% {\n background-image: radial-gradient(#fff 4px, #0000 0),\n radial-gradient(#fff 4px, #0000 0),\n radial-gradient(#fff 4px, #0000 0),\n radial-gradient(#fff 4px, #0000 0);\n }\n}"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"cf98fd","snapshot":null,"tags":null,"title":"loader by Ratinax","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":404,"cssLen":7478,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".banter-loader {\n position: absolute;\n left: 50%;\n top: 50%;\n width: 72px;\n height: 72px;\n margin-left: -36px;\n margin-top: -36px;\n}\n\n.banter-loader__box {\n float: left;\n position: relative;\n width: 20px;\n height: 20px;\n margin-right: 6px;\n}\n\n.banter-loader__box:before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background: #fff;\n border-radius: 50%;\n}\n\n.banter-loader__box:nth-child(3n) {\n margin-right: 0;\n margin-bottom: 6px;\n}\n\n.banter-loader__box:nth-child(1):before,\n.banter-loader__box:nth-child(4):before {\n margin-left: 26px;\n}\n\n.banter-loader__box:nth-child(3):before {\n margin-top: 52px;\n}\n\n.banter-loader__box:last-child {\n margin-bottom: 0;\n}\n\n@keyframes moveBox-1 {\n 9.0909090909% {\n transform: translate(-26px, 0);\n }\n\n 18.1818181818% {\n transform: translate(0px, 0);\n }\n\n 27.2727272727% {\n transform: translate(0px, 0);\n }\n\n 36.3636363636% {\n transform: translate(26px, 0);\n }\n\n 45.4545454545% {\n transform: translate(26px, 26px);\n }\n\n 54.5454545455% {\n transform: translate(26px, 26px);\n }\n\n 63.6363636364% {\n transform: translate(26px, 26px);\n }\n\n 72.7272727273% {\n transform: translate(26px, 0px);\n }\n\n 81.8181818182% {\n transform: translate(0px, 0px);\n }\n\n 90.9090909091% {\n transform: translate(-26px, 0px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(1) {\n animation: moveBox-1 4s infinite;\n}\n\n@keyframes moveBox-2 {\n 9.0909090909% {\n transform: translate(0, 0);\n }\n\n 18.1818181818% {\n transform: translate(26px, 0);\n }\n\n 27.2727272727% {\n transform: translate(0px, 0);\n }\n\n 36.3636363636% {\n transform: translate(26px, 0);\n }\n\n 45.4545454545% {\n transform: translate(26px, 26px);\n }\n\n 54.5454545455% {\n transform: translate(26px, 26px);\n }\n\n 63.6363636364% {\n transform: translate(26px, 26px);\n }\n\n 72.7272727273% {\n transform: translate(26px, 26px);\n }\n\n 81.8181818182% {\n transform: translate(0px, 26px);\n }\n\n 90.9090909091% {\n transform: translate(0px, 26px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(2) {\n animation: moveBox-2 4s infinite;\n}\n\n@keyframes moveBox-3 {\n 9.0909090909% {\n transform: translate(-26px, 0);\n }\n\n 18.1818181818% {\n transform: translate(-26px, 0);\n }\n\n 27.2727272727% {\n transform: translate(0px, 0);\n }\n\n 36.3636363636% {\n transform: translate(-26px, 0);\n }\n\n 45.4545454545% {\n transform: translate(-26px, 0);\n }\n\n 54.5454545455% {\n transform: translate(-26px, 0);\n }\n\n 63.6363636364% {\n transform: translate(-26px, 0);\n }\n\n 72.7272727273% {\n transform: translate(-26px, 0);\n }\n\n 81.8181818182% {\n transform: translate(-26px, -26px);\n }\n\n 90.9090909091% {\n transform: translate(0px, -26px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(3) {\n animation: moveBox-3 4s infinite;\n}\n\n@keyframes moveBox-4 {\n 9.0909090909% {\n transform: translate(-26px, 0);\n }\n\n 18.1818181818% {\n transform: translate(-26px, 0);\n }\n\n 27.2727272727% {\n transform: translate(-26px, -26px);\n }\n\n 36.3636363636% {\n transform: translate(0px, -26px);\n }\n\n 45.4545454545% {\n transform: translate(0px, 0px);\n }\n\n 54.5454545455% {\n transform: translate(0px, -26px);\n }\n\n 63.6363636364% {\n transform: translate(0px, -26px);\n }\n\n 72.7272727273% {\n transform: translate(0px, -26px);\n }\n\n 81.8181818182% {\n transform: translate(-26px, -26px);\n }\n\n 90.9090909091% {\n transform: translate(-26px, 0px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(4) {\n animation: moveBox-4 4s infinite;\n}\n\n@keyframes moveBox-5 {\n 9.0909090909% {\n transform: translate(0, 0);\n }\n\n 18.1818181818% {\n transform: translate(0, 0);\n }\n\n 27.2727272727% {\n transform: translate(0, 0);\n }\n\n 36.3636363636% {\n transform: translate(26px, 0);\n }\n\n 45.4545454545% {\n transform: translate(26px, 0);\n }\n\n 54.5454545455% {\n transform: translate(26px, 0);\n }\n\n 63.6363636364% {\n transform: translate(26px, 0);\n }\n\n 72.7272727273% {\n transform: translate(26px, 0);\n }\n\n 81.8181818182% {\n transform: translate(26px, -26px);\n }\n\n 90.9090909091% {\n transform: translate(0px, -26px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(5) {\n animation: moveBox-5 4s infinite;\n}\n\n@keyframes moveBox-6 {\n 9.0909090909% {\n transform: translate(0, 0);\n }\n\n 18.1818181818% {\n transform: translate(-26px, 0);\n }\n\n 27.2727272727% {\n transform: translate(-26px, 0);\n }\n\n 36.3636363636% {\n transform: translate(0px, 0);\n }\n\n 45.4545454545% {\n transform: translate(0px, 0);\n }\n\n 54.5454545455% {\n transform: translate(0px, 0);\n }\n\n 63.6363636364% {\n transform: translate(0px, 0);\n }\n\n 72.7272727273% {\n transform: translate(0px, 26px);\n }\n\n 81.8181818182% {\n transform: translate(-26px, 26px);\n }\n\n 90.9090909091% {\n transform: translate(-26px, 0px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(6) {\n animation: moveBox-6 4s infinite;\n}\n\n@keyframes moveBox-7 {\n 9.0909090909% {\n transform: translate(26px, 0);\n }\n\n 18.1818181818% {\n transform: translate(26px, 0);\n }\n\n 27.2727272727% {\n transform: translate(26px, 0);\n }\n\n 36.3636363636% {\n transform: translate(0px, 0);\n }\n\n 45.4545454545% {\n transform: translate(0px, -26px);\n }\n\n 54.5454545455% {\n transform: translate(26px, -26px);\n }\n\n 63.6363636364% {\n transform: translate(0px, -26px);\n }\n\n 72.7272727273% {\n transform: translate(0px, -26px);\n }\n\n 81.8181818182% {\n transform: translate(0px, 0px);\n }\n\n 90.9090909091% {\n transform: translate(26px, 0px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(7) {\n animation: moveBox-7 4s infinite;\n}\n\n@keyframes moveBox-8 {\n 9.0909090909% {\n transform: translate(0, 0);\n }\n\n 18.1818181818% {\n transform: translate(-26px, 0);\n }\n\n 27.2727272727% {\n transform: translate(-26px, -26px);\n }\n\n 36.3636363636% {\n transform: translate(0px, -26px);\n }\n\n 45.4545454545% {\n transform: translate(0px, -26px);\n }\n\n 54.5454545455% {\n transform: translate(0px, -26px);\n }\n\n 63.6363636364% {\n transform: translate(0px, -26px);\n }\n\n 72.7272727273% {\n transform: translate(0px, -26px);\n }\n\n 81.8181818182% {\n transform: translate(26px, -26px);\n }\n\n 90.9090909091% {\n transform: translate(26px, 0px);\n }\n\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n.banter-loader__box:nth-child(8) {\n animation: moveBox-8 4s infinite;\n}\n\n@keyframes moveBox-9 {\n 9.0909090909% {\n transform: translate(-26px, 0);\n }\n\n 18.1818181818% {\n transform: translate(-26px, 0);\n }\n\n 27.2727272727% {\n transform: translate(0px, 0);\n }\n\n 36.3636363636% {\n transform: translate(-26px, 0);\n }\n\n 45.4545454545% {\n transform: translate(0px, 0);\n }\n\n 54.5454545455% {\n transform: translate(0px, 0);\n }\n\n 63.6363636364% {\n transform: translate(-26px, 0);\n }\n\n 72.7272727273% {\n transform: translate(-26px, 0);\n }\n\n 81.8181818182% {\n transform: translate(-52px, 0);\n }\n\n 90.9090909091% {\n transform: translate(-26px, 0);\n }\n\n 100% {\n transform: translate(0px, 0);\n }\n}\n\n.banter-loader__box:nth-child(9) {\n animation: moveBox-9 4s infinite;\n}\n"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"407dcb","snapshot":null,"tags":null,"title":"loader by JaydipPrajapati1910","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":653,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 8px;\n height: 40px;\n border-radius: 4px;\n display: block;\n background-color: currentColor;\n margin: 20px auto;\n position: relative;\n color: blue;\n animation: animloader 0.3s 0.3s linear infinite alternate;\n}\n\n.loader::after,\n.loader::before {\n content: '';\n width: 8px;\n height: 40px;\n border-radius: 4px;\n background: currentColor;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 20px;\n animation: animloader 0.3s 0.45s linear infinite alternate;\n}\n\n.loader::before {\n left: -20px;\n animation-delay: 0s;\n}\n\n@keyframes animloader {\n 0% {\n height: 48px;\n }\n\n 100% {\n height: 4px;\n }\n}"}]}},"actionData":null,"errors":null}