10 Arten von Ladeanimationen mit CSS3 implementiert. Eine auswählen und los geht‘s?

<Text>
  <div Klasse="Inhalt">
    <h3>CSS3-Ladeanimationen</h3>
    <div Klasse="load-wapp">
      <div Klasse="laden-1">
        <p>Wird geladen 1</p>
        <div Klasse="Zeile"></div>
        <div Klasse="Zeile"></div>
        <div Klasse="Zeile"></div>
      </div>
    </div>
    <div Klasse="load-wapp">
      <div Klasse="laden-2">
        <p>Wird geladen 2</p>
        <div Klasse="Zeile"></div>
        <div Klasse="Zeile"></div>
        <div Klasse="Zeile"></div>
      </div>
    </div>
    <div Klasse="load-wapp">
      <div Klasse="laden-3">
        <p>Wird geladen 3</p>
        <div Klasse="Zeile"></div>
        <div Klasse="Zeile"></div>
        <div Klasse="Zeile"></div>
      </div>
    </div>
    <div Klasse="load-wapp">
      <!-- Loading 4 funktioniert bei Firefox aufgrund des Rahmenradius und des „gestrichelten“ Stils nicht. -->
      <div Klasse="laden-4">
        <p>Wird geladen 4</p>
        <div Klasse="ring-1"></div>
      </div>
    </div>
    <div Klasse="load-wapp">
      <div Klasse="laden-5">
        <p>5 wird geladen</p>
        <div Klasse="Ring-2">
          <div Klasse="Ballhalter">
            <div Klasse="Ball"></div>
          </div>
        </div>
      </div>
    </div>
    <div Klasse="load-wapp">
      <div Klasse="laden-6">
        <p>Laden 6</p>
        <div Klasse="Briefhalter">
          <div class="l-1 letter">L</div>
          <div Klasse="l-2 Buchstabe">o</div>
          <div Klasse="l-3 Buchstabe">ein</div>
          <div class="l-4 letter">d</div>
          <div Klasse="l-5 letter">ich</div>
          <div class="l-6 letter">n</div>
          <div class="l-7 letter">g</div>
          <div Klasse="l-8 Buchstabe">.</div>
          <div Klasse="l-9 Buchstabe">.</div>
          <div Klasse="l-10 Buchstabe">.</div>
        </div>
      </div>
    </div>
    <div Klasse="load-wapp">
      <div Klasse="laden-7">
        <p>Wird geladen 7</p>
        <div Klasse="Quadrathalter">
          <div Klasse="Quadrat"></div>
        </div>
      </div>
    </div>
    <div Klasse="load-wapp">
      <div Klasse="laden-8">
        <p>8 wird geladen</p>
        <div Klasse="Zeile"></div>
      </div>
    </div>
    <div Klasse="load-wapp">
      <div Klasse="laden-9">
        <p>9 wird geladen</p>
        <div Klasse="Spinner">
          <div Klasse="Bubble-1"></div>
          <div Klasse="bubble-2"></div>
        </div>
      </div>
    </div>
    <div Klasse="load-wapp">
      <div Klasse="laden-10">
        <p>10 werden geladen</p>
        <div Klasse="Bar"></div>
      </div>
    </div>
  </div>
  <div Klasse="klar"></div>
</body>

/* -----------------------------------------
  =Standard-CSS, um die Demo hübscher zu gestalten
-------------------------------------------------------- */

Körper {
  Rand: 0 automatisch;
  Polsterung: 20px;
  maximale Breite: 1200px;
  Überlauf-y: scrollen;
  Schriftfamilie: „Open Sans“, serifenlos;
  Schriftstärke: 400;
  Farbe: #777;
  Hintergrundfarbe: #f7f7f7;
  -webkit-font-smoothing: Kantenglättung;
  -Webkit-Textgrößenanpassung: 100 %;
  -ms-text-size-adjust: 100 %;
}

.Inhalt {
  Polsterung: 15px;
  Überlauf: versteckt;
  Hintergrundfarbe: #e7e7e7;
  Hintergrundfarbe: rgba(0, 0, 0, 0,06);
}

h1 {
  Polsterung unten: 15px;
  Rahmen unten: 1px durchgezogen #d8d8d8;
  Schriftstärke: 600;
}

