extension/react-app/src/components/RingLoader.tsx


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

import React from "react";
import styled, { keyframes } from "styled-components";
import { buttonColor, vscBackground, vscForeground } from ".";

const rotate = keyframes`
  0% {
    stroke-dashoffset: 100;
  }
  100% {
    stroke-dashoffset: 12;
  }
`;

const LoaderSvg = styled.svg`
  transform: rotate(-90deg);
  width: 40px;
  height: 40px;
  opacity: 50%;

  circle {
    fill: none;
    stroke: ${vscForeground};
    stroke-width: 2;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    animation: ${rotate} 6s ease-out infinite;
    stroke-linecap: round;
  }
`;

const RingLoader = () => (
  <div className="m-auto w-full text-center mt-2">
    <LoaderSvg viewBox="0 0 32 32">
      <circle cx="16" cy="16" r="14" />
    </LoaderSvg>
  </div>
);

export default RingLoader;