From ec4586ef3c92f7d5125cb06286a2e44c59a24bb3 Mon Sep 17 00:00:00 2001
From: Haishan <haishanhan@gmail.com>
Date: Sun, 28 Feb 2021 17:06:00 +0800
Subject: feat: add FAB action button to update all proxy providers

---
 src/components/shared/RotateIcon.module.css | 16 ++++++++++++++++
 src/components/shared/RotateIcon.tsx        | 16 ++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 src/components/shared/RotateIcon.module.css
 create mode 100644 src/components/shared/RotateIcon.tsx

(limited to 'src/components/shared')

diff --git a/src/components/shared/RotateIcon.module.css b/src/components/shared/RotateIcon.module.css
new file mode 100644
index 0000000..60748de
--- /dev/null
+++ b/src/components/shared/RotateIcon.module.css
@@ -0,0 +1,16 @@
+.rotate {
+  display: inline-flex;
+}
+.isRotating {
+  animation: rotating 3s infinite linear;
+  animation-fill-mode: forwards;
+}
+
+@keyframes rotating {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/shared/RotateIcon.tsx b/src/components/shared/RotateIcon.tsx
new file mode 100644
index 0000000..e2d4ad8
--- /dev/null
+++ b/src/components/shared/RotateIcon.tsx
@@ -0,0 +1,16 @@
+import cx from 'clsx';
+import * as React from 'react';
+import { RotateCw } from 'react-feather';
+
+import s from './RotateIcon.module.css';
+
+export function RotateIcon({ isRotating }: { isRotating: boolean }) {
+  const cls = cx(s.rotate, {
+    [s.isRotating]: isRotating,
+  });
+  return (
+    <span className={cls}>
+      <RotateCw width={16} />
+    </span>
+  );
+}
-- 
cgit v1.3.1