CSS linear indicator

Jmnote (토론 | 기여)님의 2021년 10월 19일 (화) 03:29 판 (새 문서: ==개요== ;CSS linear progress <syntaxhighlight lang='html' run> <style> .linear-progress { width: 500px; height: 4px; position: absolute; overflow-x: hidden; background:...)
(차이) ← 이전 판 | 최신판 (차이) | 다음 판 → (차이)

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 }}