35 lines
695 B
JavaScript
35 lines
695 B
JavaScript
import { Box } from "@chakra-ui/react";
|
|
import { keyframes } from "@emotion/react";
|
|
|
|
const pulse = keyframes`
|
|
0% {
|
|
transform: scale(0.7);
|
|
opacity: 0.4;
|
|
box-shadow: 0 0 0 0 rgba(147, 51, 234, 0.4);
|
|
}
|
|
50% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
box-shadow: 0 0 0 8px rgba(147, 51, 234, 0);
|
|
}
|
|
100% {
|
|
transform: scale(0.7);
|
|
opacity: 0.4;
|
|
box-shadow: 0 0 0 0 rgba(147, 51, 234, 0);
|
|
}
|
|
`;
|
|
|
|
const ChatTypingLoader = ({ size = "10px", color = "purple.400" }) => {
|
|
return (
|
|
<Box
|
|
w={size}
|
|
h={size}
|
|
borderRadius="full"
|
|
bg={color}
|
|
animation={`${pulse} 1.1s ease-in-out infinite`}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default ChatTypingLoader;
|