Terminal Style Loading Screen

index.html

<p>Loading<span>...</span></p>

style.css

body { background-color: black; }

@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }

p { 
  margin: 50px auto;
  width: 600px;
  
  font: bold 90px 'courier new', consolas, monaco,  monospace;
  color: green;
  
  border-right: 6px solid;
  overflow: hidden;
  animation: typing 11s steps(11, end) infinite, /* # of steps = # of chars */
  blink-caret 1s step-end infinite alternate;
}

span { letter-spacing: -10px; }

Terminal-Style-Loading-Screen.markdown

Terminal Style Loading Screen

Loading screen, old school terminal style. Made with CSS for the Pattern Radio.

A Pen by James Barnett on CodePen.

License.