Glitch Scan Loader
スキャンラインが上下に走るグリッチ風ローダー。clip-pathで実現。
HTML
<div class="gsl-wrap"> <div class="gsl-text">LOADING</div> <div class="gsl-text gsl-glitch">LOADING</div> </div>
CSS
.gsl-wrap {
position: relative;
font-size: 20px;
font-weight: 900;
letter-spacing: 6px;
font-family: inherit;
}
.gsl-text {
color: #6366f1;
}
.gsl-glitch {
position: absolute;
top: 0; left: 0;
color: #f43f5e;
clip-path: inset(0 0 80% 0);
animation: gsl-scan 1.5s steps(8) infinite;
}
@keyframes gsl-scan {
0% { clip-path: inset(0 0 90% 0); transform: translateX(-2px); }
14% { clip-path: inset(10% 0 70% 0); transform: translateX(2px); }
28% { clip-path: inset(30% 0 50% 0); transform: translateX(-1px); }
42% { clip-path: inset(50% 0 30% 0); transform: translateX(3px); }
57% { clip-path: inset(60% 0 20% 0); transform: translateX(-2px); }
71% { clip-path: inset(70% 0 10% 0); transform: translateX(1px); }
85% { clip-path: inset(85% 0 0 0); transform: translateX(-3px); }
100% { clip-path: inset(95% 0 0 0); transform: translateX(0); }
}