INITIALIZING PROTOCOLS…
A text-based loading animation with a cyberpunk-style glitch effect (noise effect). This is ideal if you want to create a sense of urgency or a futuristic atmosphere as if the system is starting up.
Initial loading screen of Science fiction/cyberpunk style website.
Scene switching and transitions for games and portfolio sites.
Make full use of CSS’s clip-path and transform to achieve high-speed glitch animation without using complicated JavaScript.
Chromatic Aberration: By slightly shifting the cyan (#00fff9) and magenta (#ff00c1) shadows, we recreate the visual effect of an old CRT monitor or a damaged display.
Scanline: A gradation of thin horizontal lines is layered over the entire background to give it the feel of an analog monitor.
Random movement imitation: Create keyframes that randomly change the clip-path and transform to simulate the randomness of a real bug.
Change text: Change both the data-text attribute in the HTML and the text inside the tag (e.g. data-text="LOADING...").
Change color scheme: You can create different tastes of glitches by changing the cyan and magenta color codes (#00fff9, #ff00c1) to match the theme color of your project.
Speed adjustment: You can adjust the intensity of the glitch by changing the number of seconds (e.g. 2s, 3s) set in animation in CSS.
<div class="glitch-loader-container flex flex-col items-center justify-center min-h-[400px] w-full bg-[#050510] rounded-xl overflow-hidden relative border border-slate-800">
<!-- Scanline Overlay -->
<div class="scanlines"></div>
<div class="glitch-wrapper mb-8 relative z-20">
<div class="glitch-text text-4xl sm:text-6xl" data-text="SYSTEM_BOOT">SYSTEM_BOOT</div>
</div>
<div class="progress-bar-container w-48 sm:w-64 h-2 bg-slate-900 border border-slate-700 relative z-20 overflow-hidden">
<div class="progress-bar-fill h-full bg-[#00fff9] relative"></div>
</div>
<div class="mt-4 text-[#ff00c1] text-xs font-mono tracking-widest z-20 blink-text">
INITIALIZING PROTOCOLS...
</div>
</div>
<style>
.scanlines {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to bottom,
rgba(255,255,255,0),
rgba(255,255,255,0) 50%,
rgba(0,0,0,0.2) 50%,
rgba(0,0,0,0.2)
);
background-size: 100% 4px;
z-index: 10;
pointer-events: none;
}
.glitch-text {
font-family: 'Courier New', Courier, monospace;
font-weight: 800;
color: #fff;
position: relative;
letter-spacing: 0.1em;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
animation: glitch-skew 2s infinite linear alternate-reverse;
}
.glitch-text::before,
.glitch-text::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #050510;
z-index: -1;
}
.glitch-text::before {
left: 2px;
text-shadow: -2px 0 #ff00c1;
animation: glitch-anim-1 2s infinite linear alternate-reverse;
}
.glitch-text::after {
left: -2px;
text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
animation: glitch-anim-2 3s infinite linear alternate-reverse;
}
@keyframes glitch-skew {
0% { transform: skew(0deg); }
2% { transform: skew(-10deg); }
4% { transform: skew(10deg); }
6% { transform: skew(0deg); }
90% { transform: skew(0deg); }
92% { transform: skew(5deg); }
94% { transform: skew(-5deg); }
96% { transform: skew(0deg); }
}
@keyframes glitch-anim-1 {
0% { clip-path: inset(20% 0 80% 0); transform: translate(-2px, 1px); }
10% { clip-path: inset(50% 0 10% 0); transform: translate(2px, -1px); }
20% { clip-path: inset(80% 0 5% 0); transform: translate(-2px, 2px); }
30% { clip-path: inset(10% 0 60% 0); transform: translate(2px, -2px); }
40% { clip-path: inset(30% 0 20% 0); transform: translate(-2px, 1px); }
50% { clip-path: inset(90% 0 5% 0); transform: translate(2px, -1px); }
60% { clip-path: inset(40% 0 40% 0); transform: translate(-2px, 2px); }
70% { clip-path: inset(70% 0 20% 0); transform: translate(2px, -2px); }
80% { clip-path: inset(5% 0 80% 0); transform: translate(-2px, 1px); }
90% { clip-path: inset(60% 0 10% 0); transform: translate(2px, -1px); }
100% { clip-path: inset(20% 0 50% 0); transform: translate(-2px, 2px); }
}
@keyframes glitch-anim-2 {
0% { clip-path: inset(10% 0 60% 0); transform: translate(2px, -1px); }
10% { clip-path: inset(80% 0 5% 0); transform: translate(-2px, 2px); }
20% { clip-path: inset(30% 0 40% 0); transform: translate(2px, -2px); }
30% { clip-path: inset(5% 0 90% 0); transform: translate(-2px, 1px); }
40% { clip-path: inset(60% 0 10% 0); transform: translate(2px, -1px); }
50% { clip-path: inset(20% 0 30% 0); transform: translate(-2px, 2px); }
60% { clip-path: inset(90% 0 5% 0); transform: translate(2px, -2px); }
70% { clip-path: inset(40% 0 50% 0); transform: translate(-2px, 1px); }
80% { clip-path: inset(70% 0 20% 0); transform: translate(2px, -1px); }
90% { clip-path: inset(15% 0 65% 0); transform: translate(-2px, 2px); }
100% { clip-path: inset(50% 0 10% 0); transform: translate(2px, -2px); }
}
.progress-bar-fill {
box-shadow: 0 0 10px #00fff9, 0 0 20px #00fff9;
animation: progress-anim 4s infinite, progress-glitch 2s infinite;
}
@keyframes progress-anim {
0% { width: 0%; }
30% { width: 45%; }
50% { width: 45%; }
70% { width: 85%; }
90% { width: 100%; }
100% { width: 100%; }
}
@keyframes progress-glitch {
0%, 100% { transform: translateX(0); opacity: 1; }
10% { transform: translateX(-2px); opacity: 0.8; }
15% { transform: translateX(2px); opacity: 1; }
20% { transform: translateX(0); opacity: 0.9; }
}
.blink-text {
animation: blink 1s step-end infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
</style>Works with modern browsers (Chrome, Firefox, Safari, Edge).
Since the clip-path: inset(...) property is used, clipping at the rectangle may not be performed accurately in some older browsers, but the animation will not break.