1 files changed, 39 insertions, 0 deletions
diff --git a/extension/react-app/src/components/RingLoader.tsx b/extension/react-app/src/components/RingLoader.tsx
new file mode 100644
index 00000000..5eb8a60f
--- /dev/null
+++ b/extension/react-app/src/components/RingLoader.tsx
@@ -0,0 +1,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">
+    <LoaderSvg viewBox="0 0 32 32">
+      <circle cx="16" cy="16" r="14" />
+    </LoaderSvg>
+  </div>
+);
+
+export default RingLoader;