반응형
div 2개만 이용하고 Percent를 변경하여 사용하고 싶어서 아래와 같이 만들었습니다.
HTML (React)
uploadPercent는 useState로 변경 하는 로직을 사용 하였습니다.
<div className="progress-bg">
<div className="progress-bar" style={{width:`${uploadPercent}%`}}></div>
</div>
CSS (SASS)
/* 프로그레스바 배경 */
.progress-bg {
width: 100%;
height: 10px;
background-color: #aeb5c4; /* 배경색 */
border-radius: 15px;
overflow: hidden;
/* 진행 부분 */
.progress-bar {
height: 100%;
width: 0%; /* 진행 상태: 0% ~ 100% */
background-color: #193263; /* 진행바 색상 */
opacity: 0.9;
border-radius: 15px 0 0 15px;
transition: width 0.3s ease;
}
}
'IT > 퍼블리싱 (html+css)' 카테고리의 다른 글
[HTML] Select Option 스타일링 (0) | 2024.08.29 |
---|---|
[퍼블리싱] Loading Bar 만들기 (0) | 2024.07.12 |
[퍼블리싱] 엑스 버튼 만들기 (0) | 2024.05.16 |
[퍼블리싱] 레이어 팝업 만들기 (0) | 2024.05.16 |
[HTML] 모바일 Input 박스 클릭 시 가상키보드 나오지 않게 하기 (0) | 2022.08.18 |