Radiale Fortschrittsbalken im Web sind eine großartige Möglichkeit, dem Benutzer anzuzeigen, wie weit er durch einen Prozess ist.
Es gibt viele Möglichkeiten, radiale Fortschrittsbalken zu erstellen, aber Nathan Cockerill findet es am einfachsten, sie mit SVGs zu zeichnen und sie mit Vue (oder anderen JavaScript-Bibliotheken) zu animieren.
Zuerst müssen wir das SVG kreiiren. Das können wir in Sketch leicht machen. Wir würden einen Kreis mit einem Rand und ohne Füllung erstellen. Dies könnte jede Größe sein, in dieser Artikelempfehlung erstellt Nathan seine im 100px-zu-100px Format. Wir würden diesen Kreis dann duplizieren, so dass wir zwei von ihnen haben. Einer von ihnen wird der Hintergrund der Kreisgrenze sein, dann dient der andere der tatsächliche Prozentsatz der Grenze. Bereit? Los geht’s.
Schreibe einen Kommentar