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

","css":".loader {\n width: 215px;\n height: 215px;\n display: block;\n margin: auto;\n position: relative;\n background: #FFF;\n box-sizing: border-box;\n border-radius: 10px;\n}\n\n.loader::after {\n content: '';\n width: calc(100% - 30px);\n height: calc(100% - 30px);\n top: 15px;\n left: 15px;\n position: absolute;\n background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 100%),\n radial-gradient(circle 50px , #DDD 100%, transparent 0),\n linear-gradient(#DDD 16px, transparent 0),\n linear-gradient(#DDD 24px, transparent 0);\n background-repeat: no-repeat;\n background-size: 75px 175px, 100% 100px, 80% 16px, 80% 16px;\n background-position: -185px 0, center 10px, center 125px, center 155px;\n box-sizing: border-box;\n animation: animloader 1s linear infinite;\n}\n\n@keyframes animloader {\n to {\n background-position: 185px 0, center 10px, center 125px, center 155px;\n }\n}\n "},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"39e94e","snapshot":null,"tags":null,"title":"loader by SelfMadeSystem","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3356,"cssLen":1271,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".loader {\n display: block;\n width: 12em;\n height: 12em;\n overflow: visible;\n}\n\n.loader path.fill {\n fill: #2Af2;\n animation: fill 4s ease-in-out infinite;\n}\n\n.loader .dash path {\n stroke: #2AF;\n stroke-width: 1px;\n stroke-linecap: round;\n animation: dashArray var(--sped, 2s) ease-in-out infinite,\n dashOffset var(--sped, 2s) linear infinite;\n}\n\n.loader .dash path.aaa {\n stroke-width: 2px;\n stroke-linecap: butt;\n clip-path: path('M 20.4603 48.5493 L 16.6461 46.9584 C 17.3209 48.3794 18.4917 49.5682 20.0447 50.2206 C 23.4007 51.6328 27.2707 50.0262 28.6694 46.6367 C 29.3464 44.9966 29.3509 43.1867 28.6806 41.5422 C 28.0103 39.8977 26.7434 38.6151 25.119 37.9315 C 23.5035 37.2544 21.7741 37.279 20.2547 37.8576 L 24.1961 39.5022 C 26.6719 40.5434 27.8427 43.4124 26.8104 45.9105 C 25.7803 48.4085 22.936 49.5905 20.4603 48.5493 Z');\n}\n\n.loader .dash path.big {\n stroke-width: 2px;\n filter: drop-shadow(0 0 2px #2AF);\n}\n\n@keyframes dashArray {\n 0% {\n stroke-dasharray: 0 1 359 0;\n }\n\n 50% {\n stroke-dasharray: 0 359 1 0;\n }\n\n 100% {\n stroke-dasharray: 359 1 0 0;\n }\n}\n\n@keyframes dashOffset {\n 0% {\n stroke-dashoffset: -5;\n }\n\n 100% {\n stroke-dashoffset: -365;\n }\n}\n\n@keyframes fill {\n 30%,\n 55% {\n fill: #2AF0;\n }\n}\n\n"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"b5235c","snapshot":null,"tags":null,"title":"loader by Shoh2008","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":829,"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 height: 40px;\n width: 6px;\n color: #FFF;\n animation: paddles 0.75s ease-out infinite;\n}\n\n.loader:before {\n content: \"\";\n position: absolute;\n margin: 0 auto;\n left: 0;\n right: 0;\n top: 15px;\n width: 12px;\n height: 12px;\n background-color: greenyellow;\n border-radius: 50%;\n animation: ballbounce 0.6s ease-out infinite;\n}\n\n@keyframes paddles {\n 0% {\n box-shadow: -25px -10px, 25px 10px\n }\n\n 50% {\n box-shadow: -25px 8px, 25px -10px\n }\n\n 100% {\n box-shadow: -25px -10px, 25px 10px\n }\n}\n\n@keyframes ballbounce {\n 0% {\n transform: translateX(-20px) scale(1, 1.2)\n }\n\n 25% {\n transform: scale(1.2, 1)\n }\n\n 50% {\n transform: translateX(15px) scale(1, 1.2)\n }\n\n 75% {\n transform: scale(1.2, 1)\n }\n\n 100% {\n transform: translateX(-20px)\n }\n}\n "},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"f2cf71","snapshot":null,"tags":null,"title":"loader by doniaskima","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":803,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":"/* HTML:

*/\n.loader {\n width: 100px;\n height: 60px;\n display: flex;\n animation: l12-0 2s infinite linear;\n}\n\n.loader::before,\n.loader::after {\n content: \"\";\n flex: 4;\n background: radial-gradient(at 50% 20%,#0000,#000a) bottom left/20px 20px repeat-x,\n linear-gradient(red 0 0) bottom/100% 20px no-repeat\n #ddd;\n -webkit-mask: repeating-linear-gradient(90deg,#000 0 4px,#0000 0 20px) 8px 0,\n radial-gradient(farthest-side,#000 90%,#0000) left bottom/20px 20px repeat-x;\n}\n\n.loader::after {\n flex: 1;\n transform-origin: top;\n animation: l12-1 1s cubic-bezier(0,20,1,20) infinite;\n}\n\n@keyframes l12-0 {\n \n 0%,49.9% {\n transform: scaleX(1)\n }\n\n 50%,100% {\n transform: scaleX(-1)\n }\n}\n\n@keyframes l12-1 {\n \n 100% {\n transform: rotate(-2deg)\n }\n}"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"34af09","snapshot":null,"tags":null,"title":"loader by alexruix","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":1628,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n --ballcolor: #f2f2f2;\n --shadow: 0px 0 #ffffff00;\n --shadowcolor: #ffffff00;\n width: 10px;\n height: 10px;\n left: -120px;\n border-radius: 50%;\n position: relative;\n color: var(--ballcolor);\n animation: shadowRolling 2s linear infinite;\n}\n\n@keyframes shadowRolling {\n \n 0% {\n box-shadow: var(--shadow),\n var(--shadow),\n var(--shadow),\n var(--shadow);\n }\n\n 12% {\n box-shadow: 100px 0 var(--ballcolor),\n var(--shadow),\n var(--shadow), \n var(--shadow);\n }\n\n 25% {\n box-shadow: 110px 0 var(--ballcolor),\n 100px 0 var(--ballcolor),\n var(--shadow), \n var(--shadow);\n }\n\n 36% {\n box-shadow: 120px 0 var(--ballcolor), \n 110px 0 var(--ballcolor), \n 100px 0 var(--ballcolor), \n var(--shadow);\n }\n\n 50% {\n box-shadow: 130px 0 var(--ballcolor),\n 120px 0 var(--ballcolor),\n 110px 0 var(--ballcolor),\n 100px 0 var(--ballcolor);\n }\n\n 62% {\n box-shadow: 200px 0 var(--shadowcolor),\n 130px 0 var(--ballcolor), \n 120px 0 var(--ballcolor), \n 110px 0 var(--ballcolor);\n }\n\n 75% {\n box-shadow: 200px 0 var(--shadowcolor),\n 200px 0 var(--shadowcolor),\n 130px 0 var(--ballcolor), \n 120px 0 var(--ballcolor);\n }\n\n 87% {\n box-shadow: 200px 0 var(--shadowcolor), \n 200px 0 var(--shadowcolor), \n 200px 0 var(--shadowcolor), \n 130px 0 var(--ballcolor);\n }\n\n 100% {\n box-shadow: 200px 0 var(--shadowcolor), \n 200px 0 var(--shadowcolor),\n 200px 0 var(--shadowcolor),\n 200px 0 var(--shadowcolor);\n }\n}"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"0e3000","snapshot":null,"tags":null,"title":"loader by escannord","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":724,"cssLen":439,"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","css":".loader {\n transform: rotateX(70deg);\n}\n\n.loader .element {\n display: block;\n border-left: 5px solid rgb(120, 47, 255);\n border-right: 5px solid rgb(120, 47, 255);\n border-top: dotted 2px rgb(92, 5, 114);\n width: 10rem;\n height: 1rem;\n margin-top: 0.5rem;\n perspective: 1000px;\n animation: rotate 5s infinite linear;\n animation-delay: calc(var(--i) * 0.2s);\n}\n\n@keyframes rotate {\n 100% {\n transform: rotateY(360deg);\n }\n}\n"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"2c63ec","snapshot":null,"tags":null,"title":"loader by AqFox","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":28,"cssLen":702,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".spinner {\n width: 56px;\n height: 56px;\n display: grid;\n color: #004dff;\n background: radial-gradient(farthest-side, currentColor calc(100% - 7px),#0000 calc(100% - 6px) 0);\n -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 15px),#000 calc(100% - 13px));\n border-radius: 50%;\n animation: spinner-sm4bhi 2s infinite linear;\n}\n\n.spinner::before,\n.spinner::after {\n content: \"\";\n grid-area: 1/1;\n background: linear-gradient(currentColor 0 0) center,\n linear-gradient(currentColor 0 0) center;\n background-size: 100% 11px,11px 100%;\n background-repeat: no-repeat;\n}\n\n.spinner::after {\n transform: rotate(45deg);\n}\n\n@keyframes spinner-sm4bhi {\n 100% {\n transform: rotate(1turn);\n }\n}"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"bad6ee","snapshot":null,"tags":null,"title":"loader by Cornerstone-04","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":114,"cssLen":540,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 100%;\n height: 100%;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: 10px;\n transition: 0.5s linear;\n}\n\n.ball {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n animation: bounce6135 1s alternate infinite;\n transition: 0.5s linear;\n}\n\n.ball {\n background: #fff;\n}\n\n.ball:nth-child(2) {\n animation-delay: 0.25s;\n}\n\n.ball:nth-child(3) {\n animation-delay: 0.5s;\n}\n\n@keyframes bounce6135 {\n from {\n transform: scale(2);\n }\n\n to {\n transform: scale(1);\n }\n}\n\n"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"22b92c","snapshot":null,"tags":null,"title":"loader by kerolos23","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":26,"cssLen":817,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loader {\n width: 53px;\n height: 53px;\n border: 5px dotted #000;\n border-style: solid solid dotted dotted;\n border-radius: 50%;\n display: inline-block;\n position: relative;\n box-sizing: border-box;\n animation: rotation 2s linear infinite;\n}\n\n.loader::after {\n content: '';\n box-sizing: border-box;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n border: 4px dotted #F00;\n border-style: solid solid dotted;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n animation: rotationBack 1s linear infinite;\n transform-origin: center center;\n}\n\n@keyframes rotation {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes rotationBack {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(-360deg);\n }\n} "},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"965a1c","snapshot":null,"tags":null,"title":"loader by Ali-Tahmazi99","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":82,"cssLen":670,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".loading {\n width: 60px;\n height: 60px;\n position: relative;\n}\n\n.d1 , .d2 {\n border: 5px solid #6c757d;\n border-radius: 50px;\n}\n\n.loading .d1 {\n width: 55px;\n height: 55px;\n position: absolute;\n border-left-color: transparent;\n animation: load161 1s linear infinite;\n}\n\n.loading .d2 {\n width: 40px;\n height: 40px;\n border-top-color: transparent;\n border-right-color: transparent;\n margin: 7.5px;\n animation: load2812 1.5s linear infinite;\n}\n\n@keyframes load161 {\n 0% {\n transform: rotate(0);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes load2812 {\n 0% {\n transform: rotate(0);\n }\n\n 100% {\n transform: rotate(-360deg);\n }\n}"},{"created":"2024-01-22T16:54:06.000Z","isPrivate":0,"projectId":"64a2da","snapshot":null,"tags":null,"title":"loader by uxRakhal","updated":"2024-01-22T16:54:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":949,"cssLen":3099,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".pl {\n width: 6em;\n height: 6em;\n}\n\n.pl__ring {\n animation: ringA 2s linear infinite;\n}\n\n.pl__ring--a {\n stroke: #f42f25;\n}\n\n.pl__ring--b {\n animation-name: ringB;\n stroke: #ffdd00;\n}\n\n.pl__ring--c {\n animation-name: ringC;\n stroke: #255ff4;\n}\n\n.pl__ring--d {\n animation-name: ringD;\n stroke: #2cf425;\n}\n\n/* Animations */\n@keyframes ringA {\n from,\n 4% {\n stroke-dasharray: 0 660;\n stroke-width: 20;\n stroke-dashoffset: -330;\n }\n\n 12% {\n stroke-dasharray: 60 600;\n stroke-width: 30;\n stroke-dashoffset: -335;\n }\n\n 32% {\n stroke-dasharray: 60 600;\n stroke-width: 30;\n stroke-dashoffset: -595;\n }\n\n 40%,\n 54% {\n stroke-dasharray: 0 660;\n stroke-width: 20;\n stroke-dashoffset: -660;\n }\n\n 62% {\n stroke-dasharray: 60 600;\n stroke-width: 30;\n stroke-dashoffset: -665;\n }\n\n 82% {\n stroke-dasharray: 60 600;\n stroke-width: 30;\n stroke-dashoffset: -925;\n }\n\n 90%,\n to {\n stroke-dasharray: 0 660;\n stroke-width: 20;\n stroke-dashoffset: -990;\n }\n}\n\n@keyframes ringB {\n from,\n 12% {\n stroke-dasharray: 0 220;\n stroke-width: 20;\n stroke-dashoffset: -110;\n }\n\n 20% {\n stroke-dasharray: 20 200;\n stroke-width: 30;\n stroke-dashoffset: -115;\n }\n\n 40% {\n stroke-dasharray: 20 200;\n stroke-width: 30;\n stroke-dashoffset: -195;\n }\n\n 48%,\n 62% {\n stroke-dasharray: 0 220;\n stroke-width: 20;\n stroke-dashoffset: -220;\n }\n\n 70% {\n stroke-dasharray: 20 200;\n stroke-width: 30;\n stroke-dashoffset: -225;\n }\n\n 90% {\n stroke-dasharray: 20 200;\n stroke-width: 30;\n stroke-dashoffset: -305;\n }\n\n 98%,\n to {\n stroke-dasharray: 0 220;\n stroke-width: 20;\n stroke-dashoffset: -330;\n }\n}\n\n@keyframes ringC {\n from {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: 0;\n }\n\n 8% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -5;\n }\n\n 28% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -175;\n }\n\n 36%,\n 58% {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: -220;\n }\n\n 66% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -225;\n }\n\n 86% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -395;\n }\n\n 94%,\n to {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: -440;\n }\n}\n\n@keyframes ringD {\n from,\n 8% {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: 0;\n }\n\n 16% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -5;\n }\n\n 36% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -175;\n }\n\n 44%,\n 50% {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: -220;\n }\n\n 58% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -225;\n }\n\n 78% {\n stroke-dasharray: 40 400;\n stroke-width: 30;\n stroke-dashoffset: -395;\n }\n\n 86%,\n to {\n stroke-dasharray: 0 440;\n stroke-width: 20;\n stroke-dashoffset: -440;\n }\n}\n"},{"created":"2024-01-22T16:52:41.000Z","isPrivate":0,"projectId":"c1852f","snapshot":null,"tags":null,"title":"loader by StealthWorm","updated":"2024-01-22T16:52:41.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":939,"cssLen":3161,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n ","css":".loader {\n display: flex;\n position: relative;\n justify-items: center;\n align-items: center;\n gap: 1rem;\n height: 55px;\n width: 200px;\n overflow: hidden;\n}\n\n.container {\n width: 100%;\n display: flex;\n flex-direction: column;\n height: 200px;\n position: relative;\n align-items: center;\n}\n\n.carousel {\n display: flex;\n gap: 1rem;\n flex-direction: column;\n position: absolute;\n width: 100%;\n transform-origin: center;\n animation-delay: 2s;\n}\n\n.loader .container:nth-child(3) {\n justify-content: flex-start;\n justify-items: flex-start;\n animation: scroll-up 4s infinite ease-in-out;\n animation-delay: 3s;\n}\n\n.loader .container:nth-child(2) {\n justify-content: flex-end;\n justify-items: flex-end;\n animation: scroll-down 4s infinite ease-in-out;\n animation-delay: 3s;\n}\n\n.loader .container:nth-child(1) {\n justify-content: flex-end;\n justify-items: flex-end;\n animation: scroll-down 3s infinite ease-in-out;\n animation-delay: 3s;\n}\n\n.love {\n background: red;\n display: flex;\n width: 30px;\n height: 30px;\n position: relative;\n align-items: center;\n justify-content: center;\n left: 8px;\n margin: 0.8rem 4px;\n transform: rotate(45deg);\n animation-delay: 2s;\n}\n\n.love::before, .love::after {\n content: '';\n position: absolute;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background: red;\n}\n\n.love::before {\n left: -16px;\n}\n\n.love::after {\n top: -16px;\n}\n\n.death {\n display: flex;\n width: 100%;\n height: 55px;\n position: relative;\n align-items: center;\n justify-content: center;\n animation: rotation 3s infinite ease-in-out;\n animation-delay: 1s;\n}\n\n.death:after {\n content: '';\n height: 63px;\n position: absolute;\n border-left: 12px solid red;\n transform: rotate(45deg);\n border-radius: 8px;\n top: -4px;\n}\n\n.death:before {\n content: '';\n height: 60px;\n position: absolute;\n border-left: 12px solid red;\n transform: rotate(-45deg);\n}\n\n.loader:hover {\n animation: none;\n}\n\n.robots {\n display: flex;\n width: 100%;\n height: 55px;\n justify-content: space-between;\n background-color: #ff0000;\n border-radius: 0 8px 8px;\n padding: 8px;\n animation-delay: 5s;\n}\n\n.robots::after {\n content: '';\n width: 12px;\n height: 12px;\n top: 0;\n left: 0;\n background-color: #ffffff;\n border-radius: 50%;\n animation-delay: 2s;\n animation: blink 0.5s 2 forwards;\n}\n\n.robots::before {\n content: '';\n width: 12px;\n height: 12px;\n top: 0;\n left: 0;\n background-color: #ffffff;\n border-radius: 50%;\n animation-delay: 2s;\n animation: blink 0.5s 2 forwards;\n}\n\n@keyframes scroll-up {\n 0% {\n transform: translateY(0);\n filter: blur(0);\n }\n\n 30% {\n transform: translateY(-150%);\n filter: blur(10px);\n }\n\n 60% {\n transform: translateY(0);\n filter: blur(0px);\n }\n}\n\n@keyframes scroll-down {\n 0% {\n transform: translateY(0);\n filter: blur(0);\n }\n\n 30% {\n transform: translateY(150%);\n filter: blur(10px);\n }\n\n 60% {\n transform: translateY(0);\n filter: blur(0px);\n }\n}\n\n@keyframes rotation {\n 20%, 100% {\n transform: rotate(180deg);\n }\n}\n\n@keyframes blink {\n 0% {\n height: 0;\n }\n\n 20% {\n height: 12px;\n }\n\n 100% {\n height: 12px;\n }\n}"}]}},"actionData":null,"errors":null}