<h1 data-content="Loading...">Loading...</h1>
html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  height: 100%;
  width: 100%;
  background: #003f7a ;
}

h1 {
  color: rgba(255, 255, 255, 0.3);
  font: 900 800% Baskerville, 'Palatino Linotype', Palatino, serif;
}

@keyframes loading {
  from {
    max-width: 0;
  }
}
h1:before {
  content: attr(data-content);
  position: absolute;
  overflow: hidden;
  max-width: 100%;
  color: rgba(255, 255, 255, 0.6);
  animation: loading 10s linear infinite;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.