개발자.. 너란놈..

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;
    }
}

HTML

CSS
/* 프로그래스 바 CSS */

.Progress_Bar {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block;opacity: 0.7;background-color: #fff;z-index: 99;text-align: center;}
.Progress_Bar_Image {position: absolute;top: 50%;left: 50%;z-index: 100;}

JS

$(window).load(function(){
      $("#Progress_Bar").hide();
});

$("#Progress_Bar").hide(); 중요.
※Progress_Bar를 버튼 혹은 function에서 Show 시켜주고 마지막에 hide 시켜주면 됨 .