Wonderland
Search…
A Simple Progress Bar
Create a simple bilibili style progress bar with tailwind

Code

1
export function ProgressBar({ current, target }: { current?: number; target?: number }) {
2
const progress = Math.floor((current / target) * 100);
3
const progressStyle = {
4
width: (progress > 100 ? 100 : progress < 0 ? 0 : progress) + "%",
5
};
6
return (
7
<div className="relative h-2">
8
<div className="h-full bg-[#f4f4f4] w-full rounded-full" />
9
<div
10
className="absolute top-0 h-full text-center overflow-hidden bg-[repeating-linear-gradient(-45deg,#EC91AA,#EC91AA_15px,#DD738F_15px,#DD738F_30px)] rounded-full"
11
style={progressStyle}
12
/>
13
</div>
14
);
15
}
Copied!

Reference

Copy link