Wave Line Loader
SVG風の波ラインが流れるローダー。
HTML
<div class="wave-line"> <div class="wl-inner"></div> </div>
CSS
.wave-line {
width: 120px;
height: 3px;
background: #eee;
border-radius: 2px;
overflow: hidden;
}
.wl-inner {
width: 40%;
height: 100%;
background: #1a1a1a;
border-radius: 2px;
animation: wl-slide 1.2s ease-in-out infinite;
}
@keyframes wl-slide {
0% { transform: translateX(-100%); }
50% { transform: translateX(200%); }
100% { transform: translateX(-100%); }
}