[javascript] 프로그레스 바 색상 나눠서 채우기

프로그레스 바

제목 쓰기가 난감했다. 프로그레스바,, 색깔 나누기,,? 분할,,?

여튼 내가 만들고 싶었던 것은 저런 프로그레스 바

css로 만들려면 만들수야 있겠지만 만약 수치가 바뀔 때마다 조절하는 건 귀찮은 것 같아서 data를 이용했다.

 

//html

<div class="progress-bar">
    <div class="red bar" data-per="40">
        <span>red <i></i>%</span>
    </div>
    <div class="pink bar" data-per="30">
        <span>pink <i></i>%</span>
    </div>
    <div class="blue bar" data-per="30">
        <span>blue <i></i>%</span>
    </div>
</div>

//css

.progress-bar { width: 300px; height: 20px; border: 1px solid #ccc; font-size: 0; border-radius: 20px; padding: 2px;}
.progress-bar div { height: 100%; display: inline-block; position: relative; }
.progress-bar div:first-child{border-radius: 20px 0 0 20px;}
.progress-bar div:last-child{border-radius: 0 20px 20px 0;}
.red { background-color: red; }
.bar span {font-size: 12px; position: absolute; top: 23px;}
.pink { background-color: pink; }
.blue { background-color: blue; }

//js

function fillProgressBar() {
    const progressBar = document.querySelector(".progress-bar");
    const fillEl = progressBar.querySelectorAll(".bar");

    fillEl.forEach((fill) => {
        const percent = fill.getAttribute('data-per');
        fill.style.width = percent + "%"   

        const txtPer = fill.querySelector("span i"); 
        txtPer.innerText = percent;
        console.log(percent);
    })
}
fillProgressBar();