.spinner {
  height: 30px;
  text-align: center; }
  .spinner.x-small {
    height: 16px; }
  .spinner.small {
    height: 20px; }
  .spinner.medium {
    height: 24px; }
  .spinner.large {
    height: 30px; }
  .spinner.x-large {
    height: 40px; }

.spinner > div {
  background-color: #FFFFFF;
  height: 15px;
  width: 15px;
  margin-left: 3px;
  border-radius: 50%;
  display: inline-block;
  -webkit-animation: stretchdelay 0.7s infinite ease-in-out;
  animation: stretchdelay 0.7s infinite ease-in-out; }

.spinner.x-small > div {
  height: 8px;
  width: 8px; }

.spinner.small > div {
  height: 10px;
  width: 10px; }

.spinner.medium > div {
  height: 12px;
  width: 12px; }

.spinner.large > div {
  height: 15px;
  width: 15px; }

.spinner.x-large > div {
  height: 20px;
  width: 20px; }

.spinner.light > div {
  background-color: #FFFFFF; }

.spinner.dark > div {
  background-color: #0193D7; }

.spinner.watermark > div {
  background-color: #D6DBDF; }

.spinner .circ1 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s; }

.spinner .circ2 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s; }

.spinner .circ3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s; }

.spinner .circ4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s; }

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% {
    -webkit-transform: translateY(-10px); }
  20% {
    -webkit-transform: translateY(-20px); } }

@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: translateY(10px);
    -webkit-transform: translateY(10px); }
  20% {
    transform: translateY(0);
    -webkit-transform: translateY(0); } }