@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 8px;
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #E56262;
  color: #333;
  font-family: "Open Sans", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.center .circle {
  background-color: #fff;
  box-shadow: 5px 8px 10px 0 rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: 5s infinite;
          animation: 5s infinite;
}
.center .circle__one {
  -webkit-animation-name: loadingOne;
          animation-name: loadingOne;
}
.center .circle__two {
  -webkit-animation-name: loadingTwo;
          animation-name: loadingTwo;
}
.center .circle__three {
  -webkit-animation-name: loadingThree;
          animation-name: loadingThree;
  z-index: 2;
}

@-webkit-keyframes loadingOne {
  0% {
    width: 0;
    height: 0;
  }
  65%, 70% {
    width: 90px;
    height: 90px;
  }
  100% {
    width: 0;
    height: 0;
  }
}

@keyframes loadingOne {
  0% {
    width: 0;
    height: 0;
  }
  65%, 70% {
    width: 90px;
    height: 90px;
  }
  100% {
    width: 0;
    height: 0;
  }
}
@-webkit-keyframes loadingTwo {
  0%, 20% {
    width: 0;
    height: 0;
  }
  60%, 65% {
    width: 60px;
    height: 60px;
  }
  85% {
    width: 0;
    height: 0;
  }
}
@keyframes loadingTwo {
  0%, 20% {
    width: 0;
    height: 0;
  }
  60%, 65% {
    width: 60px;
    height: 60px;
  }
  85% {
    width: 0;
    height: 0;
  }
}
@-webkit-keyframes loadingThree {
  0%, 30% {
    width: 0;
    height: 0;
  }
  60% {
    width: 30px;
    height: 30px;
  }
  75% {
    width: 0;
    height: 0;
  }
}
@keyframes loadingThree {
  0%, 30% {
    width: 0;
    height: 0;
  }
  60% {
    width: 30px;
    height: 30px;
  }
  75% {
    width: 0;
    height: 0;
  }
}