CSS linear indicator

Jmnote (토론 | 기여)님의 2021년 10월 19일 (화) 03:30 판 (→‎개요)

1 개요

CSS linear progress
<style>
.linear-progress {
  width: 500px;
  height: 4px;
  position: absolute;
  overflow-x: hidden;
  background: #48f4;
}
.ani {
  position: absolute;
  background: #48f;
  height: 4px;
  animation: increase 2s infinite;
}
.delay {
  animation-delay: 0.5s;
}
@keyframes increase {
  from { left: -9%; width: 5%; }
  to { left: 130%; width: 100%; }
}
</style>

<div class="linear-progress">
  <div class="ani"></div>
  <div class="ani delay"></div>
</div>

2 같이 보기

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}