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

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 같이 보기

CSS striped progress

@@ 1번째 줄: / 1번째 줄: @@
 ==개요==
+;CSS linear indicator
 ;CSS linear progress
 <syntaxhighlight lang='html' run>
 <style>
-.linear-progress {
+.linear-indicator {
    width: 500px;
    height: 4px;
@@ 26번째 줄: / 27번째 줄: @@
 </style>
-<div class="linear-progress">
+<div class="linear-indicator">
    <div class="ani"></div>
    <div class="ani delay"></div>