@jigoooo/shared-ui/dist/css/loader.css

A reusable React component library and design system with TypeScript support, built on Vite for seamless integration and optimized performance.

/* HTML: <div class="loader"></div> */
.loader {
    width: 60px;
    height: 28px;
    --_g: no-repeat radial-gradient(farthest-side, #8bc82f 94%, #0000);
    background:
            var(--_g) 50%  0,
            var(--_g) 100% 0;
    background-size: 14px 14px;
    position: relative;
    animation: l23-0 1.5s linear infinite;
}
.loader:before {
    content: "";
    position: absolute;
    height: 14px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #8bc82f;
    left: 0;
    top: 0;
    animation:
            l23-1 1.5s linear infinite,
            l23-2 0.5s cubic-bezier(0,200,.8,200) infinite;
}
@keyframes l23-0 {
    0%,31%  {background-position: 50% 0   ,100% 0}
    33%     {background-position: 50% 100%,100% 0}
    43%,64% {background-position: 50% 0   ,100% 0}
    66%     {background-position: 50% 0   ,100% 100%}
    79%     {background-position: 50% 0   ,100% 0}
    100%    {transform:translateX(calc(-100%/3))}
}
@keyframes l23-1 {
    100% {left:calc(100% + 10px)}
}
@keyframes l23-2 {
    100% {top:-0.1px}
}



.message-loader {
    --loader-color: #000;
    height: 1rem;
    aspect-ratio: 2.5;
    --_g: no-repeat radial-gradient(farthest-side, var(--loader-color) 90%, transparent);
    background: var(--_g), var(--_g), var(--_g), var(--_g);
    background-size: 20% 50%;
    animation: l43 1s infinite linear;
}

@keyframes l43 {
    0%     {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
    16.67% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
    33.33% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 0   ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
    50%    {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 50% }
    66.67% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 100%,calc(3*100%/3) 0   }
    83.33% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 100%}
    100%   {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
}