Progress Line
画面上部を走るインジケーター。ページ遷移に。
HTML
<div class="progress-bar"></div>
CSS
.progress-bar {
width: 100%;
height: 2px;
background: #eee;
position: relative;
border-radius: 1px;
overflow: hidden;
}
.progress-bar::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 40%;
background: #1a1a1a;
border-radius: 1px;
animation: progress-slide 1.5s ease-in-out infinite;
}
@keyframes progress-slide {
0% { left: -40%; }
100% { left: 100%; }
}