How should I make progress linear bar using SVG?

I succeeded in making the circular progress bar, with the following code.

Below is my index code.

 <SVGRoot variant={variant}>
      {variant === "circular" ? (
        <CircleRoot color={color} size={size} />
      ) : (
        <LinearRoot color={color} />
      )}
 </SVGRoot>

Following is SVGRoot styled code.

export const SVGRoot = styled(`svg`, { label: "SVGRoot" })<IProgressBar>(
  ({ theme, variant = "circular" }) => {
    const rotateEffect = keyframes`
      to {
        stroke-dashoffset: 0;
      }
    `;

    const linearEffect = keyframes`
      to {
        stroke-dashoffset: 10;
      }
    `;

    return {
      transform:
        variant === "circular"
          ? "rotate(-90deg) translate(150px,-60px)"
          : "rotate(180deg) translate(0px,0px)",
      strokeDasharray: 150,
      strokeDashoffset: 150,
      animation: `${
        variant === "circular" ? rotateEffect : linearEffect
      } 5s linear forwards infinite`
    };
  }
);

Below is my styled code for circular code, and I succeeded in making the circular progress bar as I want.

export const CircleRoot = styled(`circle`, {
  label: "CircleRoot"
})<IProgressBar>(({ theme, color = "primary", size = "medium" }) => {
  return {
    cx: estimateSize(true, size),
    cy: estimateSize(true, size),
    r: estimateSize(false, size),
    stroke: theme.palette[color].main,
    strokeWidth: 3,
    fill: theme.palette.white.main
  };
});

However, the thing is I can't make the linear image as I want with the following code. The linear progress bar keeps splitting irregularly as I didn't expect. How can I solve this problem? I want to make it work like Linear Progress Bar Sample Image.

export const LinearRoot = styled(`rect`, {
  label: "LinearRoot"
})<IProgressBar>(({ theme, color = "primary", size }) => {
  return {
    width: 500,
    height: 10,
    stroke: theme.palette[color].main,
    strokeWidth: 10,
    fill: "transparent"
  };
});