Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1365 | Rev 1771 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5 stevensc 1
import React from 'react'
1360 stevensc 2
import { Box, styled } from '@mui/material'
5 stevensc 3
 
1360 stevensc 4
const EllipsisContainer = styled(Box)`
1770 stevensc 5
  margin: 0 auto 0;
6
  width: 80px;
7
  text-align: center;
8
  height: 80px;
9
  border-radius: 100px;
10
  background-color: #fff;
11
  line-height: 80px;
12
  border: 1px solid #e1e1e1;
13
  cursor: pointer;
14
 
15
  .bounce {
16
    width: 15px;
17
    height: 15px;
18
    background-color: #b9b9b9;
19
    border-radius: 100%;
5 stevensc 20
    display: inline-block;
1770 stevensc 21
    -webkit-animation: bounce_delay 1.4s infinite ease-in-out both;
22
    animation: bounce_delay 1.4s infinite ease-in-out both;
5 stevensc 23
  }
1770 stevensc 24
 
25
  .bounce:nth-child(1) {
26
    -webkit-animation-delay: -0.32s;
27
    animation-delay: -0.32s;
5 stevensc 28
  }
1770 stevensc 29
 
30
  .bounce:nth-child(2) {
31
    -webkit-animation-delay: -0.16s;
32
    animation-delay: -0.16s;
5 stevensc 33
  }
1770 stevensc 34
 
35
  .bounce:nth-child(3) {
36
    -webkit-animation-delay: 0;
37
    animation-delay: 0;
5 stevensc 38
  }
1770 stevensc 39
 
40
  @keyframes bounce_delay {
41
    0%,
42
    80%,
43
    100% {
44
      -webkit-transform: scale(0);
5 stevensc 45
      transform: scale(0);
46
    }
1770 stevensc 47
 
48
    40% {
49
      -webkit-transform: scale(1);
5 stevensc 50
      transform: scale(1);
51
    }
52
  }
53
`
54
 
1360 stevensc 55
const Spinner = ({ ...rest }) => {
5 stevensc 56
  return (
1365 stevensc 57
    <EllipsisContainer {...rest}>
1770 stevensc 58
      <div className='bounce'></div>
59
      <div className='bounce'></div>
60
      <div className='bounce'></div>
61
      <div className='bounce'></div>
1365 stevensc 62
    </EllipsisContainer>
5 stevensc 63
  )
64
}
65
 
66
export default Spinner