Pure CSS Animated Circular Progress Bar

index.tsx

<Progress>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 34 34">
    <ProgressSurface cx="16" cy="16" r="15.9155" />
    <ProgressBar
      cx="16"
      cy="16"
      r="15.9155"
      strokeDashoffset={percentProgress}
    />
  </svg>
  <ProgressText>{`${percentProgress}%`}</ProgressText>
</Progress>

styles.ts

export const Progress = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    height: 200px;
    width: 200px;
    transform: rotate(-90deg);
    overflow: visible;
  }
`;

export const ProgressSurface = styled.circle`
  fill: none;
  stroke: ${({ theme }) => theme.colors.canvas};
  stroke-width: 4;
`;

export const ProgressBar = styled.circle`
  fill: none;
  stroke: ${({ theme }) => theme.colors.primary};
  stroke-width: 4;
  stroke-dasharray: 100 100;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease-in-out;
`;

export const ProgressText = styled.div`
  position: absolute;
`;

Preview: