<p>
  <span id="anim"></span><span id="shuffle"></span>
  <br />
  <br />
  <button id='btn'>
    Again
  </button>
</p>
@import url(https://fonts.googleapis.com/css?family=Electrolize);
body {
  margin: 0;
  padding: 0;
 font-family: 'Electrolize';
  font-size: 2em;
  text-transform: ;
  background-color: hsla(0, 0%, 10%, 1);
  color: hsla(0, 0%, 93%, 1);
  width: 100%;
  overflow: hidden;
}

p {
  width: 100%;
  text-align: center;
  margin: 15% auto;
}

button {
  background: transparent;
  border: 1px solid hsla(0, 0%, 0%, .8);
  padding: .5em;
  width: 5em;
  font-size: 60%;
}
var $ = function(id) {
  return document.getElementById(id);
};
var inc = 0;
var out = 0;
var str = 'Do The Type Shuffle...';
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@$%&';
var t;

var anim = function() {
  inc++;
  if (inc % 7 === 0 && out < str.length) {
    $('anim').appendChild(document.createTextNode(str[out]));
    out++;
  } else if (out >= str.length) {
    $('shuffle').innerHTML = '';
    removeInterval(t);
  }
  $('shuffle').innerHTML =
    chars[Math.floor(Math.random() * chars.length)];
};
t = setInterval(anim, 50);
$('anim').innerHTML = '';

//Do it again
function reload() {
  window.location.href = window.location.href;
}
document.getElementById('btn').onclick = reload;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.