{"loaderData":{"0":null,"0-3":{"total":7413,"projects":[{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"ea67ae","snapshot":null,"tags":null,"title":"loader by JkHuger","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":50,"cssLen":1049,"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 overflow: hidden;\n box-shadow: -5px -5px -5px rgba(255, 255, 255, 0.1),\n 10px 10px 10px rgba(0, 0, 0, 0.4),\n inset -5px -5px -5px rgba(255, 255, 255, 0.2),\n inset 10px 10px 10px rgba(0, 0, 0, 0.4);\n height: 100px;\n width: 100px;\n border-radius: 50%;\n}\n\n.loader:before {\n position: absolute;\n content: '';\n z-index: 10;\n opacity: 10;\n top: 25px;\n left: 25px;\n right: 25px;\n bottom: 25px;\n background-color: #010113;\n border-radius: 50%;\n box-shadow: -5px -5px -5px rgba(255, 255, 255, 0.1),\n 10px 10px 10px rgba(0, 0, 0, 0.4),\n inset -5px -5px -5px rgba(255, 255, 255, 0.2),\n inset 10px 10px 10px rgba(0, 0, 0, 0.4);\n}\n\n.loader span {\n position: absolute;\n height: 100%;\n width: 100%;\n filter: blur(20px);\n border-radius: 50%;\n background: linear-gradient(#0e11d4, #0b8f84, #d81587);\n animation: loader_41 0.6s linear infinite;\n}\n\n@keyframes loader_41 {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"16f11d","snapshot":null,"tags":null,"title":"loader by adamgiebl","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":27,"cssLen":808,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".loader {\n width: 64px;\n height: 64px;\n background: #ff6b6b;\n display: block;\n margin: 20px auto;\n position: relative;\n box-sizing: border-box;\n animation: rotation 1s linear infinite;\n}\n\n.loader::before {\n content: '';\n box-sizing: border-box;\n left: 0;\n top: 0;\n transform: rotate(45deg);\n position: absolute;\n width: 64px;\n height: 64px;\n background: #ff3d3d;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);\n}\n\n.loader::after {\n content: '';\n box-sizing: border-box;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n background: rgb(255, 107, 107);\n transform: translate(-50%, -50%);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);\n}\n\n@keyframes rotation {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"68e9b8","snapshot":null,"tags":null,"title":"loader by adamgiebl","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":502,"cssLen":4444,"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 \n \n \n \n \n \n \n \n

\n","css":".section-center {\n z-index: 10;\n width: 100%;\n margin: 0 auto;\n text-align: center;\n -webkit-transition: all 500ms linear;\n transition: all 500ms linear;\n}\n\n.section-path {\n position: relative;\n width: 238px;\n height: 76px;\n border-radius: 35px;\n margin: 0 auto;\n text-align: center;\n background-color: #3B3B3B;\n box-shadow: inset -2px 20px 10px 0 rgba(0,0,0,.06),\n inset -2px 30px 10px 0 rgba(0,0,0,.04);\n border: 3px groove rgba(225,225,225,0.07);\n overflow: hidden;\n -webkit-transition: all 300ms linear;\n transition: all 300ms linear;\n}\n\n.globe {\n position: relative;\n width: 66px;\n height: 66px;\n overflow: hidden;\n margin-top: 2px;\n margin-left: 2px;\n border-radius: 50%;\n box-shadow: 0 10px 40px rgba(0,0,0,0.65);\n animation: rotateBall 4s ease infinite;\n -webkit-transition: all 300ms linear;\n transition: all 300ms linear;\n}\n\n@keyframes rotateBall {\n 0% {\n transform: translateX(0);\n }\n\n 50% {\n transform: translateX(162px);\n }\n\n 100% {\n transform: translateX(0);\n }\n}\n\n.globe:after {\n position: absolute;\n width: 5px;\n height: 12px;\n background-color: rgba(255, 255, 255, 0.1);\n content: '';\n left: 40px;\n top: 15px;\n border-radius: 50%;\n z-index: 2;\n box-shadow: 0 0 14px 7px rgba(255, 255, 255, 0.1);\n}\n\n.globe:before {\n position: absolute;\n width: 100%;\n height: 100%;\n content: '';\n left: 0;\n top: 0;\n border-radius: 50%;\n z-index: 1;\n box-shadow: inset 0 0 15px #1a252f;\n opacity: 0.4;\n -webkit-transition: all 300ms linear;\n transition: all 300ms linear;\n}\n\n.globe .wrapper {\n position: absolute;\n width: 528px;\n height: 528px;\n top: 0;\n left: -462px;\n animation: moveBall 4s ease infinite;\n}\n\n@keyframes moveBall {\n 0% {\n left: -462px;\n }\n\n 50% {\n left: 0;\n }\n\n 100% {\n left: -462px;\n }\n}\n\n.globe .wrapper span {\n position: absolute;\n width: 33px;\n height: 528px;\n top: 0;\n left: 0;\n background-color: #F2F2F2;\n box-shadow: inset 0 0 25px #E1E1E1;\n}\n\n.globe .wrapper span:nth-child(2) {\n left: 33px;\n background-color: #F2F2F2;\n}\n\n.globe .wrapper span:nth-child(3) {\n left: 66px;\n}\n\n.globe .wrapper span:nth-child(4) {\n left: 99px;\n background-color: #F2F2F2;\n}\n\n.globe .wrapper span:nth-child(5) {\n left: 132px;\n}\n\n.globe .wrapper span:nth-child(6) {\n left: 165px;\n background-color: #F2F2F2;\n}\n\n.globe .wrapper span:nth-child(7) {\n left: 198px;\n}\n\n.globe .wrapper span:nth-child(8) {\n left: 231px;\n background-color: #F2F2F2;\n}\n\n.globe .wrapper span:nth-child(9) {\n left: 264px;\n}\n\n.globe .wrapper span:nth-child(10) {\n left: 297px;\n background-color: #F2F2F2;\n}\n\n.globe .wrapper span:nth-child(11) {\n left: 330px;\n}\n\n.globe .wrapper span:nth-child(12) {\n left: 363px;\n background-color: #F2F2F2;\n}\n\n.globe .wrapper span:nth-child(13) {\n left: 396px;\n}\n\n.globe .wrapper span:nth-child(14) {\n left: 429px;\n background-color: #F2F2F2;\n}\n\n.globe .wrapper span:nth-child(15) {\n left: 462px;\n}\n\n.globe .wrapper span:nth-child(16) {\n left: 495px;\n background-color: #F2F2F2;\n}\n\n#switch,\n #circle {\n cursor: pointer;\n -webkit-transition: all 300ms linear;\n transition: all 300ms linear;\n}\n\n#switch {\n width: 70px;\n height: 8px;\n margin: 0 auto;\n text-align: center;\n border: 2px solid #5C5C5C;\n border-radius: 27px;\n background: #000;\n position: relative;\n display: inline-block;\n margin-top: 40px;\n margin-bottom: 20px;\n}\n\n#circle {\n position: absolute;\n top: -11px;\n left: 5px;\n width: 26px;\n height: 26px;\n border-radius: 50%;\n box-shadow: 0 4px 4px rgba(0,0,0,0.25), 0 0 0 1px rgba(26,53,71,0.07);\n background: #000;\n}\n\n.switched {\n border-color: #000 !important;\n background: #5C5C5C !important;\n}\n\n.switched #circle {\n left: 35px;\n background: #fff;\n}\n\n.section-center p span {\n position: relative;\n padding: 4px 10px;\n margin: 0 5px;\n}\n\n.section-center p span:before {\n position: absolute;\n content: '';\n width: 100%;\n height: 100%;\n border-radius: 4px;\n background-color: #5C5C5C;\n box-shadow: 0 2px 4px rgba(0,0,0,0.25);\n left: 0;\n top: 0;\n z-index: -1;\n -webkit-transition: all 300ms linear;\n transition: all 300ms linear;\n}\n\n.section-center p span:after {\n position: absolute;\n content: '';\n width: calc(100% - 10px);\n height: 2px;\n border-radius: 4px;\n background-color: #fff;\n left: 5px;\n top: 50%;\n z-index: 1;\n -webkit-transition: all 300ms linear;\n transition: all 300ms linear;\n}\n\n.section-center p span:nth-child(2):after {\n opacity: 0;\n}"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"f2805f","snapshot":null,"tags":null,"title":"loader by catraco","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":675,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".spinner {\n --size: 30px;\n --first: #005bba;\n --second: #fed500;\n width: 50px;\n height: 50px;\n position: relative;\n animation: spin 2s linear infinite;\n}\n\n.spinner::before,\n.spinner::after {\n content: \"\";\n width: var(--size);\n height: var(--size);\n background: var(--first);\n border-radius: 100%;\n position: absolute;\n top: 10%;\n transform: translateY(-50%);\n animation: bounce 1s ease-in-out alternate infinite;\n}\n\n.spinner::after {\n background: var(--second);\n\n animation: bounce 1s 0.5s ease-in-out alternate infinite;\n}\n\n@keyframes bounce {\n 50% {\n transform: translateX(-50%);\n }\n}\n\n@keyframes spin {\n 100% {\n transform: rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"c8c998","snapshot":null,"tags":null,"title":"loader by csozidev","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":203,"cssLen":1248,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"/*\n I DID NOT MAKE THIS! THIS IS JUST A REPOST FROM: \n codepen.io/AlexWarnes/pen/jXYYKL \n My website: english.csozi.hu*/\n\n.configure-border-1 {\n width: 50px;\n height: 50px;\n padding: 3px;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n background: #fb5b53;\n animation: configure-clockwise 3s ease-in-out 0s infinite alternate;\n}\n\n.configure-border-2 {\n width: 50px;\n height: 50px;\n padding: 3px;\n left: -50px;\n display: flex;\n justify-content: center;\n align-items: center;\n background: rgb(63,249,220);\n transform: rotate(45deg);\n animation: configure-xclockwise 3s ease-in-out 0s infinite alternate;\n}\n\n.configure-core {\n width: 100%;\n height: 100%;\n background-color: #1d2630;\n}\n\n@keyframes configure-clockwise {\n 0% {\n transform: rotate(0);\n }\n\n 25% {\n transform: rotate(90deg);\n }\n\n 50% {\n transform: rotate(180deg);\n }\n\n 75% {\n transform: rotate(270deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes configure-xclockwise {\n 0% {\n transform: rotate(45deg);\n }\n\n 25% {\n transform: rotate(-45deg);\n }\n\n 50% {\n transform: rotate(-135deg);\n }\n\n 75% {\n transform: rotate(-225deg);\n }\n\n 100% {\n transform: rotate(-315deg);\n }\n}"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"9118ee","snapshot":null,"tags":null,"title":"loader by Codecite","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":58,"cssLen":680,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".ld-ripple {\n position: relative;\n width: 80px;\n height: 80px;\n}\n\n.ld-ripple div {\n position: absolute;\n border: 4px solid #fff;\n opacity: 1;\n border-radius: 50%;\n animation: ld-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;\n}\n\n.ld-ripple div:nth-child(2) {\n animation-delay: -0.5s;\n}\n\n@keyframes ld-ripple {\n 0% {\n top: 36px;\n left: 36px;\n width: 0;\n height: 0;\n opacity: 0;\n }\n\n 4.9% {\n top: 36px;\n left: 36px;\n width: 0;\n height: 0;\n opacity: 0;\n }\n\n 5% {\n top: 36px;\n left: 36px;\n width: 0;\n height: 0;\n opacity: 1;\n }\n\n 100% {\n top: 0px;\n left: 0px;\n width: 72px;\n height: 72px;\n opacity: 0;\n }\n}"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"3ea240","snapshot":null,"tags":null,"title":"loader by JesusRafaelNavaCruz","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":290,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 4rem;\n height: 4rem;\n border-radius: 50%;\n box-sizing: border-box;\n border-top: 8px solid #fff;\n border-left: 8px solid #fff;\n border-right: 8px solid #ff00;\n animation: loader .7s infinite linear;\n}\n\n@keyframes loader {\n to {\n transform: rotate(360deg);\n }\n}"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"5ab7bc","snapshot":null,"tags":null,"title":"loader by shadowfax29","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":165,"cssLen":962,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".container {\n position: relative;\n width: 200px;\n height: 200px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n}\n\n.loader {\n width: 10px;\n height: 30px;\n left: var(--left);\n border-radius: 10px 50px;\n box-shadow: 0px 0px 5px black;\n animation: dominos 1s ease infinite;\n}\n\n.loader:nth-child(1) {\n --left: 80px;\n animation-delay: 0.325s;\n background-color: red;\n}\n\n.loader:nth-child(3) {\n left: 60px;\n animation-delay: 0.625s;\n background-color: blue;\n}\n\n.loader:nth-child(5) {\n animation-delay: 0.865s;\n left: 40px;\n background-color: green;\n}\n\n.loader:nth-child(2) {\n --left: 70px;\n animation-delay: 0.5s;\n background-color: yellow;\n}\n\n.loader:nth-child(4) {\n animation-delay: 0.74s;\n left: 50px;\n background-color: orange;\n}\n\n@keyframes dominos {\n 50% {\n opacity: 0.7;\n }\n\n 75% {\n -webkit-transform: rotate(90deg);\n transform: rotate(90deg);\n }\n\n 80% {\n opacity: 1;\n }\n}\n\n\n\n\n"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"7efdde","snapshot":null,"tags":null,"title":"loader by Praashoo7","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":272,"cssLen":1716,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n L\n o\n a\n d\n i\n n\n g\n .\n .\n

","css":".l {\n color: black;\n opacity: 0;\n animation: pass 2s ease-in-out infinite;\n animation-delay: 0.2s;\n letter-spacing: 0.5em;\n text-shadow: 2px 2px 3px #919191;\n}\n\n.o {\n color: black;\n opacity: 0;\n animation: pass 2s ease-in-out infinite;\n animation-delay: 0.4s;\n letter-spacing: 0.5em;\n text-shadow: 2px 2px 3px #919191;\n}\n\n.a {\n color: black;\n opacity: 0;\n animation: pass 2s ease-in-out infinite;\n animation-delay: 0.6s;\n letter-spacing: 0.5em;\n text-shadow: 2px 2px 3px #919191;\n}\n\n.d {\n color: black;\n opacity: 0;\n animation: pass 2s ease-in-out infinite;\n animation-delay: 0.8s;\n letter-spacing: 0.5em;\n text-shadow: 2px 2px 3px #919191;\n}\n\n.i {\n color: black;\n opacity: 0;\n animation: pass 2s ease-in-out infinite;\n animation-delay: 1s;\n letter-spacing: 0.5em;\n text-shadow: 2px 2px 3px #919191;\n}\n\n.n {\n color: black;\n opacity: 0;\n animation: pass 2s ease-in-out infinite;\n animation-delay: 1.2s;\n letter-spacing: 0.5em;\n text-shadow: 2px 2px 3px #919191;\n}\n\n.g {\n color: black;\n opacity: 0;\n animation: pass 2s ease-in-out infinite;\n animation-delay: 1.4s;\n letter-spacing: 0.5em;\n text-shadow: 2px 2px 3px #919191;\n}\n\n.d1 {\n color: black;\n opacity: 0;\n animation: pass1 2s ease-in-out infinite;\n animation-delay: 1.6s;\n letter-spacing: 0.5em;\n text-shadow: 2px 2px 3px #919191;\n}\n\n.d2 {\n color: black;\n opacity: 0;\n animation: pass1 2s ease-in-out infinite;\n animation-delay: 2s;\n letter-spacing: 0.5em;\n text-shadow: 2px 2px 3px #919191;\n}\n\n@keyframes pass {\n 0% {\n opacity: 1;\n }\n\n 50% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes pass1 {\n 0% {\n opacity: 1;\n }\n\n 50% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"cb1838","snapshot":null,"tags":null,"title":"loader by fanishah","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":174,"cssLen":1675,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".container {\n position: absolute;\n width: 100px;\n height: 100px;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n}\n\n.item {\n width: 50px;\n height: 50px;\n position: absolute;\n}\n\n.item-1 {\n background-color: rgb(250, 87, 103);\n top: 0;\n left: 0;\n z-index: 1;\n animation: item-1_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;\n}\n\n.item-2 {\n background-color: rgb(121, 68, 228);\n top: 0;\n right: 0;\n animation: item-2_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;\n}\n\n.item-3 {\n background-color: rgb(27, 145, 247);\n bottom: 0;\n right: 0;\n z-index: 1;\n animation: item-3_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;\n}\n\n.item-4 {\n background-color: rgb(250, 194, 76);\n bottom: 0;\n left: 0;\n animation: item-4_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;\n}\n\n@keyframes item-1_move {\n 0%, 100% {\n transform: translate(0, 0)\n }\n\n 25% {\n transform: translate(0, 50px)\n }\n\n 50% {\n transform: translate(50px, 50px)\n }\n\n 75% {\n transform: translate(50px, 0)\n }\n}\n\n@keyframes item-2_move {\n 0%, 100% {\n transform: translate(0, 0)\n }\n\n 25% {\n transform: translate(-50px, 0)\n }\n\n 50% {\n transform: translate(-50px, 50px)\n }\n\n 75% {\n transform: translate(0, 50px)\n }\n}\n\n@keyframes item-3_move {\n 0%, 100% {\n transform: translate(0, 0)\n }\n\n 25% {\n transform: translate(0, -50px)\n }\n\n 50% {\n transform: translate(-50px, -50px)\n }\n\n 75% {\n transform: translate(-50px, 0)\n }\n}\n\n@keyframes item-4_move {\n 0%, 100% {\n transform: translate(0, 0)\n }\n\n 25% {\n transform: translate(50px, 0)\n }\n\n 50% {\n transform: translate(50px, -50px)\n }\n\n 75% {\n transform: translate(0, -50px)\n }\n}"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"bf8d05","snapshot":null,"tags":null,"title":"loader by Ratinax","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":146,"cssLen":1505,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".loader {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: not-allowed;\n scale: 0.7;\n}\n\n.central {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 10em;\n height: 10em;\n border-radius: 50%;\n box-shadow: 0.5em 1em 1em cyan,\n -0.5em 0.5em 1em lime,\n 0.5em -0.5em 1em white,\n -0.5em -0.5em 1em yellow;\n}\n\n.external-shadow {\n width: 10em;\n height: 10em;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n box-shadow: 0.5em 0.5em 3em cyan,\n -0.5em 0.5em 3em lime,\n 0.5em -0.5em 3em white,\n -0.5em -0.5em 3em yellow;\n z-index: 999;\n animation: rotate 3s linear infinite;\n background-color: #212121;\n}\n\n.intern {\n position: absolute;\n color: white;\n z-index: 9999;\n}\n\n.intern::before {\n content: \"100%\";\n animation: percent 2s ease-in-out infinite;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(180deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes percent {\n 0% {\n content: '0%';\n }\n\n 25% {\n content: '25%';\n }\n\n 33% {\n content: '33%';\n }\n\n 42% {\n content: '42%';\n }\n\n 51% {\n content: '51%';\n }\n\n 67% {\n content: '67%';\n }\n\n 74% {\n content: '74%';\n }\n\n 75% {\n content: '75%';\n }\n\n 86% {\n content: '86%';\n }\n\n 95% {\n content: '95%';\n }\n\n 98% {\n content: '98%';\n }\n\n 99% {\n content: '99%';\n }\n}"},{"created":"2024-01-22T16:54:11.000Z","isPrivate":0,"projectId":"73bebb","snapshot":null,"tags":null,"title":"loader by Mike11jr","updated":"2024-01-22T16:54:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":147,"cssLen":617,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".spinner {\n width: 60px;\n height: 60px;\n position: relative;\n}\n\n.spinner .dot {\n position: absolute;\n inset: 0;\n display: flex;\n justify-content: center;\n}\n\n.spinner .dot::after {\n content: \"\";\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background-color: rgb(12, 180, 231);\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n.spinner .dot {\n animation: spin 2s infinite;\n}\n\n.spinner .dot:nth-child(2) {\n animation-delay: 100ms;\n}\n\n.spinner .dot:nth-child(3) {\n animation-delay: 200ms;\n}\n\n.spinner .dot:nth-child(4) {\n animation-delay: 300ms;\n}\n\n.spinner .dot:nth-child(5) {\n animation-delay: 400ms;\n}"}]}},"actionData":null,"errors":null}