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

\n \n

","css":".loading svg polyline {\n fill: none;\n stroke-width: 3;\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n\n.loading svg polyline#back {\n fill: none;\n stroke: #e0464b33;\n}\n\n.loading svg polyline#front {\n fill: none;\n stroke: #d2494b;\n stroke-dasharray: 48, 144;\n stroke-dashoffset: 192;\n animation: dash_682 1.4s linear infinite;\n}\n\n@keyframes dash_682 {\n 72.5% {\n opacity: 0;\n }\n\n to {\n stroke-dashoffset: 0;\n }\n}\n"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"a89acf","snapshot":null,"tags":null,"title":"loader by fanishah","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1707,"cssLen":680,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n","css":".gegga {\n width: 0;\n}\n\n.snurra {\n filter: url(#gegga);\n}\n\n.stopp1 {\n stop-color: #f700a8;\n}\n\n.stopp2 {\n stop-color: #ff8000;\n}\n\n.halvan {\n animation: Snurra1 10s infinite linear;\n stroke-dasharray: 180 800;\n fill: none;\n stroke: url(#gradient);\n stroke-width: 23;\n stroke-linecap: round;\n}\n\n.strecken {\n animation: Snurra1 3s infinite linear;\n stroke-dasharray: 26 54;\n fill: none;\n stroke: url(#gradient);\n stroke-width: 23;\n stroke-linecap: round;\n}\n\n.skugga {\n filter: blur(5px);\n opacity: 0.3;\n position: absolute;\n transform: translate(3px, 3px);\n}\n\n@keyframes Snurra1 {\n 0% {\n stroke-dashoffset: 0;\n }\n\n 100% {\n stroke-dashoffset: -403px;\n }\n}\n"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"694183","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":566,"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 border-radius: 50%;\n display: inline-block;\n position: relative;\n border: 10px solid;\n box-sizing: border-box;\n animation: animloader 1s linear infinite alternate;\n}\n\n@keyframes animloader {\n 0% {\n border-color: white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);\n }\n\n 33% {\n border-color: white white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);\n }\n\n 66% {\n border-color: white white white rgba(255, 255, 255, 0);\n }\n\n 100% {\n border-color: white white white white;\n }\n} "},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"0c72b4","snapshot":null,"tags":null,"title":"loader by AHMED-MIT","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":588,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".spinner {\n position: relative;\n width: 35.2px;\n height: 35.2px;\n}\n\n.spinner::before,\n.spinner::after {\n content: '';\n width: 100%;\n height: 100%;\n display: block;\n animation: spinner-b4c8mmhg 0.5s backwards, spinner-49opz7hg 1.25s 0.5s infinite ease;\n border: 8.8px solid #000000;\n border-radius: 50%;\n box-shadow: 0 -52.8px 0 -8.8px #000000;\n position: absolute;\n}\n\n.spinner::after {\n animation-delay: 0s, 1.25s;\n}\n\n@keyframes spinner-b4c8mmhg {\n from {\n box-shadow: 0 0 0 -8.8px #000000;\n }\n}\n\n@keyframes spinner-49opz7hg {\n to {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:43.000Z","isPrivate":0,"projectId":"e29fc7","snapshot":null,"tags":null,"title":"loader by Gautammsharma","updated":"2024-01-22T16:54:43.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":67,"cssLen":989,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 20em;\n}\n\n.loader {\n position: relative;\n width: 3em;\n height: 3em;\n border-radius: 50%;\n background-color: rgb(208, 208, 208);\n box-shadow: 0 0em 4em rgba(23, 190, 250, 0.5);\n animation: loader-rotate 1s linear infinite;\n}\n\n.loader::before,\n.loader::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n border: 1em solid rgba(0, 0, 0, 0.1);\n box-sizing: border-box;\n}\n\n.loader::before {\n animation: loader-pulse 1s ease-out infinite;\n}\n\n.loader::after {\n animation: loader-pulse 1s ease-out infinite 0.5s;\n}\n\n@keyframes loader-rotate {\n 0% {\n transform: rotate(0);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes loader-pulse {\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n\n 50% {\n transform: scale(1.5);\n opacity: 0.5;\n }\n\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n}\n"}]}},"actionData":null,"errors":null}