Compressed Oval Animation

dabblet.css

/* Compressed Oval Animation */

        #oval {
            position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    box-shadow: 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f;
    -o-box-shadow: 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f;
    -ms-box-shadow: 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f;
    -webkit-box-shadow: 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f;
    -moz-box-shadow: 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f;
    animation: icnLoad ease infinite 3.8s;
    -o-animation: icnLoad ease infinite 3.8s;
    -ms-animation: icnLoad ease infinite 3.8s;
    -webkit-animation: icnLoad ease infinite 3.8s;
    -moz-animation: icnLoad ease infinite 3.8s;        }

        @keyframes icnLoad {
  0%,
	100% {
    box-shadow: 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f;
  }
  25% {
    box-shadow: -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f, 25px 25px #009a3e;
  }
  50% {
    box-shadow: -25px -25px #009a3e, 25px -25px #8fc31f, 25px 25px #009a3e, -25px 25px #8fc31f;
  }
  75% {
    box-shadow: 25px -25px #8fc31f, 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e;
  }
}
@-o-keyframes icnLoad {
  0%,
	100% {
    box-shadow: 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f;
  }
  25% {
    box-shadow: -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f, 25px 25px #009a3e;
  }
  50% {
    box-shadow: -25px -25px #009a3e, 25px -25px #8fc31f, 25px 25px #009a3e, -25px 25px #8fc31f;
  }
  75% {
    box-shadow: 25px -25px #8fc31f, 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e;
  }
}
@-ms-keyframes icnLoad {
  0%,
	100% {
    box-shadow: 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f;
  }
  25% {
    box-shadow: -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f, 25px 25px #009a3e;
  }
  50% {
    box-shadow: -25px -25px #009a3e, 25px -25px #8fc31f, 25px 25px #009a3e, -25px 25px #8fc31f;
  }
  75% {
    box-shadow: 25px -25px #8fc31f, 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e;
  }
}
@-webkit-keyframes icnLoad {
  0%,
	100% {
    box-shadow: 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f;
  }
  25% {
    box-shadow: -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f, 25px 25px #009a3e;
  }
  50% {
    box-shadow: -25px -25px #009a3e, 25px -25px #8fc31f, 25px 25px #009a3e, -25px 25px #8fc31f;
  }
  75% {
    box-shadow: 25px -25px #8fc31f, 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e;
  }
}
@-moz-keyframes icnLoad {
  0%,
	100% {
    box-shadow: 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f;
  }
  25% {
    box-shadow: -25px 25px #8fc31f, -25px -25px #009a3e, 25px -25px #8fc31f, 25px 25px #009a3e;
  }
  50% {
    box-shadow: -25px -25px #009a3e, 25px -25px #8fc31f, 25px 25px #009a3e, -25px 25px #8fc31f;
  }
  75% {
    box-shadow: 25px -25px #8fc31f, 25px 25px #009a3e, -25px 25px #8fc31f, -25px -25px #009a3e;
  }
}

dabblet.html

<div id="oval">

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}