h1 Spanne {
  Schriftfamilie: Monospace, Serifen;
}

h3 {
  Polsterung unten: 20px;
  Kastenschatten: 0 1px 0 rgba(0, 0, 0, 0,1), 0 2px 0 rgba(255, 255, 255, 0,9);
}

P {
  Rand: 0;
  Polsterung: 10px 0;
  Farbe: #777;
}

.klar {
  klar: beides;
}

/* -----------------------------------------
  =CSS3 Animationen laden
-------------------------------------------------------- */

/* =Elementstil
---------------------- */
.load-wrap {
  schweben: links;
  Breite: 100px;
  Höhe: 100px;
  Rand: 0 10px 10px 0;
  Polsterung: 20px 20px 20px;
  Rahmenradius: 5px;
  Textausrichtung: zentriert;
  Hintergrundfarbe: #d8d8d8;
}

.load-wrapp p {
  Polsterung: 0 0 20px;
}
.load-wrapp:letztes-Kind {
  Rand rechts: 0;
}

.Linie {
  Anzeige: Inline-Block;
  Breite: 15px;
  Höhe: 15px;
  Rahmenradius: 15px;
  Hintergrundfarbe: #4b9cdb;
}

.ring-1 {
  Breite: 10px;
  Höhe: 10px;
  Rand: 0 automatisch;
  Polsterung: 10px;
  Rand: 7px gestrichelt #4b9cdb;
  Randradius: 100 %;
}

.ring-2 {
  Position: relativ;
  Breite: 45px;
  Höhe: 45px;
  Rand: 0 automatisch;
  Rand: 4px durchgezogen #4b9cdb;
  Randradius: 100 %;
}

.ball-halter {
  Position: absolut;
  Breite: 12px;
  Höhe: 45px;
  links: 17px;
  oben: 0px;
}

.ball {
  Position: absolut;
  oben: -11px;
  links: 0;
  Breite: 16px;
  Höhe: 16px;
  Randradius: 100 %;
  Hintergrund: #4282b3;
}

.Briefhalter {
  Polsterung: 16px;
}

.Brief {
  schweben: links;
  Schriftgröße: 14px;
  Farbe: #777;
}

.Quadrat {
  Breite: 12px;
  Höhe: 12px;
  Rahmenradius: 4px;
  Hintergrundfarbe: #4b9cdb;
}

.spinner {
  Position: relativ;
  Breite: 45px;
  Höhe: 45px;
  Rand: 0 automatisch;
}

.blase-1,
.blase-2 {
  Position: absolut;
  oben: 0;
  Breite: 25px;
  Höhe: 25px;
  Randradius: 100 %;
  Hintergrundfarbe: #4b9cdb;
}

.blase-2 {
  oben: automatisch;
  unten: 0;
}

.Bar {
  schweben: links;
  Breite: 15px;
  Höhe: 6px;
  Rahmenradius: 2px;
  Hintergrundfarbe: #4b9cdb;
}

/* =Das Zeug animieren
------------------------ */
.load-1 .line:n-tes-letztes-Kind(1) {
  Animation: LadenA 1,5 s 1 s unendlich;
}
.load-1 .line:n-tes-letztes-Kind(2) {
  Animation: LadenA 1,5 s 0,5 s unendlich;
}
.load-1 .line:n-tes-letztes-Kind(3) {
  Animation: LadenA 1,5 s 0 s unendlich;
}

.load-2 .line:n-tes-letztes-Kind(1) {
  Animation: LadenB 1,5 s 1 s unendlich;
}
.load-2 .line:n-tes-letztes-Kind(2) {
  Animation: LadenB 1,5 s 0,5 s unendlich;
}
.load-2 .line:n-tes-letztes-Kind(3) {
  Animation: LadenB 1,5 s 0 s unendlich;
}

.load-3 .line:n-tes-letztes-Kind(1) {
  Animation: LadenC 0,6 s 0,1 s linear unendlich;
}
.load-3 .line:n-tes-letztes-Kind(2) {
  Animation: LadenC 0,6 s 0,2 s linear unendlich;
}
.load-3 .line:n-tes-letztes-Kind(3) {
  Animation: LadenC 0,6 s 0,3 s linear unendlich;
}

