Statischer Loading-State für langsame Datenverbindung

Für den Aufruf mit langsamer Datenverbindung wird auf der ersten "nackten" Ansicht ein statischer Loading-State implementiert.

Testcase: Aufruf mit "Slow 4G" im Network-Inspektor

IST-Zustand

Screenshot_2025-11-11_at_14.16.31

SOLL-Zustand

  • de: Daten werden geladen
  • en: Loading data

Loading-Portrait

Loading-Landscape

<h1>mobil.live</h1>
<h2>Daten werden geladen</h2>
<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" class="css-190l4ce">
<style>
.spinner_9y7u {animation:spinner_fUkk 2.4s linear infinite;animation-delay:-2.4s } 
.spinner_DF2s { animation-delay:-1.6s } 
.spinner_q27e { animation-delay:-.8s } 
@keyframes spinner_fUkk { 
    8.33% { x: 25px; y: 1px}
    25% { x: 25px; y: 1px }
    33.3% { x: 25px; y: 25px }
    50% { x: 25px; y: 25px }
    58.33% { x: 1px; y: 25px }
    75% { x: 1px; y: 25px }
    83.33% { x: 1px; y: 1px } 
}
</style>
<rect class="spinner_9y7u" x="1" y="1" rx="1" width="20" height="20" fill="#fff"></rect>
<rect class="spinner_9y7u spinner_DF2s" x="1" y="1" rx="1" width="20" height="20" fill="#fff"></rect>
<rect class="spinner_9y7u spinner_q27e" x="1" y="1" rx="1" width="20" height="20" fill="#fff"></rect>
</svg>