a bit animation

src/pages/main.tsx

@@ -18,8 +18,12 @@ import {
     StartI,
     StartInput,
     StartLabel,
+    HalfLine,
+    HideGroup,
+    Circle,
+    LineSvg,
 } from './style';
-import {socket} from "../socket";
+import { socket } from "../socket";
 
 const keyboardFeature = getFeatures('hub-video-start')?.keyboard;
 
@@ -65,18 +69,112 @@ const Input = ({ onStart }) => {
     )
 }
 
+export const Line = ({ hide, reverse, speed, delay, radius, progress, width, color }) => (
+    <LineSvg
+        delay={delay}
+        reverse={reverse}
+        animationSpeed={speed}
+        width={(radius * 2) + 20 + width}
+        height={(radius * 2) + 20 + width}
+    >
+        <HideGroup hide={hide} delay={delay}>
+            <Circle
+                percent={progress}
+                circumference={radius * 2 * Math.PI}
+                stroke={color}
+                strokeWidth={width}
+                fill="transparent"
+                r={radius}
+                cx={radius + 10 + width/2}
+                cy={radius + 10 + width/2}
+            />
+        </HideGroup>
+    </LineSvg>
+)
+
+Line.defaultProps = {
+    reverse: false
+}
+
 const Start = () => {
-    const socketRef = useRef({ sent: false })
+    // const socketRef = useRef({ sent: false });
+    const [sended, setSend] = useState(false);
 
     const handleCheck = () => {
-        if (!socketRef.current.sent) {
+        // if (!socketRef.current.sent) {
+        if (!sended) {
             socket.emit('play')
-            socketRef.current.sent = true
+            // socketRef.current.sent = true
+            setSend(true)
         }
     }
 
     return (
         <StartWrapper>
+            <Line
+                hide={sended}
+                speed={24}
+                delay={3}
+                radius={122}
+                progress={2}
+                width={3}
+                reverse
+                color="white"
+            />
+            <Line
+                hide={sended}
+                speed={12}
+                delay={9}
+                radius={122}
+                progress={2}
+                width={3}
+                color="white"
+            />
+            <Line
+                hide={sended}
+                speed={53}
+                radius={220}
+                delay={6}
+                progress={22}
+                width={12}
+                color="#92de22"
+            />
+            <Line
+                hide={sended}
+                speed={53}
+                radius={220}
+                delay={17.8}
+                progress={.5}
+                width={12}
+                color="#92de22"
+            />
+            <Line
+                hide={sended}
+                speed={53}
+                radius={220}
+                delay={18.3}
+                progress={.2}
+                width={12}
+                color="#92de22"
+            />
+            <Line
+                hide={sended}
+                speed={54}
+                radius={220}
+                delay={30}
+                progress={44}
+                width={15}
+                color="#92de22"
+            />
+            <Line
+                hide={sended}
+                speed={12}
+                radius={120}
+                delay={0}
+                progress={13}
+                width={6}
+                color="white"
+            />
             <StartInput
                 id="check"
                 type="checkbox"
@@ -97,8 +195,9 @@ export const MainPage = () => {
     return (
         <MainWrapper>
             <LogoImg src={logo} />
-            {!showStart && <Input onStart={() => setShowStart(true)} />}
-            {showStart && <Start />}
+            <Start />
+            {/* {!showStart && <Input onStart={() => setShowStart(true)} />}
+            {showStart && <Start />} */}
         </MainWrapper>
     );
 };