css3 loading效果

codepen.io/simoncla/pe…

四个点

<figure>
    <div class="dot white"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</figure>


body { background: #222; }
figure { 
  position: absolute;
  margin: auto;
  top: 0; bottom: 0; left: 0; right: 0;
  width: 6.250em; height: 6.250em;
  animation: rotate 2.4s linear infinite;
}
.white { 
  top: 0; bottom: 0; left: 0; right: 0; 
  background: white; 
  animation: flash 2.4s linear infinite;
  opacity: 0;
}
.dot {
  position: absolute;
  margin: auto;
  width: 2.4em; height: 2.4em;
  border-radius: 100%;
  transition: all 1s ease;
}
.dot:nth-child(2) { top: 0; bottom: 0; left: 0; background: #FF4444; animation: dotsY 2.4s linear infinite; }
.dot:nth-child(3) { left: 0; right: 0; top: 0; background: #FFBB33; animation: dotsX 2.4s linear infinite; }
.dot:nth-child(4) { top: 0; bottom: 0; right: 0; background: #99CC00; animation: dotsY 2.4s linear infinite; }
.dot:nth-child(5) { left: 0; right: 0; bottom: 0; background: #33B5E5; animation: dotsX 2.4s linear infinite; }

@keyframes rotate {
  0% { transform: rotate( 0 ); }
  10% { width: 6.250em; height: 6.250em; }
  66% { width: 2.4em; height: 2.4em; }
  100%{ transform: rotate(360deg); width: 6.250em; height: 6.250em; }
}

@keyframes dotsY {
  66% { opacity: .1; width: 2.4em; }
  77%{ opacity: 1; width: 0; }
}
@keyframes dotsX {
  66% { opacity: .1; height: 2.4em;}
  77%{ opacity: 1; height: 0; }
}

@keyframes flash {
  33% { opacity: 0; border-radius: 0%; }
  55%{ opacity: .6; border-radius: 100%; }
  66%{ opacity: 0; }
}

三个点

<figure>
  <div class="dot white"></div>
  <div class="dot red"></div>
  <div class="dot yellow"></div>
  <div class="dot blue"></div>
</figure>

body { background: #222; }
figure { 
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6.25em;
  height: 6.25em;
  animation: rotate 2.4s linear infinite;
}

.dot {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 2.4em;
  height: 2.4em;
  border-radius: 100%;
}
.white {
  background: white;
  animation: flash 2.4s linear infinite;
  opacity: 0;
}
:root {
   --r: 1.925em;
}

.red {
  background: #FF4444;
  transform: translateY(calc(-1 * var(--r)));
  animation: collapse 2.4s linear infinite;
}

.yellow {
  background: #FFBB33;
  transform: translate(
    calc(-0.866 * var(--r)),
    calc(0.5 * var(--r))
  );
  animation: collapse 2.4s linear infinite;
}

.blue {
  background: #33B5E5;
  transform: translate(
    calc(0.866 * var(--r)),
    calc(0.5 * var(--r))
  );
  animation: collapse 2.4s linear infinite;
}
@keyframes collapse {
  66% {
    opacity: .15;
    transform: scale(1) translate(var(--tx, 0), var(--ty, 0));
  }
  77% {
    opacity: 1;
    transform: scale(0) translate(0, 0);
  }
}
@keyframes rotate {
  0% { transform: rotate(0); }
  10% { width: 6.25em; height: 6.25em; }
  66% { width: 2.4em; height: 2.4em; }
  100% { transform: rotate(360deg); width: 6.25em; height: 6.25em; }
}

@keyframes flash {
  33% { opacity: 0; border-radius: 0%; }
  55% { opacity: .6; border-radius: 100%; }
  66% { opacity: 0; }
}