# A Simple Progress Bar

## Code

```javascript
export function ProgressBar({ current, target }: { current?: number; target?: number }) {
  const progress = Math.floor((current / target) * 100);
  const progressStyle = {
    width: (progress > 100 ? 100 : progress < 0 ? 0 : progress) + "%",
  };
  return (
    <div className="relative h-2">
      <div className="h-full bg-[#f4f4f4] w-full rounded-full" />
      <div
        className="absolute top-0 h-full text-center overflow-hidden bg-[repeating-linear-gradient(-45deg,#EC91AA,#EC91AA_15px,#DD738F_15px,#DD738F_30px)] rounded-full"
        style={progressStyle}
      />
    </div>
  );
}
```

## Reference

![](https://img.content.cc/a/2022/03/30/11-33-04-859-cbc7de9362cf96f6860de229265d07ff-e26a7d.png)