반응형
progress {
-webkit-appearance: none;
height: 4px;
text-align: left;
position:relative;
}
progress::-webkit-progress-bar {
height: 4px;
margin:0 auto;
background: lightblue;
border-radius: 5em;
}
progress::-webkit-progress-value {
background-color: #19E0A7;
display:inline-block;
float:left;
height: 5px;
border-radius: 5em;
margin:0px -10px 0 0;
}
progress:after {
margin:-26px 0 0 -7px;
padding: 4px;
border-radius: 5px;
display:inline-block;
float:left;
content: attr(value) '%';
color: #fff;
background-color: #9E9E9E;
}
<progress class="w-100 rounded-fill" value="38" min="0" max="100"></progress>
말풍선의 아랫부분은 아직 만들지 않았다.
만들긴 할까..?
동료직원이 이미 구현해놨기에 시간이 없어 그걸로 적용.
완성하면 좋은데, 아쉽다.
728x90
'취업 > CodeIgniter' 카테고리의 다른 글
[CI4] 스텝바 코드 CSS (0) | 2022.10.25 |
---|---|
[CI4] 브라우저 모바일/PC 페이지 속도 최적화. (0) | 2022.10.23 |
[ci4] progressbar custom stepbar 스텝바 커스텀 (0) | 2022.10.11 |
[ci4] 프로그레스바 커스텀. (0) | 2022.10.11 |
[CI4] TEXT 자동 전환. 텍스트 롤링, text rolling (0) | 2022.09.30 |