@-webkit-keyframes spin {

  to { -webkit-transform: rotateZ(360deg); }

}

​

@-webkit-keyframes fadeIn {

  from { opacity: 0; }

  to   { opacity: 1; }

}

​

@-webkit-keyframes fadeOut {

  from { opacity: 1; }  

  to   { opacity: 0; }

}

​

@keyframes spin {

  to { transform: rotateZ(360deg); }

}

​

@keyframes fadeIn {

  from { opacity: 0; }

  to   { opacity: 1; }

}

​

@keyframes fadeOut {

  from { opacity: 1; }  

  to   { opacity: 0; }

}

​

.loader {

  display: inline-block;

  min-width: 100px;

  padding: 15px;

  text-align: center;

  font-family: sans-serif;

  color: white;

  background-color: rgba(0,0,0,0.75);

  border-radius: 5px;

  -webkit-animation: fadeIn 1s forwards;

  animation: fadeIn 1s forwards;

}

​

/* Spinner */

.loader:before {

  content: "";

  display: block;

  width: 20px;

  height: 20px;

  margin: 0px auto 12px auto;

  border-radius: 50px;

  border: 3px solid rgba(255,255,255,0.15);

  border-top-color: rgba(255,255,255,1.0);

  -webkit-animation: spin 0.5s linear infinite;

  animation: spin 0.5s linear infinite;

}

​

.loader.is-hidden {

  -webkit-animation: fadeOut 1s forwards;

  animation: fadeOut 1s forwards;

}

​

.loader.is-hidden:before {

  -webkit-animation-iteration-count: 5;

  animation-iteration-count: 5;

}