Ladebalken werden fast überall eingesetzt wo im Hintergrund zuerst grosse Mengen an Daten geladen werden können bevor die Webseite fertig angezeigt werden kann. Damit die Besucher dann nicht vor einer leeren weissen Seite sitzen und sich fragen ob die Webseite kaputt ist, baut man solche kleine Animationen ein.

Im heutigen Video zeige ich euch wie ihr so ein Ladebalken mit HTML erstellen könnt. Das coole an diesem Ladebalken ist, man kann es auch als statisches Element in mehrstufigen Formulare einsetzen.

Also passt auf und ihr entdeckt wieder ein altes HTML Element das bereits viele vergessen haben.

Video

Animierte Animation

Das ist die einfache Ladeanimation und man kann diese fast nicht selbst stylen.

1

<progress></progress>

Statische Animation

Diese Animation kann man zum Beispiel verwenden, wenn man einem User eine mehrschritte Formularfunktion zeigen möchte oder wenn man sonst eine Statusanzeige erstellen möchte.

1

<progress max="100" value="80"></progress></h3>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

progress {
        accent-color: coral;
      }
      progress::-webkit-progress-value {
        background-color: coral;
      }
 
      progress::-moz-progress-bar {
        background-color: coral;
      }
      /*-----*/
      progress {
        position: relative;
      }
 
      progress::before,
      progress::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
      }
 
      progress::before {
        width: 100%;
        background: burlywood;
      }
 
      progress::after {
        width: 25%;
        background: brown;
      }