Elastischer SVG-Progress-Loader zur Darstellung des Download-Fortschritts

Elastic Progress
1 Kommentar

Fortschrittsbalken sind besonders dann nützlich, wenn zum Beispiel der Fortschritt von Downloads angezeigt werden soll. Oft sind solche Fortschrittsbalken aber simple, meist wenig ansprechende Balken, die vor allem dann nervig für den User sind, wenn ein Download fehlschlägt – und die Progress-Bar keinerlei Anzeige dazu bietet.

Dass es auch anders gehen kann, zeigt ein neues Codrops-Tutorial. Dabei handelt es sich um Elastic Progress, einen elastischen SVG-Progress-Loader, der auf dem Dribble-Shot „Download“ basiert und mit SVG und TweenMax/TweenLite implementiert wird. Dabei wird der Download-Button von einem Icon mit einem Pfeil beim Klicken in einen animierten Fortschrittsbalken – inklusive Label mit dem jeweils aktuellen Download-Fortschritt – umgewandelt.

Elastic Progress: Button-Animation mit Stil

Eine solche Animation sorgt vor allem auch für eine bessere User Experience. Umsetzen lässt sie sich auf verschiedene Arten, etwa mit CSS. Allerdings bietet diese Lösung Webdesignern wenig Flexibilität; zudem kann die Umsetzung schnell verwirrend werden. Stattdessen ist hier die Nutzung von SVGs vorzuziehen, auch wenn es gerade bei der Performance einige Nachteile gibt. Sie lassen sich allerdings mithilfe der für die Animation des Fortschrittsbalkens verwendeten Animationslibrary GSAP leicht überbrücken.

Wie man bei der eigentlichen Animation des Buttons vorgehen sollte, erklärt das Tutorial sehr ausführlich. Das Ergebnis kann sich in jedem Fall sehen lassen:

Elastic Progress in Aktion

Quelle: http://tympanus.net/codrops/2015/09/23/elastic-progress/

Der so gestaltete Button bringt selbst nur wenig Funktionalität mit sich; der Nutzer muss sich also selbst um die Kontrolle des Öffnen des Buttons, die Fortschrittsanzeige und die entsprechende Anzeige bei der Vollendung beziehungsweise dem Abbruch des Downloads kümmern. Dafür stehen eine ganze Reihe von verschiedenen Methoden zur Verfügung. Zudem gibt es eine Vielzahl möglicher Optionen, mit denen das Aussehen des Buttons und der Fortschrittsanzeige verändert werden kann. Eine Übersicht dazu findet sich auf GitHub. Dort finden sich auch einige weitere Tipps zur Nutzung der Elastic-Progress-Animation; eine Demo steht auf der Projekt-Website zur Verfügung.

Name Elastic Progress
Hersteller Codrops
Projektwebsite http://tympanus.net/Development/ElasticProgress/
GitHub https://github.com/codrops/ElasticProgress/

Aufmacherbild: download or upload or installation process speed: speedometer and progress bar von Shutterstock / Urheberrecht: faithie

Unsere Redaktion empfiehlt:

Relevante Beiträge

X
- Gib Deinen Standort ein -
- or -