<div id = "loading">
  <h1>Your page is loading.</h1>
  <div class = "ball ball-anim"></div>
</div>
<footer>Bulgur Otididae. 2015.</footer>

body
{
  background-color: #FDEECD;
  margin: 0 auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

h1
{
  text-align: center;
  font-family: "Century", serif;
  color: #493831;
}

footer
{
  position: fixed;
  bottom: 0;
  text-align: center;
  background-color: #493831;
  border: 3px solid #493831;
  width: 100%;
  color: white;
  margin: 0px auto;
  padding: 2px;
}

#loading
{
  width: 500px;
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
}

div.ball
{
  background-color: #D24858;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  float: left;
}

div.ball-anim
{
  -webkit-animation: loading 2.5s;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes loading
{
  0%
  {
    opacity: 0;
  }
  50%
  {
    opacity: 1;
    background-color: #EA8676;
    margin-left: 50%;
  }
  100%
  {
    opacity: 0;
    margin-left: 100%;
  }
}