fix circle iteration delay

src/components/animation.module.css

@@ -7,3 +7,10 @@
 .noAnimation {
   animation: none;
 }
+
+.noPseudoAnimation {
+  &::before {
+    animation: none !important;
+    display: none;
+  }
+}

src/components/animation.tsx

@@ -6,6 +6,7 @@ export interface Props extends BaseProps {
   onAnimationIteration?: () => void
   className?: string
   style?: React.CSSProperties
+  hasPseudo?: boolean
 }
 
 const Animation = (props: Props) => {
@@ -29,6 +30,10 @@ const Animation = (props: Props) => {
     '--direction': `${props.reverse ? 'reverse' : 'normal'}`,
   } as React.CSSProperties
 
+  const noAnimationClassName = props.hasPseudo ? css.noPseudoAnimation : css.noAnimation
+  const animationClassName = animate && !props.disabled ? css.baseAnimation : noAnimationClassName
+  const className = `${animationClassName} ${!props.disabled && props.className}`
+
   const handleIteration = () => {
     setAnimate(false)
     if (!props.iterations || (props.iterations && iteration + 1 < props.iterations)) {
@@ -45,7 +50,7 @@ const Animation = (props: Props) => {
       onAnimationStart={props.onAnimationStart}
       onAnimationEnd={props.onAnimationEnd}
       onAnimationIteration={handleIteration}
-      className={`${animate && !props.disabled ? css.baseAnimation : css.noAnimation} ${!props.disabled && props.className}`}
+      className={className}
       style={style}
     >
       {props.children}

src/components/circle/circle.module.css

@@ -1,3 +1,8 @@
+.outer {
+  position: relative;
+  border-radius: inherit;
+}
+
 .animation {
   --start-percent: 40%;
   --end-percent: 60%;
@@ -37,11 +42,6 @@
   }
 }
 
-.outer {
-  position: relative;
-  border-radius: inherit;
-}
-
 @keyframes rotate {
   0% {
     transform: translate(-50%, -50%) scale(1.4) rotate(0turn);

src/components/circle/circle.tsx

@@ -21,7 +21,7 @@ const Circle = (props: Props) => {
 
   return (
     <div className={css.outer}>
-      <Animation {...props} children={undefined} className={css.animation} style={style}></Animation>
+      <Animation {...props} children={undefined} className={css.animation} style={style} hasPseudo></Animation>
       {props.children}
     </div>
   )