Typing Terminal
Home
Snippets
Typing Terminal
HTML
CSS
JS
<div class="terminal"> <span id="text"></span> <span class="cursor"></span> </div>
body{ margin:0; height:100vh; background:#020617; display:flex; justify-content:center; align-items:center; font-family:monospace; } .terminal{ width:350px; padding:20px; background:#0f172a; border-radius:10px; color:#22c55e; box-shadow:0 0 20px rgba(0,0,0,0.6); } .cursor{ display:inline-block; width:10px; background:#22c55e; margin-left:5px; animation:blink 1s infinite; } @keyframes blink{ 50%{opacity:0;} }
const code = [ "Initializing system...", "Loading modules...", "Connecting to server...", "Access granted ", "Welcome to Learning Axis" ]; let line = 0; let char = 0; const textEl = document.getElementById("text"); function type(){ if(line < code.length){ if(char < code[line].length){ textEl.innerHTML += code[line][char]; char++; setTimeout(type,40); }else{ textEl.innerHTML += "<br>"; line++; char = 0; setTimeout(type,400); } } } type();
Ad #1
Ad #2
Scroll to Top