Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4017 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5148 stevensc 1 
import React from 'react'
2 
import styled from 'styled-components'
1 www 3 
 
4017 stevensc 4 
const SpinnerContainer = styled.div`
5 
  width:100%;
6 
  height:100%;
7 
  display:grid;
8 
  place-items:center;
5148 stevensc 9 
  position: absolute;
10 
`
4017 stevensc 11 
 
1 www 12 
const StyledSpinner = styled.div`
13 
  .lds-ellipsis {
14 
    display: inline-block;
15 
    position: relative;
16 
    width: 80px;
17 
    height: 80px;
18 
  }
19 
  .lds-ellipsis div {
20 
    position: absolute;
21 
    top: 33px;
22 
    width: 13px;
23 
    height: 13px;
24 
    border-radius: 50%;
25 
    background: black;
26 
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
27 
  }
28 
  .lds-ellipsis div:nth-child(1) {
29 
    left: 8px;
30 
    animation: lds-ellipsis1 0.6s infinite;
31 
  }
32 
  .lds-ellipsis div:nth-child(2) {
33 
    left: 8px;
34 
    animation: lds-ellipsis2 0.6s infinite;
35 
  }
36 
  .lds-ellipsis div:nth-child(3) {
37 
    left: 32px;
38 
    animation: lds-ellipsis2 0.6s infinite;
39 
  }
40 
  .lds-ellipsis div:nth-child(4) {
41 
    left: 56px;
42 
    animation: lds-ellipsis3 0.6s infinite;
43 
  }
44 
  @keyframes lds-ellipsis1 {
45 
    0% {
46 
      transform: scale(0);
47 
    }
48 
    100% {
49 
      transform: scale(1);
50 
    }
51 
  }
52 
  @keyframes lds-ellipsis3 {
53 
    0% {
54 
      transform: scale(1);
55 
    }
56 
    100% {
57 
      transform: scale(0);
58 
    }
59 
  }
60 
  @keyframes lds-ellipsis2 {
61 
    0% {
62 
      transform: translate(0, 0);
63 
    }
64 
    100% {
65 
      transform: translate(24px, 0);
66 
    }
67 
  }
5148 stevensc 68 
`
1 www 69 
 
70 
const Spinner = () => {
71 
  return (
4017 stevensc 72 
    <SpinnerContainer>
73 
      <StyledSpinner>
74 
        <div className="lds-ellipsis">
75 
          <div></div>
76 
          <div></div>
77 
          <div></div>
78 
          <div></div>
79 
        </div>
80 
      </StyledSpinner>
81 
    </SpinnerContainer>
5148 stevensc 82 
  )
83 
}
1 www 84 
 
5148 stevensc 85 
export default Spinner