pulsingIndicator.tsx 735 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. import {css, keyframes} from '@emotion/react';
  2. import {Theme} from 'sentry/utils/theme';
  3. const pulse = keyframes`
  4. 0% {
  5. transform: scale(0.1);
  6. opacity: 1
  7. }
  8. 40%, 100% {
  9. transform: scale(0.8);
  10. opacity: 0;
  11. }
  12. `;
  13. const pulsingIndicatorStyles = (p: {theme: Theme}) => css`
  14. height: 8px;
  15. width: 8px;
  16. border-radius: 50%;
  17. background: ${p.theme.pink300};
  18. position: relative;
  19. &:before {
  20. content: '';
  21. display: block;
  22. position: absolute;
  23. height: 100px;
  24. width: 100px;
  25. border-radius: 50%;
  26. top: -46px;
  27. left: -46px;
  28. border: 4px solid ${p.theme.pink200};
  29. transform-origin: center;
  30. animation: ${pulse} 3s ease-out infinite;
  31. }
  32. `;
  33. export default pulsingIndicatorStyles;