<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Material spinner demo</title>
<style type="text/css">
@keyframes background-anim {
  from {
    background-color: rgb(30,100, 30);
  }
  to {
    background-color: rgb(30, 30, 100);
  }
}

html, body {
  height: 100%;
}

html {
  background-color: #242424;
}

#background {
  margin: 0;
  height: 100vh;
  width: 100vw;
  background-color: #282828;
  transform:scale(3);
  animation: background-anim 5s alternate-reverse infinite ease-in-out;
}

.absolute-center {
  margin: auto;
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.material-spinner {
  display: inline-block;
  position: relative;
  width: 4.25rem;
  height: 4.25rem;
  animation: container-rotate 1568.23529ms linear infinite; }
  .material-spinner .spinner-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
  .material-spinner .circle-clipper {
    display: inline-block;
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden; }
  .material-spinner .half-circle {
    position: absolute;
    width: 4.25rem;
    height: 4.25rem; }
    .material-spinner .half-circle > div > div {
      width: 50%;
      height: 100%;
      overflow: hidden; }
      .material-spinner .half-circle > div > div > div {
        width: 3.75rem;
        height: 3.75rem;
        border: 0.25rem solid #eee;
        border-radius: 50%; }
  .material-spinner .left .half-circle {
    transform: rotate(129deg);
    animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
    .material-spinner .left .half-circle > div {
      transform: rotate(45deg); }
  .material-spinner .right .half-circle {
    left: -100%;
    transform: rotate(-129deg);
    animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
    .material-spinner .right .half-circle > div {
      transform: rotate(135deg); }
@keyframes container-rotate {
  to {
    transform: rotate(360deg); } }
@keyframes fill-unfill-rotate {
  12.5% {
    transform: rotate(135deg); }
  25% {
    transform: rotate(270deg); }
  37.5% {
    transform: rotate(405deg); }
  50% {
    transform: rotate(540deg); }
  62.5% {
    transform: rotate(675deg); }
  75% {
    transform: rotate(810deg); }
  87.5% {
    transform: rotate(945deg); }
  to {
    transform: rotate(1080deg); } }
@keyframes left-spin {
  from {
    transform: rotate(130deg); }
  50% {
    transform: rotate(-5deg); }
  to {
    transform: rotate(130deg); } }
@keyframes right-spin {
  from {
    transform: rotate(-130deg); }
  50% {
    transform: rotate(5deg); }
  to {
    transform: rotate(-130deg); } }
</style>
</head><body>
  <div id="background">
      <div class="absolute-center material-spinner">
      <div class="spinner-layer">
        <div class="circle-clipper left">
          <div class="half-circle"><div><div><div></div></div></div></div>
        </div><div class="circle-clipper right">
          <div class="half-circle"><div><div><div></div></div></div></div>
        </div>
      </div>
    </div>
  </div>
</body></html>