.laden-4 .ring-1 {
  Animation: LadenD 1,5 s 0,3 s Kubik-Bézier (0,17, 0,37, 0,43, 0,67) unendlich;
}

.load-5 .ball-halter {
  Animation: LadenE 1,3 s linear unendlich;
}

.load-6 .letter {
  Animationsname: wird geladenF;
  Animationsdauer: 1,6 s;
  Anzahl der Animationsiterationen: unendlich;
  Animationsrichtung: linear;
}

.l-1 {
  Animationsverzögerung: 0,48 s;
}
.l-2 {
  Animationsverzögerung: 0,6 s;
}
.l-3 {
  Animationsverzögerung: 0,72 s;
}
.l-4 {
  Animationsverzögerung: 0,84 s;
}
.l-5 {
  Animationsverzögerung: 0,96 s;
}
.l-6 {
  Animationsverzögerung: 1,08 s;
}
.l-7 {
  Animationsverzögerung: 1,2 s;
}
.l-8 {
  Animationsverzögerung: 1,32 s;
}
.l-9 {
  Animationsverzögerung: 1,44 s;
}
.l-10 {
  Animationsverzögerung: 1,56 s;
}

.laden-7 .quadrat {
  Animation: LadenG 1,5 s kubisch-bézier (0,17, 0,37, 0,43, 0,67) unendlich;
}

.load-8 .line {
  Animation: LadenH 1,5 s Kubik-Bézier (0,17, 0,37, 0,43, 0,67) unendlich;
}

.load-9 .spinner {
  Animation: LadenI 2s linear unendlich;
}
.laden-9 .bubble-1,
.laden-9 .bubble-2 {
  Animation: 2 s hüpfen, unendlich langsam ein- und aussteigen;
}
.laden-9 .bubble-2 {
  Animationsverzögerung: -1s;
}

.load-10 .bar {
  Animation: LadenJ 2s Kubik-Bézier (0,17, 0,37, 0,43, 0,67) unendlich;
}

@keyframes wird geladenA {
  0 {
    Höhe: 15px;
  }
  50 % {
    Höhe: 35px;
  }
  100 % {
    Höhe: 15px;
  }
}

@keyframes ladenB {
  0 {
    Breite: 15px;
  }
  50 % {
    Breite: 35px;
  }
  100 % {
    Breite: 15px;
  }
}

@keyframes wird geladenC {
  0 {
    transformieren: übersetzen(0, 0);
  }
  50 % {
    transformieren: übersetzen(0, 15px);
  }
  100 % {
    transformieren: übersetzen(0, 0);
  }
}

@keyframes ladenD {
  0 {
    transformieren: drehen (0 Grad);
  }
  50 % {
    transformieren: drehen (180 Grad);
  }
  100 % {
    transformieren: drehen (360 Grad);
  }
}

@keyframes ladenE {
  0 {
    transformieren: drehen (0 Grad);
  }
  100 % {
    transformieren: drehen (360 Grad);
  }
}

@keyframes wird geladenF {
  0% {
    Deckkraft: 0;
  }
  100 % {
    Deckkraft: 1;
  }
}

@keyframes ladenG {
  0% {
    transformieren: verschieben(0, 0) drehen(0 Grad);
  }
  50 % {
    transformieren: übersetzen (70px, 0) drehen (360 Grad);
  }
  100 % {
    transformieren: verschieben(0, 0) drehen(0 Grad);
  }
}

@keyframes ladenH {
  0% {
    Breite: 15px;
  }
  50 % {
    Breite: 35px;
    Polsterung: 4px;
  }
  100 % {
    Breite: 15px;
  }
}

@keyframes ladenI {
  100 % {
    transformieren: drehen (360 Grad);
  }
}

@keyframes hüpfen {
  0%,
  100 % {
    transformieren: Skalierung(0);
  }
  50 % {
    transformieren: Skalierung(1);
  }
}

@keyframes ladenJ {
  0%,
  100 % {
    transformieren: übersetzen(0, 0);
  }

  50 % {
    transformieren: übersetzen(80px, 0);
    Hintergrundfarbe: #f5634a;
    Breite: 25px;
  }
}