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

Darth Vader By qpoziomek

","css":"::-moz-selection {\n background: #2D3363;\n color: #FAEECF\n}\n\n::selection {\n background: #2D3363;\n color: #FAEECF\n}\n\n.text {\n position: absolute;\n bottom: 20px;\n left: 25px;\n color: black;\n font-family: Arial,sans-serif;\n text-transform: uppercase;\n font-size: 14px;\n line-height: 28px;\n font-weight: bold;\n letter-spacing: 2px;\n z-index: 99\n}\n\na {\n color: #6172BA;\n text-decoration: none;\n cursor: pointer\n}\n\na:hover {\n text-decoration: underline\n}\n\n.vader {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-block;\n -webkit-transform: translate(-50%,-50%);\n transform: translate(-50%,-50%)\n}\n\n.vader .head {\n position: relative;\n width: 100px;\n height: 100px;\n margin-bottom: -10px;\n z-index: 1\n}\n\n.vader .helmet {\n position: absolute;\n top: 0;\n left: 5px;\n width: 90px;\n height: 80px;\n background: #222222;\n border-radius: 80px 80px 0 0\n}\n\n.vader .helmet::before {\n content: '';\n display: inline-block;\n position: absolute;\n top: 0;\n left: 50%;\n width: 50px;\n height: 8px;\n margin-left: -25px;\n background: #040507;\n border-radius: 25px 25px 0 0 / 8px 8px 0 0\n}\n\n.vader .helmet::after {\n content: '';\n display: inline-block;\n position: absolute;\n top: 8px;\n left: 50%;\n margin-left: -25px;\n height: 0;\n width: 0;\n border-left: 25px solid transparent;\n border-right: 25px solid transparent;\n border-top: 24px solid #040507\n}\n\n.vader .helmet span {\n position: absolute;\n top: 50%;\n width: 35px;\n height: 55px;\n background: #040507\n}\n\n.vader .helmet .left {\n left: -6px;\n -webkit-transform: rotate(25deg);\n transform: rotate(25deg)\n}\n\n.vader .helmet .right {\n right: -6px;\n -webkit-transform: rotate(-25deg);\n transform: rotate(-25deg)\n}\n\n.vader .helmet span::before {\n content: '';\n position: absolute;\n top: -5px;\n width: 8px;\n height: 55px;\n background: #222222\n}\n\n.vader .helmet .left::before {\n left: 0\n}\n\n.vader .helmet .right::before {\n right: 0\n}\n\n.vader .line {\n position: absolute;\n top: -3px;\n left: 50%;\n width: 6px;\n height: 38px;\n margin-left: -3px;\n background: #343434\n}\n\n.vader .line::before {\n content: '';\n display: inline-block;\n position: absolute;\n left: -4px;\n bottom: 0;\n width: 4px;\n height: 12px;\n background: #040507\n}\n\n.vader .line::after {\n content: '';\n display: inline-block;\n position: absolute;\n right: -4px;\n bottom: 0;\n width: 4px;\n height: 12px;\n background: #040507\n}\n\n.vader .mask {\n position: absolute;\n bottom: 19px;\n left: 50%\n}\n\n.vader .mask span {\n position: absolute;\n top: 0;\n width: 4px;\n height: 4px;\n border-radius: 1px;\n background: #C6C6C6\n}\n\n.vader .mask .top {\n left: 50%;\n margin-top: -16px;\n margin-left: -2px\n}\n\n.vader .mask .top::before {\n content: '';\n display: inline-block;\n position: absolute;\n left: -7px;\n top: -2px;\n width: 4px;\n height: 24px;\n background: #040507;\n border-radius: 4px;\n -webkit-transform: rotate(40deg);\n transform: rotate(40deg)\n}\n\n.vader .mask .top::after {\n content: '';\n display: inline-block;\n position: absolute;\n right: -7px;\n top: -2px;\n width: 4px;\n height: 24px;\n background: #040507;\n border-radius: 4px;\n -webkit-transform: rotate(-40deg);\n transform: rotate(-40deg)\n}\n\n.vader .mask .left {\n left: 12px\n}\n\n.vader .mask .center {\n left: 50%;\n margin-top: -16px;\n margin-left: -2px\n}\n\n.vader .mask .right {\n right: 12px\n}\n\n.vader .grill {\n position: absolute;\n bottom: 20px;\n left: 50%;\n width: 20px;\n margin-left: -10px\n}\n\n.vader .grill span {\n position: absolute;\n bottom: -5px;\n width: 2px;\n margin-left: -1px;\n background: #C6C6C6\n}\n\n.vader .grill .left {\n left: 4px;\n height: 10px\n}\n\n.vader .grill .center {\n left: 50%;\n height: 17px\n}\n\n.vader .grill .right {\n right: 2px;\n height: 10px\n}\n\n.vader .eyes {\n position: absolute;\n top: 35px;\n left: 10px;\n width: 80px;\n height: 40px;\n border-radius: 40px;\n background: #343434\n}\n\n.vader .eyes::before {\n content: '';\n display: inline-block;\n position: absolute;\n top: 33px;\n left: 5px;\n height: 0;\n width: 0;\n border-left: 35px solid transparent;\n border-right: 35px solid transparent;\n border-top: 30px solid #343434\n}\n\n.vader .eyes span {\n position: absolute;\n top: 5px;\n width: 30px;\n height: 30px;\n border-radius: 30px;\n background: #010000;\n -webkit-transition: background .3s ease-in-out;\n transition: background .3s ease-in-out\n}\n\n.vader .eyes .left {\n left: 7px\n}\n\n.vader .eyes .right {\n right: 7px\n}\n\n.vader .torso {\n position: relative;\n width: 60px;\n height: 80px;\n border-radius: 50px 50px 0 0;\n margin: 0 auto;\n background: #222222\n}\n\n.vader .torso::before {\n content: '';\n display: inline-block;\n position: absolute;\n left: -20px;\n top: -15px;\n width: 100px;\n height: 115px;\n border-radius: 50px 50px 0 0;\n margin: 0 auto;\n background: #040507;\n z-index: -1\n}\n\n.vader .belt {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 10px;\n background: #040507\n}\n\n.vader .belt span::before {\n content: '';\n position: absolute;\n top: 0;\n left: 50%;\n width: 20px;\n height: 10px;\n border-radius: 10px;\n margin-left: -10px;\n background: #C6C6C6\n}\n\n.vader .neck {\n position: absolute;\n left: 6px;\n top: 3px;\n width: 48px;\n height: 8px;\n background: #010000;\n z-index: 5\n}\n\n.vader .neck::before {\n content: '';\n position: absolute;\n top: -8px;\n left: 8px;\n width: 32px;\n height: 10px;\n background: #222222;\n border-radius: 0 0 4px 4px\n}\n\n.vader .neck::after {\n content: '';\n position: absolute;\n top: -8px;\n left: 8px;\n width: 32px;\n height: 1px;\n background: #666666\n}\n\n.vader .neck span {\n position: absolute;\n top: 0;\n width: 6px;\n height: 125%;\n margin-left: -3px;\n background: #434343\n}\n\n.vader .neck .left {\n left: 6px;\n -webkit-transform: rotate(30deg);\n transform: rotate(30deg);\n border-radius: 5px 0 0 0\n}\n\n.vader .neck .center {\n left: 50%;\n top: 2px\n}\n\n.vader .neck .right {\n right: 3px;\n -webkit-transform: rotate(-30deg);\n transform: rotate(-30deg);\n border-radius: 0 5px 0 0\n}\n\n.vader .neck .bottom {\n position: absolute;\n top: 8px;\n left: 4px;\n width: 46px;\n height: 5px;\n background: #222222\n}\n\n.vader .plate {\n position: absolute;\n left: 15px;\n top: 25px;\n width: 30px;\n height: 32px;\n background: #343434\n}\n\n.vader .plate .red_top {\n position: absolute;\n left: 2px;\n top: 2px;\n width: 12px;\n height: 18px;\n background: #d81f27\n}\n\n.vader .plate .red_top::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 5px;\n background: rgba(0,0,0,0.2)\n}\n\n.vader .plate .red_top::after {\n content: '';\n position: absolute;\n bottom: 5px;\n left: 0;\n width: 100%;\n height: 2px;\n background: #343434\n}\n\n.vader .plate .red_center {\n position: absolute;\n right: 2px;\n top: 12px;\n width: 12px;\n height: 8px;\n background: #d81f27\n}\n\n.vader .plate .red_center::before {\n content: '';\n position: absolute;\n left: 0;\n top: 4px;\n width: 100%;\n height: 4px;\n background: rgba(0,0,0,0.2)\n}\n\n.vader .plate .red_center::after {\n content: '';\n position: absolute;\n left: 5px;\n top: 0;\n width: 2px;\n height: 100%;\n background: #343434\n}\n\n.vader .plate .red_bottom {\n position: absolute;\n right: 2px;\n bottom: 2px;\n width: 4px;\n height: 8px;\n background: #d81f27\n}\n\n.vader .plate .blue {\n position: absolute;\n right: 2px;\n top: 2px;\n width: 12px;\n height: 8px;\n background: #455caa\n}\n\n.vader .plate .blue::before {\n content: '';\n position: absolute;\n top: 3px;\n left: 0;\n width: 100%;\n height: 2px;\n background: #343434\n}\n\n.vader .plate .gray {\n position: absolute;\n left: 2px;\n bottom: 2px;\n width: 20px;\n height: 8px;\n background: #9f9fa1\n}\n\n.vader .plate .gray::before {\n content: '';\n position: absolute;\n left: 5px;\n top: 0;\n width: 2px;\n height: 100%;\n background: #343434\n}\n\n.vader .plate .gray::after {\n content: '';\n position: absolute;\n right: 0;\n top: 0;\n width: 8px;\n height: 100%;\n background: rgba(0,0,0,0.2)\n}\n\n.vader .legs {\n position: relative;\n width: 50px;\n height: 20px;\n margin: 0 auto;\n background: #222222\n}\n\n.vader .legs::before {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n width: 20px;\n height: 100%;\n margin-left: -10px;\n background: #040507\n}\n\n.vader .boots {\n position: absolute;\n bottom: 0;\n left: 50%\n}\n\n.vader .boots span {\n content: '';\n display: inline-block;\n position: absolute;\n top: 0;\n width: 30px;\n height: 10px;\n background: #040507\n}\n\n.vader .boots .left {\n left: 10px;\n border-radius: 0 15px 0 0\n}\n\n.vader .boots .right {\n right: 10px;\n border-radius: 15px 0 0 0\n}\n\n.vader .hand {\n position: absolute;\n top: 60%;\n z-index: 2\n}\n\n.vader .hand.left {\n left: -2px;\n top: 82%\n}\n\n.vader .hand.right {\n right: -20px\n}\n\n.vader .hand .hand {\n position: absolute;\n top: 0;\n width: 11px;\n height: 22px;\n margin-top: -12px;\n margin-left: -12px;\n background: #040507\n}\n\n.vader .hand.left .hand {\n left: 0;\n border-radius: 22px 0 0 22px\n}\n\n.vader .hand.right .hand {\n right: 0;\n width: 22px;\n border-radius: 22px\n}\n\n.vader .sword {\n position: absolute;\n top: 50%;\n left: -20px;\n z-index: 10\n}\n\n.vader .sword .handle {\n position: absolute;\n top: 0;\n left: 0;\n width: 6px;\n height: 30px;\n margin-left: -3px;\n background: #343434\n}\n\n.vader .sword .handle::before {\n content: '';\n position: absolute;\n left: 0;\n top: 5px;\n width: 100%;\n height: 5px;\n background: #888888\n}\n\n.vader .sword .handle::after {\n content: '';\n position: absolute;\n right: 4px;\n top: 5px;\n width: 4px;\n height: 5px;\n background: #343434\n}\n\n.vader .sword .light {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 20px;\n height: 120px;\n margin-left: -10px;\n background: rgba(248,80,50,0);\n background: -moz-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n background: -webkit-gradient(left top, right top, color-stop(10%, rgba(248,80,50,0)), color-stop(20%, rgba(247,67,37,0)), color-stop(40%, rgba(246,41,12,0.67)), color-stop(50%, rgba(255,176,166,1)), color-stop(60%, rgba(246,41,12,0.67)), color-stop(80%, rgba(236,51,30,0)), color-stop(90%, rgba(231,56,39,0)));\n background: -webkit-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n background: -o-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n background: -ms-linear-gradient(left, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n background: linear-gradient(to right, rgba(248,80,50,0) 10%, rgba(247,67,37,0) 20%, rgba(246,41,12,0.67) 40%, rgba(255,176,166,1) 50%, rgba(246,41,12,0.67) 60%, rgba(236,51,30,0) 80%, rgba(231,56,39,0) 90%);\n}\n\n.vader .sword .light::before {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n width: 3px;\n height: 120px;\n margin-left: -1px;\n background: rgba(248,80,50,1);\n z-index: -1\n}\n\n.vader .shadow {\n position: absolute;\n bottom: -17px;\n left: -25px;\n display: block;\n width: 150px;\n height: 14px;\n background: rgba(0,0,0,0.15);\n border-radius: 50%\n}\n\n.animation-right {\n -webkit-animation: animationHandRight 1.5s linear infinite;\n animation: animationHandRight 1.5s linear infinite\n}\n\n@-webkit-keyframes animationHandRight {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg)\n }\n\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg)\n }\n}\n\n@keyframes animationHandRight {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg)\n }\n\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg)\n }\n}\n\n.animation-left {\n -webkit-animation: animationHandLeft 3s ease-in-out infinite;\n animation: animationHandLeft 3s ease-in-out infinite\n}\n\n@-webkit-keyframes animationHandLeft {\n 0%, 100% {\n -webkit-transform: translateX(0) rotate(-25deg);\n transform: translateX(0) rotate(-25deg)\n }\n\n 50% {\n -webkit-transform: translateX(150px) rotate(25deg);\n transform: translateX(150px) rotate(25deg)\n }\n}\n\n@keyframes animationHandLeft {\n 0%, 100% {\n -webkit-transform: translateX(0) rotate(-25deg);\n transform: translateX(0) rotate(-25deg)\n }\n\n 50% {\n -webkit-transform: translateX(150px) rotate(25deg);\n transform: translateX(150px) rotate(25deg)\n }\n}\n\n.vader:hover .eyes .left {\n background: #d81f27\n}\n\n.vader:hover .eyes .right {\n background: #455caa\n}"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"24d622","snapshot":null,"tags":null,"title":"loader by vk-uiux","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":97,"cssLen":708,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n position: relative;\n width: 33px;\n height: 33px;\n perspective: 67px;\n}\n\n.loader div {\n width: 100%;\n height: 100%;\n background: #fff;\n position: absolute;\n left: 50%;\n transform-origin: left;\n animation: loader 2s infinite;\n}\n\n.loader div:nth-child(1) {\n animation-delay: 0.15s;\n}\n\n.loader div:nth-child(2) {\n animation-delay: 0.3s;\n}\n\n.loader div:nth-child(3) {\n animation-delay: 0.45s;\n}\n\n.loader div:nth-child(4) {\n animation-delay: 0.6s;\n}\n\n.loader div:nth-child(5) {\n animation-delay: 0.75s;\n}\n\n@keyframes loader {\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":"e625c0","snapshot":null,"tags":null,"title":"loader by Codecite","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":276,"cssLen":468,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner-container {\n width: 150px;\n height: 150px;\n position: relative;\n margin: 30px auto;\n overflow: hidden;\n}\n\n.spinner {\n position: absolute;\n width: calc(100% - 9.9px);\n height: calc(100% - 9.9px);\n border: 5px solid transparent;\n border-radius: 50%;\n border-top-color: #fff;\n animation: spin 5s cubic-bezier(0.17, 0.49, 0.96, 0.79) infinite;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"c45be7","snapshot":null,"tags":null,"title":"loader by terenceodonoghue","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":78,"cssLen":822,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

","css":".container {\n position: absolute;\n top: 50%;\n left: 50%;\n display: flex;\n gap: 0.625em;\n transform: translate(-50%, -50%);\n}\n\n.container span {\n border-radius: 50%;\n height: 1.5em;\n width: 1.5em;\n}\n\n.container span::before {\n content: \"\";\n display: block;\n border-radius: inherit;\n height: inherit;\n width: inherit;\n background-color: inherit;\n animation: ripple 1.8s ease-out infinite;\n animation-delay: inherit;\n z-index: -1;\n}\n\n.container span:nth-of-type(1) {\n background-color: #84cdfa;\n}\n\n.container span:nth-of-type(2) {\n background-color: #5ad1cd;\n animation-delay: 0.2s;\n}\n\n.container span:nth-of-type(3) {\n background-color: #9b59b6;\n animation-delay: 0.4s;\n}\n\n@keyframes ripple {\n from {\n opacity: 1;\n transform: scale(0);\n }\n\n to {\n opacity: 0;\n transform: scale(3);\n }\n}"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"3d3567","snapshot":null,"tags":null,"title":"loader by AmIt-DasIT","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":93,"cssLen":895,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".card {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n position: relative;\n transition: 1s;\n animation: rotate 1s linear infinite;\n}\n\n.card .conic_back1 {\n width: 150px;\n height: 150px;\n position: absolute;\n background: conic-gradient(transparent, transparent, transparent, crimson);\n}\n\n.card .conic_back2 {\n width: 150px;\n height: 150px;\n position: absolute;\n transform: rotate(180deg);\n background: conic-gradient(transparent, transparent, transparent, orange);\n}\n\n@keyframes rotate {\n 0% {\n width: 0px;\n height: 0px;\n transform: rotate(0deg);\n }\n\n 30% {\n width: 45px;\n height: 45px;\n transform: rotate(100deg);\n }\n\n 60% {\n width: 35px;\n height: 35px;\n filter: blur(1px);\n transform: rotate(360deg);\n }\n\n 100% {\n transform: rotate(1240deg);\n }\n}\n"},{"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}"}]}},"actionData":null,"errors":null}