"CSS linear indicator"의 두 판 사이의 차이

 
(같은 사용자의 중간 판 2개는 보이지 않습니다)
1번째 줄: 1번째 줄:
==개요==
==개요==
;CSS linear indicator
;CSS linear progress
;CSS linear progress


<syntaxhighlight lang='html' run>
<syntaxhighlight lang='html' run>
<style>
<style>
.linear-progress {
.linear-indicator {
   width: 500px;
   width: 500px;
   height: 4px;
   height: 4px;
26번째 줄: 27번째 줄:
</style>
</style>


<div class="linear-progress">
<div class="linear-indicator">
   <div class="ani"></div>
   <div class="ani"></div>
   <div class="ani delay"></div>
   <div class="ani delay"></div>
34번째 줄: 35번째 줄:


==같이 보기==
==같이 보기==
* [[CSS circular indicator]]
* [[CSS striped progress]]
* [[CSS striped progress]]


[[분류: CSS]]
[[분류: CSS]]

2021년 10월 19일 (화) 03:58 기준 최신판

1 개요[ | ]

CSS linear indicator
CSS linear progress
<style>
.linear-indicator {
  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: .5s;
}
@keyframes increase {
  from { left: -9%; width: 5%; }
  to { left: 130%; width: 100%; }
}
</style>

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

2 같이 보기[ | ]

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