CSS linear indicator

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 circular indicator
• CSS striped progress