HTML Ladeanimation – wie man so eine Ladeanimation für seine eigene Webseite erstellen kann.

von | Apr 21, 2023 | Allgemein | 0 Kommentare

Schlagwörter: CSS - CSS3 - HTML

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;
      }




0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Kurse / Webinare

Meine nächste Webinare / Kurse