[Bootstrap] Progress Bar

1. Progress Bar

작업의 진행 상태를 표시하기 위해 사용하는 진행바

 

2. Progress Bar 주요 css 클래스

• progress : div 태그를 progress bar로 만들어줌
• progress-bar : progress 내부의 진행 정도를 표시하는 바
• progress-bar-striped : 빗살 무늬로 표시함
• progress-bar-animated (BS4) : 애니메이션 효과를 줌
• active (BS3) : 애니메이션 효과를 줌

	<div class="container">
		<h3>progress, progress-bar 클래스</h3>
		<div class="progress">
			<div class="progress-bar" style="width:70%;">70%</div>
		</div>
		<hr>

		<h3>progress 색상 클래스</h3>
		<div class="progress">
			<div class="progress-bar" style="width:70%;">basic</div>
		</div>
		<hr>
		<div class="progress">
			<div class="progress-bar bg-success" style="width:70%;">success</div>
		</div>
		<hr>
		<div class="progress">
			<div class="progress-bar bg-info" style="width:70%;">info</div>
		</div>
		<hr>
		<div class="progress">
			<div class="progress-bar bg-warning" style="width:70%;">warning</div>
		</div>
		<hr>
		<div class="progress">
			<div class="progress-bar bg-danger" style="width:70%;">danger</div>
		</div>
		<hr>
		<div class="progress">
			<div class="progress-bar bg-white text-dark" style="width:70%;">white</div>
		</div>
		<hr>
		<div class="progress">
			<div class="progress-bar bg-secondary" style="width:70%;">secondary</div>
		</div>
		<hr>
		<div class="progress">
			<div class="progress-bar bg-light text-dark" style="width:70%;">light</div>
		</div>
		<hr>
		<div class="progress">
			<div class="progress-bar bg-dark" style="width:70%;">dark</div>
		</div>
		<hr>

		<h3>progress-bar-striped 클래스</h3>
		<div class="progress">
			<div class="progress-bar bg-success progress-bar-striped" style="width:70%;">striped</div>
		</div>
		<hr>

		<h3>progress-bar-animated 클래스</h3>
		<div class="progress">
			<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width:70%;">striped</div>
		</div>
		<hr>

		<h3>하나의 progress안에 3개의 progress-bar 배치</h3>
		<div class="progress">
			<div class="progress-bar bg-success" style="width:30%;">30%</div>
			<div class="progress-bar bg-warning" style="width:30%;">30%</div>
			<div class="progress-bar bg-danger" style="width:30%;">30%</div>
		</div>
	</div>

 

References

source code : https://github.com/yonghwankim-dev/Bootstrap_study/tree/main/ProgressBar/src/main/webapp
[인프런] 윤재성의 Bootstrap 4 & 3 Framework Tutorial