OlympicLoader OlympicLoader.tsx

100% Statements 2/2

100% Branches 0/0

100% Functions 1/1

100% Lines 2/2

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42  
 
 
 
2x
 
 
 
 
 
 
 
 
11x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { keyframes } from '@emotion/react';
import Box from '@mui/material/Box';
 
// Animation de rotation full 360°
const slide = keyframes`
  0%   { transform: translateX(0);   opacity: 0.6; }
  25%  { opacity: 1; }
  50%  { transform: translateX(20px); opacity: 0.6; }
  75%  { opacity: 1; }
  100% { transform: translateX(0);   opacity: 0.6; }
`;
 
function OlympicLoader() {
  return (
    <Box
      sx={{
        display: 'inline-block',
        animation: `${slide} 1.5s ease-in-out infinite`,
        // Centrage si besoin dans un container
        width: 160,
        height: 84,
      }}
    >
      <svg
        viewBox="0 0 230 120"
        width="100%"
        height="100%"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle cx="50"  cy="50" r="30" stroke="#0072CE" strokeWidth="8" fill="none" />
        <circle cx="110" cy="50" r="30" stroke="#000000" strokeWidth="8" fill="none" />
        <circle cx="170" cy="50" r="30" stroke="#DF0024" strokeWidth="8" fill="none" />
 
        <circle cx="80"  cy="85" r="30" stroke="#F4C300" strokeWidth="8" fill="none" />
        <circle cx="140" cy="85" r="30" stroke="#00A651" strokeWidth="8" fill="none" />
      </svg>
    </Box>
  );
}
 
export default OlympicLoader;