.loader {
  margin-bottom:8vmin;
}
.loader .centered{
  width:210px;
  position:relative;
  margin:0 auto;
}
svg {
  position: absolute;
  left:0;
}
svg ellipse {
  -webkit-transform-origin: center;
          transform-origin: center;
}
svg:nth-of-type(1) ellipse {
  stroke: #E2574C;
  cx: 25px;
  stroke-width: 3px;
  -webkit-animation: jump 600ms infinite ease-in-out;
          animation: jump 600ms infinite ease-in-out;
  opacity: .7;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}
svg:nth-of-type(2) ellipse {
  stroke: #3DB39E;
  cx: 65px;
  stroke-width: 3px;
  -webkit-animation: jump 600ms infinite ease-in-out;
          animation: jump 600ms infinite ease-in-out;
  opacity: .7;
  -webkit-animation-delay: 75ms;
          animation-delay: 75ms;
}
svg:nth-of-type(3) ellipse {
  stroke: #8FB64C;
  cx: 105px;
  stroke-width: 3px;
  -webkit-animation: jump 600ms infinite ease-in-out;
          animation: jump 600ms infinite ease-in-out;
  opacity: .7;
  -webkit-animation-delay: 150ms;
          animation-delay: 150ms;
}
svg:nth-of-type(4) ellipse {
  stroke: #49C888;
  cx: 145px;
  stroke-width: 3px;
  -webkit-animation: jump 600ms infinite ease-in-out;
          animation: jump 600ms infinite ease-in-out;
  opacity: .7;
  -webkit-animation-delay: 225ms;
          animation-delay: 225ms;
}
svg:nth-of-type(5) ellipse {
  stroke: #D28831;
  cx: 185px;
  stroke-width: 3px;
  -webkit-animation: jump 600ms infinite ease-in-out;
          animation: jump 600ms infinite ease-in-out;
  opacity: .7;
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
}
svg:nth-of-type(6) ellipse {
  fill: #333333;
  opacity: .05;
  rx: 0;
  ry: 0;
  cx: 25px;
  cy: 48px;
  -webkit-animation: shadow 600ms infinite ease-in-out;
          animation: shadow 600ms infinite ease-in-out;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}
svg:nth-of-type(7) ellipse {
  fill: #333333;
  opacity: .05;
  rx: 0;
  ry: 0;
  cx: 65px;
  cy: 48px;
  -webkit-animation: shadow 600ms infinite ease-in-out;
          animation: shadow 600ms infinite ease-in-out;
  -webkit-animation-delay: 75ms;
          animation-delay: 75ms;
}
svg:nth-of-type(8) ellipse {
  fill: #333333;
  opacity: .05;
  rx: 0;
  ry: 0;
  cx: 105px;
  cy: 48px;
  -webkit-animation: shadow 600ms infinite ease-in-out;
          animation: shadow 600ms infinite ease-in-out;
  -webkit-animation-delay: 150ms;
          animation-delay: 150ms;
}
svg:nth-of-type(9) ellipse {
  fill: #333333;
  opacity: .05;
  rx: 0;
  ry: 0;
  cx: 145px;
  cy: 48px;
  -webkit-animation: shadow 600ms infinite ease-in-out;
          animation: shadow 600ms infinite ease-in-out;
  -webkit-animation-delay: 225ms;
          animation-delay: 225ms;
}
svg:nth-of-type(10) ellipse {
  fill: #333333;
  opacity: .05;
  rx: 0;
  ry: 0;
  cx: 185px;
  cy: 48px;
  -webkit-animation: shadow 600ms infinite ease-in-out;
          animation: shadow 600ms infinite ease-in-out;
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
}

@-webkit-keyframes jump {
  40% {
    -webkit-transform: translateY(20px) scale(1.3);
            transform: translateY(20px) scale(1.3);
    opacity: .9;
  }
  40% {
    rx: 10px;
    ry: 10px;
    stroke-width: 3px;
  }
  45% {
    rx: 15px;
    ry: 7px;
    stroke-width: 4px;
  }
  55% {
    rx: 10px;
    ry: 10px;
  }
}

@keyframes jump {
  40% {
    -webkit-transform: translateY(20px) scale(1.3);
            transform: translateY(20px) scale(1.3);
    opacity: .9;
  }
  40% {
    rx: 10px;
    ry: 10px;
    stroke-width: 3px;
  }
  45% {
    rx: 15px;
    ry: 7px;
    stroke-width: 4px;
  }
  55% {
    rx: 10px;
    ry: 10px;
  }
}
@-webkit-keyframes shadow {
  45% {
    opacity: .15;
    rx: 10px;
    ry: 3px;
    -webkit-transform: translateY(5px) scale(1.3);
            transform: translateY(5px) scale(1.3);
  }
}
@keyframes shadow {
  45% {
    opacity: .15;
    rx: 10px;
    ry: 3px;
    -webkit-transform: translateY(5px) scale(1.3);
            transform: translateY(5px) scale(1.3);
  }
}