[ci4] progressbar custom stepbar 스텝바 커스텀

프로그레스바 중에 각 단계별 진행되는 바를 스텝바(step)라고 하는 것을 방금 알았다.

이를 나중에 또 찾기 귀찮으니 기록한다.

 

내가 만든 css중 li:after에 z-index를 뺐더니
보더 색상이 다를 경우 해당 선이 원형(동그라미) 위에 올라오는 문제가 생긴다.

일단 보더 색상을 일치하는 것으로 진행했지만 그게 안되는 경우 어떻게 해봐야 할 듯...

 

 

결과물

https://jsfiddle.net/gvnwqp4d/

Edit fiddle - JSFiddle - Code Playground

 

CSS

/* step bar */
.stepbar {
    counter-reset: step;
}
.stepbar li {
    list-style: none;
    display: inline-block;
    width: 30.33%;
    position: relative;
    text-align: center;
    cursor: pointer;
}
.stepbar li:before {
    content: "";
    width: 11px;
    height: 11px;
    line-height : 30px;
    border-radius: 100%;
    display: block;
    text-align: center;
    margin: 10px auto 5px auto;
    background-color: #19E0A7;
}
.stepbar li:after {
    content: "";
    position: absolute;
    width: 100%;
    border-bottom: 1px dotted #19E0A7;
    top: 15px;
    left: -50%;
    // z-index : -1;
}
.stepbar li:first-child:after {
    content: none;
}
.stepbar li.active div * {
    color: #19E0A7 !important;
}
.stepbar li.active:before {
    border-color: #19E0A7;
} 
.stepbar li.active + li:after {
    border-color: #19E0A7 !important;
}

HTML

<ul class="stepbar">
    <li class="active">
        <div class="d-flex flex-column">
            <div class="font-9">Deposit</div>
            <div class="font-8 fw-bold">2022-09-28</div>
        </div>
    </li>
    <li>
        <div class="d-flex flex-column">
            <div class="font-9">Start</div>
            <div class="font-8 fw-bold">2022-09-28</div>
        </div>
    </li>
    <li>
        <div class="d-flex flex-column">
            <div class="font-9">Expire</div>
            <div class="font-8 fw-bold">2022-09-28</div>
        </div>
    </li>
</ul>

 

그리고

기본 베이스로 사용한 코드

https://codepen.io/jidelambo/pen/RaRygY

step progress bar by css