Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 7787 | Ir a la última revisión | | 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`
5 
  .lds-ellipsis {
6 
    display: inline-block;
7 
    position: relative;
8 
    width: 80px;
9 
    height: 80px;
10 
  }
11 
  .lds-ellipsis div {
12 
    position: absolute;
13 
    top: 33px;
14 
    width: 13px;
15 
    height: 13px;
16 
    border-radius: 50%;
17 
    background: black;
18 
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
19 
  }
20 
  .lds-ellipsis div:nth-child(1) {
21 
    left: 8px;
22 
    animation: lds-ellipsis1 0.6s infinite;
23 
  }
24 
  .lds-ellipsis div:nth-child(2) {
25 
    left: 8px;
26 
    animation: lds-ellipsis2 0.6s infinite;
27 
  }
28 
  .lds-ellipsis div:nth-child(3) {
29 
    left: 32px;
30 
    animation: lds-ellipsis2 0.6s infinite;
31 
  }
32 
  .lds-ellipsis div:nth-child(4) {
33 
    left: 56px;
34 
    animation: lds-ellipsis3 0.6s infinite;
35 
  }
36 
  @keyframes lds-ellipsis1 {
37 
    0% {
38 
      transform: scale(0);
39 
    }
40 
    100% {
41 
      transform: scale(1);
42 
    }
43 
  }
44 
  @keyframes lds-ellipsis3 {
45 
    0% {
46 
      transform: scale(1);
47 
    }
48 
    100% {
49 
      transform: scale(0);
50 
    }
51 
  }
52 
  @keyframes lds-ellipsis2 {
53 
    0% {
54 
      transform: translate(0, 0);
55 
    }
56 
    100% {
57 
      transform: translate(24px, 0);
58 
    }
59 
  }
60 
`;
61 
 
62 
const Spinner = () => {
63 
  return (
64 
    <StyledSpinner>
65 
      <div className="lds-ellipsis">
66 
        <div></div>
67 
        <div></div>
68 
        <div></div>
69 
        <div></div>
70 
      </div>
71 
    </StyledSpinner>
72 
  );
73 
};
74 
 
75 
export default Spinner;