<div><span class="loader"></span></div>
html {
  height:100%;
  padding:0;
  margin:0;
}

body {
  background:#212121;
  text-align:center;
  display:table;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

div {
  display:table-cell;
  text-align:center;
  vertical-align:middle;
}

.loader {
  display:inline-block;
  border:0.2em solid white;
  width:0.25em;
  height:0.25em;
  border-radius:100%;
  -moz-animation: loading 1s ease infinite alternate;
  -webkit-animation: loading 1s ease infinite alternate; /* Safari and Chrome */
  animation: loading 1s ease infinite alternate;
}

@-webkit-keyframes loading /* Safari and Chrome */
{
from {
  }
to {
    width:1.5em;
    height:1.5em;
    border:0.2em solid rgba(255,255,255,0.1);
  }
}

@-moz-keyframes loading /* Safari and Chrome */
{
from {
  }
to {
    width:1.5em;
    height:1.5em;
    border:0.2em solid rgba(255,255,255,0.1);
  }
}

keyframes loading
{
from {
  }
to {
    width:1.5em;
    height:1.5em;
    border:0.2em solid rgba(255,255,255,0.1);
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.