Proyectos de Subversion LeadersLinked - Backend

Rev

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

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