1 개요[ | ]
- CSS linear indicator
- CSS linear progress
html
Copy
<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>