[bootstrap] 부트스트랩 스타일 프로그래스바 progressBar

 

 

이거 쉽게 찾을 수 있을거라 생각하고 구글링했는데 한참 찾았음.

1.5초 이후에 프로그래스 바 게이지가 올라가는 애니메이션도 추가함.

 

<style>
/* 프로그래스바 */
.progress-wrap {
  width: calc(100% - 4.8rem);
  margin: 0 auto;
}

.progress {
  background: #eee;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  border-radius: 2rem;
  box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
  display: block;
  height: 2.5rem;
  margin-bottom: 1rem;
  padding: .5rem;
  position: relative;
  overflow: hidden;
}
.progress > span {
  display: block;
  height: 100%;
  border-top-right-radius: 2rem;
  border-bottom-right-radius: 2rem;
  border-top-left-radius: 2rem;
  border-bottom-left-radius: 2rem;
  box-shadow: inset 0 2px 9px rgba(255,255,255,0.3) inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
  transition: width 2s ease-out;
}
.paprica > span {
  background-color: #ff4500;
}

.progress-bar-animated {
  background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent);
  background-size: 35px 35px;
  -webkit-animation: progress-bar-stripes 1s linear infinite;
  animation: progress-bar-stripes 1s linear infinite
}

.progress-bar-striped {
  background-color: #ff4500;
}

@keyframes progress-bar-stripes {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 35px 35px
    }
}

@-webkit-keyframes progress-bar-stripes {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 35px 35px
    }
}


.progress-label {
  position: relative;
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0 0 .1rem 0;
}

.progress-label span {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0 0 .1rem 0;
  color: #FC630E;
}

</style>


<!-- 라벨 -->
<p class="progress-label">
	<span>현재 80명 참여</span> (80/100)
</p>
<!-- progressBar -->
<div class="progress paprica">
	<span class="progress-bar-striped progress-bar-animated" data-progress="80" style="width:0;"></span>
</div>


<script>
var bars = document.querySelectorAll('.progress > span');
setInterval(function(){
      bars.forEach(function(bar){
            var getWidth = parseFloat(bar.dataset.progress);
        for(var i = 0; i < getWidth; i++) {
              bar.style.width = i + '%';
		}
	});
}, 1500); // 1.5초 이후에 그래프가 올라감
</script>