css keyframes을 이용한 줄어드는 progressbar

css를 이용한 progressbar 

키프레임 애니메이션을 이용하여 길이속성으로 css 효과를 준다. 

 

 

검정바탕이 전체이며 붉은 색이 시간에 따라 애니메이션 효과로 줄어든다.

 

HTML

<div class="progress">
    <div class="bar"></div>
</div>

 

 

CSS

.progress {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 80px;
  background-color: #000;
}

.progress .bar {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background-color: #ff0b7b;
  transform-origin: left;
  animation: scaleX 20s 0s infinite forwards linear;
}

@keyframes scaleX {
  0% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(0);
  }
}

 

 

 

결과

[데모보기]