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

","css":".loader-container {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%\n}\n\n.loader {\n width: 80px;\n height: 80px;\n position: relative;\n}\n\n.loader .circle {\n position: absolute;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n animation: pulse 1.2s infinite ease-in-out;\n}\n\n.loader .circle:nth-child(1) {\n top: 0;\n left: 30px;\n background-color: #4158D0;\n background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);\n box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;\n}\n\n.loader .circle:nth-child(2) {\n top: 30px;\n left: 60px;\n background-color: #0093E9;\n background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);\n animation-delay: 0.4s;\n box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;\n}\n\n.loader .circle:nth-child(3) {\n top: 60px;\n left: 30px;\n background-color: #00DBDE;\n background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);\n animation-delay: 0.8s;\n box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;\n}\n\n.loader .circle:nth-child(4) {\n top: 30px;\n left: 0;\n background-color: #3EECAC;\n background-image: linear-gradient(19deg, #3EECAC 0%, #EE74E1 100%);\n animation-delay: 1.2s;\n box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.2);\n opacity: 0.5;\n }\n\n 100% {\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"76e97d","snapshot":null,"tags":null,"title":"loader by jeremyssocial","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":512,"cssLen":1147,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

Status

\n Loading\n .\n .\n .\n

\n","css":"/* Terminal Window */\n.terminal {\n width: 500px;\n background-color: #000;\n color: #0f0;\n font-family: \"Courier New\", Courier, monospace;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);\n}\n\n/* Terminal Header */\n.terminal-header {\n background-color: #333;\n padding: 5px;\n display: flex;\n align-items: center;\n color: #fff;\n}\n\n.buttons {\n display: flex;\n margin-right: 15px;\n}\n\n.buttons span {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n display: inline-block;\n margin-right: 5px;\n}\n\n.close {\n background-color: #ff605c;\n}\n.minimize {\n background-color: #ffbd44;\n}\n.maximize {\n background-color: #00ca4e;\n}\n\n.title {\n flex-grow: 1;\n text-align: center;\n}\n\n/* Terminal Body */\n.terminal-body {\n padding: 10px;\n}\n\n.terminal-loader {\n display: inline-flex;\n align-items: center;\n}\n\n.loader-text {\n margin-right: 5px;\n}\n\n.dot {\n opacity: 0;\n animation: dotFadeInOut 1.5s infinite;\n}\n\n@keyframes dotFadeInOut {\n 0%,\n 100% {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n}\n\n#dot1 {\n animation-delay: 0.5s;\n}\n\n#dot2 {\n animation-delay: 0.6s;\n}\n\n#dot3 {\n animation-delay: 0.7s;\n}\n"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"d45118","snapshot":null,"tags":null,"title":"loader by bernethe","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":745,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 2rem;\n height: 2rem;\n clear: both;\n margin: 1rem auto;\n border: 0.0625rem #000 solid;\n border-radius: .25rem;\n overflow: hidden;\n position: relative;\n}\n\n.loader:after, .loader:before {\n content: '';\n border-radius: 50%;\n position: absolute;\n width: inherit;\n height: inherit;\n animation: spVortex 2s infinite linear;\n}\n\n.loader:before {\n border-top: 0.375rem #000 solid;\n top: -0.1875rem;\n left: calc( -50% - 0.1875rem );\n transform-origin: right center;\n}\n\n.loader:after {\n border-bottom: 0.375rem #000 solid;\n top: 0.1875rem;\n right: calc( -50% - 0.1875rem );\n transform-origin: left center;\n}\n\n@keyframes spVortex {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(359deg);\n }\n}"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"306173","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":955,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n height: 150px;\n width: 100px;\n border-radius: 55px 55px 10px 10px;\n position: relative;\n background: #FF3D00;\n background-image: linear-gradient(0deg,\n #f63a99 25%,\n #30dcf6 25%,\n #30dcf6 25%,\n #30dcf6 50%,\n #f2d200 50%,\n #f2d200 50%,\n #f2d200 75%,\n #70ca5c 75%);\n background-position: 0px 0px;\n background-size: auto 175px;\n background-repeat: repeat-y;\n animation: colorShift 6s linear infinite;\n}\n\n.loader:before {\n content: '';\n position: absolute;\n left: 10px;\n bottom: 15px;\n width: 15px;\n height: 100px;\n border-radius: 50px;\n background: rgba(255, 255, 255, 0.5);\n}\n\n.loader:after {\n content: \"\";\n position: absolute;\n left: 50%;\n top: 100%;\n transform: translate(-50% , 0);\n box-shadow: 0 15px 2px rgba(0, 0, 0, 0.25) inset;\n width: 32px;\n height: 45px;\n background: #E09C5F;\n border-radius: 0 0 12px 12px;\n}\n\n@keyframes colorShift {\n to {\n background-position: 0 175px\n }\n}\n\n "},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"5a3566","snapshot":null,"tags":null,"title":"loader by TimTrayler","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":340,"cssLen":709,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n \n \n \n \n \n

","css":".spinner {\n --accent: fuchsia;\n --max-scale: 4;\n --speed: 0.2;\n display: flex;\n gap: 0.3em;\n transform: skew(15deg, 10deg);\n}\n\n.spinner span {\n display: block;\n background-color: var(--accent);\n box-shadow: 1px 1px 5px 0.2px var(--accent);\n width: 0.7px;\n height: 0.6em;\n}\n\n.spinner .spinner-part-0 {\n animation: load432 calc(1s/var(--speed)) linear infinite;\n}\n\n.spinner .spinner-part-1 {\n animation: load432 calc(0.16s/var(--speed)) linear infinite;\n}\n\n.spinner .spinner-part-2 {\n animation: load432 calc(0.4s/var(--speed)) linear infinite;\n}\n\n.spinner .spinner-part-3 {\n animation: load432 calc(0.5s/var(--speed)) linear infinite;\n}\n\n@keyframes load432 {\n 50% {\n transform: scaleY(var(--max-scale));\n }\n}\n"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"ff1010","snapshot":null,"tags":null,"title":"loader by Markoslc","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":111,"cssLen":1017,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".item1, .item2, .item3 {\n position: absolute;\n background-color: transparent;\n left: calc(50% - (var(--size) / 2));\n top: calc(50% - (var(--size) / 2));\n height: var(--size);\n width: var(--size);\n border-radius: 50%;\n}\n\n.loader .item1 {\n --size: 90px;\n animation: size1_1 2.5s infinite alternate;\n z-index: 1;\n}\n\n.loader .item2 {\n --size: 60px;\n animation: size1_2 2.5s infinite alternate;\n z-index: 2;\n}\n\n.loader .item3 {\n --size: 30px;\n animation: size1_3 2.5s infinite alternate;\n z-index: 3;\n}\n\n@keyframes size1_1 {\n 0%,\n 10% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(1);\n box-shadow: 8px 8px 14px #c5c5c5, -8px -8px 14px #ffffff;\n }\n}\n\n@keyframes size1_2 {\n 0%,\n 40% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(1);\n box-shadow: 8px 8px 14px #c5c5c5, -8px -8px 14px #ffffff;\n }\n}\n\n@keyframes size1_3 {\n 0%,\n 70% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(1);\n box-shadow: 8px 8px 14px #c5c5c5, -8px -8px 14px #ffffff;\n }\n}"},{"created":"2024-01-22T16:54:39.000Z","isPrivate":0,"projectId":"a30ae1","snapshot":null,"tags":null,"title":"loader by Vazafirst","updated":"2024-01-22T16:54:39.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":241,"cssLen":1454,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"#page {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n#container {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n}\n\n#h3 {\n color: rgb(82, 79, 79);\n}\n\n#ring {\n width: 190px;\n height: 190px;\n border: 1px solid transparent;\n border-radius: 50%;\n position: absolute;\n}\n\n#ring:nth-child(1) {\n border-bottom: 8px solid rgb(240, 42, 230);\n animation: rotate1 2s linear infinite;\n}\n\n@keyframes rotate1 {\n from {\n transform: rotateX(50deg) rotateZ(110deg);\n }\n\n to {\n transform: rotateX(50deg) rotateZ(470deg);\n }\n}\n\n#ring:nth-child(2) {\n border-bottom: 8px solid rgb(240, 19, 67);\n animation: rotate2 2s linear infinite;\n}\n\n@keyframes rotate2 {\n from {\n transform: rotateX(20deg) rotateY(50deg) rotateZ(20deg);\n }\n\n to {\n transform: rotateX(20deg) rotateY(50deg) rotateZ(380deg);\n }\n}\n\n#ring:nth-child(3) {\n border-bottom: 8px solid rgb(3, 170, 170);\n animation: rotate3 2s linear infinite;\n}\n\n@keyframes rotate3 {\n from {\n transform: rotateX(40deg) rotateY(130deg) rotateZ(450deg);\n }\n\n to {\n transform: rotateX(40deg) rotateY(130deg) rotateZ(90deg);\n }\n}\n\n#ring:nth-child(4) {\n border-bottom: 8px solid rgb(207, 135, 1);\n animation: rotate4 2s linear infinite;\n}\n\n@keyframes rotate4 {\n from {\n transform: rotateX(70deg) rotateZ(270deg);\n }\n\n to {\n transform: rotateX(70deg) rotateZ(630deg);\n }\n}\n/* Improving visualization in light mode */"},{"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"}]}},"actionData":null,"errors":null}