얕은 진행바(Small Progress Bars)

Blog Skin + Bootstrap + Add-On :: Small Progress Bars

진행 상황을 간단한 방법으로 표시할수 있는 레이아웃의 바.

---

얕은 진행바 Small Progress Bars

 

개요

기본 진행바는 두께가 두꺼워서 쓰기가 힘들고 덧댄 설명 부분이 없어서 만들어 보았습니다.

.progress-small 기본 진행바 묻음 박스입니다.

.progress-bar-small 진행바 박스 배경,.progress-bar-s-info 기본 진행바 색상입니다.

 

 

기본 진행바

60% Complete

<DIV class=progress-small>
<DIV role=progressbar aria-valuenow=10 aria-valuemin=0 class="progress-bar-small progress-bar-s-info" style="WIDTH: 60%" aria-valuemax=100>
       <SPAN class=sr-only>60% Complete</SPAN> 
</DIV><!-- Complete -->
</DIV>

 

다른 색상 진행바

.progress-bar-s-info,.progress-bar-s-success,.progress-bar-s-warning,
.progress-bar-s-danger,.progress-bar-s-grey 5개의 색상을 만들었습니다.

 

60% Complete

60% Complete

60% Complete

60% Complete

60% Complete

<DIV class=progress-small>
<DIV role=progressbar aria-valuenow=10 aria-valuemin=0 class="progress-bar-small progress-bar-s-info" style="WIDTH: 60%" aria-valuemax=100>
       <SPAN class=sr-only>60% Complete</SPAN>
</DIV><!-- Complete -->
</DIV>

<DIV class=progress-small>
<DIV role=progressbar aria-valuenow=10 aria-valuemin=0 class="progress-bar-small progress-bar-s-success" style="WIDTH: 60%" aria-valuemax=100>
       <SPAN class=sr-only>60% Complete</SPAN>
</DIV><!-- Complete -->
</DIV>

<DIV class=progress-small>
<DIV role=progressbar aria-valuenow=10 aria-valuemin=0 class="progress-bar-small progress-bar-s-warning" style="WIDTH: 60%" aria-valuemax=100>
       <SPAN class=sr-only>60% Complete</SPAN>
</DIV><!-- Complete -->
</DIV>

<DIV class=progress-small>
<DIV role=progressbar aria-valuenow=10 aria-valuemin=0 class="progress-bar-small progress-bar-s-danger" style="WIDTH: 60%" aria-valuemax=100>
       <SPAN class=sr-only>60% Complete</SPAN>
</DIV><!-- Complete -->
</DIV>

<DIV class=progress-small>
<DIV role=progressbar aria-valuenow=10 aria-valuemin=0 class="progress-bar-small progress-bar-s-grey" style="WIDTH: 60%" aria-valuemax=100>
       <SPAN class=sr-only>60% Complete</SPAN>
</DIV><!-- Complete -->
</DIV>

 

응용

.progress-box 상단 박스 기본, .progress-box-default 배경색상을 정의 합니다.

.progress-heading 기존의 것 사용.

 

메모가 들어갈 부분 60%

60% Complete

<DIV class="progress-box progress-box-default">
     <!-- Default panel contents -->
     <DIV class=progress-heading>메모가 들어갈 부분 60%</DIV>
      <DIV class=progress-small>
            <DIV role=progressbar aria-valuenow=10 aria-valuemin=0 class="progress-bar-small progress-bar-s-info" style="WIDTH: 60%" aria-valuemax=100>
                   <SPAN class=sr-only>60% Complete</SPAN>
             </DIV><!-- Complete -->
       </DIV><!-- /progress-small -->
</DIV>

 

CSS

.progress-box {
	margin-bottom:5px;
	background-color:#fff;
	border:1px solid transparent;
	border-radius:4px 4px 0 0;
	-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);
	box-shadow:0 1px 1px rgba(0,0,0,.05);
}
.progress-box-default {
	border-color:#ddd;
}
.progress-heading {
	padding:7px 15px 5px;
	border-bottom:1px solid transparent; 
	background-color:#f5f5f5;
	border-top-right-radius:3px;
	border-top-left-radius:3px;
}
.progress-small {
	overflow:hidden;
	height:7px
	;margin-bottom:0px;
	background-color:#f5f5f5;
	border-radius:0px;
	-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
	box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
}
.progress-bar-small {
	float:left;
	width:0;height:100%;
	font-size:6px;line-height:7px;
	color:#fff;
	text-align:center;
	background-color:#428bca;
	-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);
	box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);
	-webkit-transition:width .6s ease;
	transition:width .6s ease;
}
.progress-bar-s-danger {background-color:#d9534f;}
.progress-bar-s-info {background-color:#5bc0de;}
.progress-bar-s-warning {background-color:#f0ad4e;}
.progress-bar-s-success {background-color:#5cb85c;}
.progress-bar-s-grey{background-color:#6a737a}