Hugging Face's logo

Spaces:
Durga-7780
/
Voicechat
Paused

App Files Community
Voicechat
File size: 2,224 Bytes
b81c8cc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import React from "react";
import styled from "styled-components";

const Loader = () => {
  return (
    <StyledWrapper>
      <div className="loader">
        <div className="circle"><div className="dot" /><div className="outline" /></div>
        <div className="circle"><div className="dot" /><div className="outline" /></div>
        <div className="circle"><div className="dot" /><div className="outline" /></div>
        <div className="circle"><div className="dot" /><div className="outline" /></div>
      </div>
    </StyledWrapper>
  );
};

const StyledWrapper = styled.div`
  .loader {
    display: flex;
    justify-content: center;
    align-items: center;
    --animation: 2s ease-in-out infinite;
  }

  .circle {
    position: relative;
    width: 20px;
    height: 20px;
    margin: 0 10px;
    border-radius: 50%;
    border: 2px solid transparent;
    animation: circle var(--animation);
  }

  .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    animation: dot var(--animation);
  }

  .outline {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    animation: outline var(--animation);
  }

  .circle:nth-child(1) { --c: #4285f4; border-color: var(--c); }
  .circle:nth-child(1) .dot { background: var(--c); }

  .circle:nth-child(2) { --c: #ea4335; border-color: var(--c); animation-delay: .3s; }
  .circle:nth-child(2) .dot { background: var(--c); animation-delay: .3s; }

  .circle:nth-child(3) { --c: #fbbc05; border-color: var(--c); animation-delay: .6s; }
  .circle:nth-child(3) .dot { background: var(--c); animation-delay: .6s; }

  .circle:nth-child(4) { --c: #34a853; border-color: var(--c); animation-delay: .9s; }
  .circle:nth-child(4) .dot { background: var(--c); animation-delay: .9s; }

  @keyframes circle {
    0%,100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
  }

  @keyframes dot {
    0%,100% { transform: scale(1); }
    50% { transform: scale(0); }
  }

  @keyframes outline {
    0% { transform: scale(0); outline: 20px solid var(--c); opacity: 1; }
    100% { transform: scale(1); outline: 0 solid transparent; opacity: 0; }
  }
`;

export default Loader;