728x90
next14 + tailwind 사용중
가로 프로그레스 바
const [_step, setStep] = useState(0);
// 단계가 지날때마다 애니메이션 되도록
const isRunAnimation = useMemo(() => {
if (step !== _step) {
setStep(step);
return true;
} else {
return false;
}
}, [step]);
<div className="relative h-1 rounded-full bg-gray-300">
<div
className="h-full rounded-lg bg-orange-700 transition-all duration-300"
style={{ width: `${step * 23}%` }} />
</div>
컴포넌트르로 만들어서 사용하기 위해서 useState부분을 props로 받아서 사용 중!
세로 프로그레스바
<div className="relative h-12 w-1.5 rounded-[50px] bg-gray-200">
<div
className={cx(
"absolute bottom-0 w-full rounded-[50px] transition-all duration-300",
maxTotalCount && maxTotalCount === info.totalCount ? "bg-orange-900 " : "bg-gray-400")}
style={{ height: `${maxHeight(info.totalCount)}%`}}
/>
</div>
728x90
'Frontend > CSS' 카테고리의 다른 글
[CSS] 정사각형 이미지 만들기 (0) | 2023.12.29 |
---|---|
CSS Reset vs Normalize CSS: 웹 스타일링 초기화 방법 비교 (0) | 2023.08.30 |
CSS - slide animation (0) | 2022.03.26 |