29 lines
520 B
TypeScript
29 lines
520 B
TypeScript
import styled, { keyframes } from "styled-components";
|
|
|
|
const blink = keyframes`
|
|
0%, 100% { opacity: 0.3; }
|
|
50% { opacity: 1; }
|
|
`;
|
|
|
|
interface DotProps {
|
|
$delay: number;
|
|
}
|
|
|
|
const Dot = styled.span<DotProps>`
|
|
animation: ${blink} 1s infinite;
|
|
animation-delay: ${({ $delay }) => $delay}s;
|
|
margin: 0;
|
|
`;
|
|
|
|
const Wrapper = styled.div`
|
|
display: flex;
|
|
gap: 4px;
|
|
`;
|
|
|
|
export const AnimDot = () => (
|
|
<Wrapper>
|
|
<Dot $delay={0}>.</Dot>
|
|
<Dot $delay={0.2}>.</Dot>
|
|
<Dot $delay={0.4}>.</Dot>
|
|
</Wrapper>
|
|
);
|