.bubble-loading {
  border-radius: 50%;
  width: 1em;
  height: 1em;
  background: coral;
  overflow: hidden;
  box-shadow:
    0.01em 0.01em 0.5em -0.1em rgba(0, 0, 0, 0.25) inset,
    -0.01em -0.01em 0.15em -0.05em rgba(255, 255, 255, 0.25) inset,
    0.01em 0.01em 0.25em -0.05em rgba(0, 0, 0, 0.4);
}

.bubble-loading > span:nth-child(1)::before,
.bubble-loading > span:nth-child(1)::after {
  content: '';
  display: block;
  position: absolute;
  border-radius: 50%;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  opacity: 0;
  top: 0;
  width: 0.125em;
  height: 0.125em;
  border: 0.02em solid white;
  animation-name: loading-bubbling-a;
  animation-duration: 4s;
}

.bubble-loading > span:nth-child(1)::before { /* bubble A */
  left: 0.2em;
}

.bubble-loading > span:nth-child(1)::after { /* bubble B */
  left: 0.5em;
  animation-delay: 1.5s;
}

.bubble-loading > span:nth-child(2)::before,
.bubble-loading > span:nth-child(2)::after {
  content: '';
  display: block;
  position: absolute;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  background: transparent;
  border-radius: 50%;
  opacity: 0;
  width: 0.05em;
  height: 0.05em;
  box-shadow:
    0.297em 0.178em white,
    -0.094em 0.31em white,
    0.176em -0.257em white,
    -0.49em -0.28em white,
    0.158em 0.086em white,
    -0.15em -0.113em white,
    0.464em -0.206em white,
    -0.38em 0.1em white,
    0.16em 0.352em white,
    0.054em -0.065em white;
  animation-name: loading-bubbling-b;
  animation-duration: 10s;
}

.bubble-loading > span:nth-child(2)::before {
  left: 0.7em;
}

.bubble-loading > span:nth-child(2)::after {
  animation-delay: 5s;
  left: 0.3em;
}

@keyframes loading-bubbling-a {
  0% {
    top: 1.2em;
    opacity: 1;
  }
  95% {
    top: -0.2em;
    opacity: 1;
  }
  96% {
    top: -0.2em;
    opacity: 0;
  }
  99% {
    top: 1.2em;
    opacity: 0;
  }
  100% {
    top: 1.2em;
    opacity: 1;
  }
}

@keyframes loading-bubbling-b {
  0% {
    top: 1.4em;
    opacity: 0.3;
  }
  95% {
    top: -0.4em;
    opacity: 0.3;
  }
  96% {
    top: -0.4em;
    opacity: 0;
  }
  99% {
    top: 1.4em;
    opacity: 0;
  }
  100% {
    top: 1.4em;
    opacity: 0.3;
  }
}