Images & Icons
import { Avatar, Box, Flex, keyframes } from '@chakra-ui/react';
export default function AvatarWithRipple() {
const size = '96px';
const color = 'teal';
const pulseRing = keyframes`
0% {
transform: scale(0.33);
}
40%,
50% {
opacity: 0;
}
100% {
opacity: 0;
}
`;
return (
<Flex
justifyContent="center"
alignItems="center"
h="216px"
w="full"
overflow="hidden">
{/* Ideally, only the box should be used. The <Flex /> is used to style the preview. */}
<Box
as="div"
position="relative"
w={size}
h={size}
_before={{
content: "''",
position: 'relative',
display: 'block',
width: '300%',
height: '300%',
boxSizing: 'border-box',
marginLeft: '-100%',
marginTop: '-100%',
borderRadius: '50%',
bgColor: color,
animation: `2.25s ${pulseRing} cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite`,
}}>
<Avatar
src="https://i.pravatar.cc/300"
size="full"
position="absolute"
top={0}
/>
</Box>
</Flex>
);
}
import { Box, Flex, keyframes, Tooltip } from '@chakra-ui/react';
import React from 'react';
export default function StatusIndicator() {
const activeColor = 'green.500';
const inactiveColor = 'gray.400';
const ringScaleMin = 0.33;
const ringScaleMax = 0.66;
const pulseRing = keyframes`
0% {
transform: scale(${ringScaleMin});
}
30% {
transform: scale(${ringScaleMax});
},
40%,
50% {
opacity: 0;
}
100% {
opacity: 0;
}
`;
const pulseDot = keyframes`
0% {
transform: scale(0.9);
}
25% {
transform: scale(1.1);
}
50% {
transform: scale(0.9);
}
100% {
transform: scale(0.9);
}
`;
return (
<Flex
justifyContent="center"
alignItems="center"
h="216px"
w="full"
flexDir="column"
overflow="hidden">
{/* Ideally, only the box should be used. The <Flex /> is used to style the preview. */}
<Tooltip label={`Status: Active`} textTransform="capitalize">
<Box
as="div"
h="24px"
w="24px"
mb="1.99em"
position="relative"
bgColor={activeColor}
borderRadius="50%"
_before={{
content: "''",
position: 'relative',
display: 'block',
width: '300%',
height: '300%',
boxSizing: 'border-box',
marginLeft: '-100%',
marginTop: '-100%',
borderRadius: '50%',
bgColor: activeColor,
animation: `2.25s ${pulseRing} cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite`,
}}
_after={{
animation: `2.25s ${pulseDot} cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite`,
}}
/>
</Tooltip>
<Tooltip label={`Status: Inactive`} textTransform="capitalize">
<Box
as="div"
h="24px"
w="24px"
position="relative"
bgColor={inactiveColor}
borderRadius="50%"
/>
</Tooltip>
</Flex>
);
}
Support us
Made on the Internet by Achim Rolle and Contributors