a bit animation

src/pages/main.tsx

@@ -18,6 +18,10 @@ import {
     StartI,
     StartInput,
     StartLabel,
+    HalfLine,
+    HideGroup,
+    Circle,
+    LineSvg,
 } from './style';
 import { socket } from "../socket";
 
@@ -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)} />}
+            <Start />
-            {showStart && <Start />}
+            {/* {!showStart && <Input onStart={() => setShowStart(true)} />}
+            {showStart && <Start />} */}
         </MainWrapper>
     );
 };

src/pages/style.ts

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { keyframes } from '@emotion/react';
+import { css, keyframes } from '@emotion/react';
 
 export const MainWrapper = styled.main`
     display: flex;
@@ -49,7 +49,7 @@ export const IconButton = styled.button`
 
 const reveal = keyframes`
     0% {
-        transform: scale(0.1, 0.1)
+        transform: scale(0.1, 0.1);
     }
 
     100% {
@@ -147,7 +147,6 @@ export const StartI = styled.i`
     color: white;
     margin: -35% 0 0 -35%;
     border-radius: 50%;
-    /* background: linear-gradient(#cbc7bc, #d2cbc3); */
     background: linear-gradient(#22a037, #98e221);
     box-shadow:
         0 -2px 5px rgba(255,255,255,0.05),
@@ -158,3 +157,86 @@ export const StartI = styled.i`
     justify-content: center;
     font-style: normal;
 `;
+
+// const LineRotation = keyframes
+//`
+//     0% {
+//         transform: translate(-50%, -100%) rotate(0);
+//     }
+
+//     100% {
+//         transform: translate(-50%, -100%) rotate(1turn);
+//     }
+// `;
+
+
+// type LineProps = {
+//     radius: number;
+//     width: number;
+
+// }
+
+// export const HalfLine = styled.div<LineProps>(({
+//     radius,
+//     width,
+// }) =>css`
+//     transform-origin: 50% 100%;
+//     animation: ${LineRotation} 3s linear infinite;
+//     width: ${radius * 2}px;
+//     height: ${radius}px;
+//     border-top-left-radius: ${radius}px;
+//     border-top-right-radius: ${radius}px;
+//     border: ${width}px solid gray;
+//     border-bottom: 0;
+//     position: absolute;
+//     top: 50%;
+//     left: 50%;
+//     transform: translate(-50%, -100%);
+// `);
+
+const LineRotation = keyframes`
+    0% {
+        transform: translate(-50%, -50%) rotate(0);
+    }
+
+    100% {
+        transform: translate(-50%, -50%) rotate(1turn);
+    }
+`;
+
+const LineHideAnimation = keyframes`
+    0% {
+        /* transform: scale(1); */
+        opacity: 1;
+    }
+    
+    100% {
+        /* transform: scale(0); */
+        opacity: 0;
+    }
+`;
+
+export const LineSvg = styled.svg<{ animationSpeed: number; delay: number; reverse: boolean }>`
+    animation: ${LineRotation} ${({ animationSpeed }) => animationSpeed}s linear infinite${({ reverse }) => reverse ? ' reverse' : ''};
+    animation-delay: -${({ delay }) => delay}s;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform-origin: 50% 50%;
+    transform: translate(-50%, -100%);
+`;
+
+export const HideGroup = styled.g<{ hide: boolean; delay: number; }>`
+    animation: ${({ hide }) => hide ? css`${LineHideAnimation} 3s ease-in forwards`: ''};
+    transform-origin: 50% 50%;
+    animation-delay: ${({ delay }) => delay / 10}s;
+`;
+export const Circle = styled.circle<{ circumference: number; percent: number }>`
+    transition: 0.35s stroke-dashoffset;
+    transform: rotate(-90deg);
+    transform-origin: 50% 50%;
+    stroke-dasharray: ${({ circumference }) => `${circumference} ${circumference}`};
+    stroke-dashoffset: ${({ circumference, percent }) => circumference - percent / 100 * circumference};
+`;
+
+