Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1365 | Rev 1771 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1365 Rev 1770
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React from 'react'
2 
import { Box, styled } from '@mui/material'
 2 
import { Box, styled } from '@mui/material'
Línea 3... Línea 3...
3 
 
 3 
 
- 
 
 4 
const EllipsisContainer = styled(Box)`
4 
const EllipsisContainer = styled(Box)`
 5 
  margin: 0 auto 0;
- 
 
 6 
  width: 80px;
5 
  width: 100%;
 7 
  text-align: center;
6 
  height: 100%;
 8 
  height: 80px;
- 
 
 9 
  border-radius: 100px;
7 
  display: grid;
 10 
  background-color: #fff;
- 
 
 11 
  line-height: 80px;
8 
  place-items: center;
 12 
  border: 1px solid #e1e1e1;
- 
 
 13 
  cursor: pointer;
9 
  position: absolute;
 14 
 
- 
 
 15 
  .bounce {
10 
  top: 0;
 16 
    width: 15px;
- 
 
 17 
    height: 15px;
11 
  left: 0;
 18 
    background-color: #b9b9b9;
12 
  .lds-ellipsis {
 19 
    border-radius: 100%;
13 
    display: inline-block;
 - 
 
14 
    position: relative;
 - 
 
15 
    width: 80px;
 - 
 
16 
    height: 80px;
 - 
 
17 
  }
 - 
 
18 
  .lds-ellipsis div {
 - 
 
19 
    position: absolute;
 - 
 
20 
    top: 33px;
 - 
 
21 
    width: 13px;
 - 
 
22 
    height: 13px;
 - 
 
23 
    border-radius: 50%;
 - 
 
24 
    background: #dfdfdf;
 20 
    display: inline-block;
25 
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
 - 
 
26 
  }
 - 
 
27 
  .lds-ellipsis div:nth-child(1) {
 - 
 
28 
    left: 8px;
 21 
    -webkit-animation: bounce_delay 1.4s infinite ease-in-out both;
29 
    animation: lds-ellipsis1 0.6s infinite;
 22 
    animation: bounce_delay 1.4s infinite ease-in-out both;
30 
  }
 - 
 
31 
  .lds-ellipsis div:nth-child(2) {
 - 
 
32 
    left: 8px;
 - 
 
33 
    animation: lds-ellipsis2 0.6s infinite;
 23 
  }
34 
  }
 24 
 
35 
  .lds-ellipsis div:nth-child(3) {
 25 
  .bounce:nth-child(1) {
36 
    left: 32px;
 26 
    -webkit-animation-delay: -0.32s;
37 
    animation: lds-ellipsis2 0.6s infinite;
 27 
    animation-delay: -0.32s;
- 
 
 28 
  }
38 
  }
 29 
 
39 
  .lds-ellipsis div:nth-child(4) {
 30 
  .bounce:nth-child(2) {
40 
    left: 56px;
 31 
    -webkit-animation-delay: -0.16s;
41 
    animation: lds-ellipsis3 0.6s infinite;
 32 
    animation-delay: -0.16s;
- 
 
 33 
  }
42 
  }
 34 
 
43 
  @keyframes lds-ellipsis1 {
 - 
 
44 
    0% {
 35 
  .bounce:nth-child(3) {
45 
      transform: scale(0);
 - 
 
46 
    }
 - 
 
47 
    100% {
 36 
    -webkit-animation-delay: 0;
48 
      transform: scale(1);
 - 
 
49 
    }
 37 
    animation-delay: 0;
- 
 
 38 
  }
50 
  }
 39 
 
51 
  @keyframes lds-ellipsis3 {
 40 
  @keyframes bounce_delay {
52 
    0% {
 - 
 
53 
      transform: scale(1);
 41 
    0%,
54 
    }
 42 
    80%,
- 
 
 43 
    100% {
55 
    100% {
 44 
      -webkit-transform: scale(0);
56 
      transform: scale(0);
 45 
      transform: scale(0);
57 
    }
 46 
    }
58 
  }
 - 
 
59 
  @keyframes lds-ellipsis2 {
 47 
 
60 
    0% {
 48 
    40% {
61 
      transform: translate(0, 0);
 - 
 
62 
    }
 - 
 
63 
    100% {
 49 
      -webkit-transform: scale(1);
64 
      transform: translate(24px, 0);
 50 
      transform: scale(1);
65 
    }
 51 
    }
66 
  }
 52 
  }
Línea 67... Línea 53...
67 
`
 53 
`
68 
 
 54 
 
69 
const Spinner = ({ ...rest }) => {
 55 
const Spinner = ({ ...rest }) => {
70 
  return (
 56 
  return (
71 
    <EllipsisContainer {...rest}>
 - 
 
72 
      <div className='lds-ellipsis'>
 57 
    <EllipsisContainer {...rest}>
73 
        <div></div>
 58 
      <div className='bounce'></div>
74 
        <div></div>
 59 
      <div className='bounce'></div>
75 
        <div></div>
 - 
 
76 
        <div></div>
 60 
      <div className='bounce'></div>
77 
      </div>
 61 
      <div className='bounce'></div>
78 
    </EllipsisContainer>
 62 
    </EllipsisContainer>
Línea 79... Línea 63...
79 
  )
 63 
  )