CSS 프로그레스 바(progress bar)

CSS와 JSTL을 이용한 진행 바(progress bar)를 그리는 방법입니다.

<ul class="progress_bar_wrap">
	<c:set var="percent" value="40" />
	<li style="width : ${percent}"></li>
	<li <c:if test="${percent eq 100}">style="border: 0"</c:if>></li>
</ul>

c:set의 value 값에 계산할 값을 입력합니다.

example) <c:set var="percent" value="a/b * 100" />

.progress_bar_wrap {
	list-style: none;
	display: table;
	width: 300px;
	height: 25px;
	background-color: #bcbaba;
	border-radius: 3px;
	margin-bottom: 5px;
	padding: 0;
}
.progress_bar_wrap > li {
	display: table-cell;
	background-color: #d1402d;
	border: 1px solid #b4301f;
	border-radius: 3px;
}
.progress_bar_wrap > li+li{
	background-color: #bcbaba;
	border: 1px solid #a3a3a3;
	border-left: 0;
	border-radius: 0 3px 3px 0;
}