CSS Listview Fortschrittsbalken?

[SourceCoder]

Schönen guten Morgen Zusammen,

also ich erstellte gerade eine kleine Mobile Webseite dort habe ich ein Listview Element welche ich durch ein Fortschrittsbalken erweitern möchte wie müsste das ganze aussehen oder wie müsste ich vorgehen?

So soll es später aussehen:

Also ein grüner Fortschrittsbalken mit 4 Balken die auch am besten so Abgrenzt sind wie auf dem Bild.

 

[Cool Master]

Dynamisch --> JavaScript einen anderen Weg wird es nicht geben.

 

[SymA]

CSS ist an sich nur für die Gestaltung und das Aussehen zuständig (Farbe,Schriftart, Position von Elementen)
Wie Cool Master schon gesagt hat am besten mit Javascript

 

[Musicon]

soweitz ich weiß, ist für solche balken auf webbasis flash eine erwähenswerte lösung ;P
Nein mal im ernst. Ne JProzesbar sollte es tun !

 

[SymA]

TE schrieb, dass es für eine Mobile Webseite gedacht ist (damit fliegen iOS und Android ab 4.1 ohne Flash.apk raus)

 

[Musicon]

yepps gerad egesehen. und mein Post Editiert. JProzesbar sollte der Schlüssel sein.

Oder die Eleganteste lösung wäre du benutzt ein Framework z.b. Sencha Touch.
die haben auch viele Funktionen im Angebot. Funktoniert in alle Browsern. Somit biste nicht mehr system gebunden

 

[SymA]

@Musicon:
Du haust da gut was durcheinander oder? TE möchte eine Webseite machen für mobile Geräte und keine mobile Applikation erstellen. Sencha Touch ist für Applikationen. Er möchte eine animierte Progressbar die er mit JQuery UI absolut einfach umsetzen kann.....

 

[Musicon]

Ne da hast du recht das die Prgresbar reicht!
Ich meine nur allgemein gesehen.
Dieses Framework erstellt keine Applikation im tieferen sinne.
Grob umschrieben werden 20k Zeilen code mitgeliefert (CSS Files etc)
eigebunden per HTML geschrieben in Javascript.
Es müssen nur funktionen eigebunden werden.
Vorteil davon ist man kriegt das Look & Feel einer Applikation obwohl es nicht mehr ist als eine Website

Wie gesagt hat maybe mit dem Problem/thema zu tun, aber ich wollts loswerden ;

LG

P.s. Das Framework berechnet natürlich die display größe! sieht imme rPerfet aus^. Keine lässtigen anpassungen mehr nötig.

 

[Daaron]

Genau für sowas bringt HTML5 ja das <progress> - Element mit... braucht natürlich trotzdem JS.

 

[Cool Master]

@Daaron

Läuft das auch schon überall? Vor allem Webkit (da MObil)?

 

[Daaron]

http://caniuse.com/#feat=progressmeter

 

[Cool Master]

Scheint so das es für den TE nicht wirklich was bringt wenn Android und iOS nicht supportet werden ;D

 

[SourceCoder]

Hab nun von dieser Webseite: http://www.alessioatzeni.com/blog/css3-loading-animation/

Third Example CSS3 Loading Animation, importiert nun bin auf der suche nach der Möglichkeit wie ich das Ding per Javascript füllen kann.
In CSS3 geschieht das ja so:

-webkit-animation:fill .5s linear forwards;
-moz-animation:fill .5s linear forwards;

 

[SymA]

Hast du es mal mit .css bzw. .animate probiert? Damit dürfte das ja funktionieren.

 

[Cool Master]

@SymA

Klar geht es damit.... Aber mit was willst du es füllen? Du kannst ja nichts animieren, wenn du nichts zu laden hast...

 

[Reglohln]

Ich möchte dazu mal folgende Frage stellen: Soll der Fortschrittsbalken wirklich dynamisch sein? Also er zeigt den Fortschritt eines Prozesses an, der gerade auf dem Server läuft? Oder ist das eher sowas wie auf z.B. Shopseiten, bei denen die Position des Balkens lediglich den Fortschritt des Bestellprozesses anzeigt und nur weiterspringt, wenn man zum nächsten Bestellprozess geht?

Sollte es wirklich dynamisch sein und den wirklichen Fortschritt des im Hintergrund ablaufenden Prozesses zeigen, kommt man nicht um AJAX herum, denn es muss ja ständig der aktuelle Zustand auf dem Server abgefragt werden. Aber dann bist du auf einem mobilen Gerät wahrscheinlich schlecht dran, wie andere User schon schrieben.

Ansonsten wäre noch ein Kompromiss möglich, indem du einfach eine per gif-Bild eingefügte Endlosanimation einfügst.

Für den Fall, dass es sich um einen statischen Fortschrittsbalken (wie das Biespiel mit den Shopseiten) handeln sollte, ist das natürlich vollkommen unproblematisch mittels PHP, HTML und CSS zu lösen.

 

[Cool Master]

...kommt man nicht um JS bzw. JQuery herum, denn es muss ja ständig der aktuelle Zustand auf dem Server abgefragt werden.

JS und JQery sind Client seiting und haben mit dem Server 0 zu tun. Wenn man Daten auf dem Server abruft muss der Server Ajax oder etwas vergleichbares bieten.

 

[Reglohln]

Ist JQuery nicht sogar AJAX, denn das meinte ich eigentlich auch ^^ Hab damit aber nie gearbeitet, daher hab ichs wohl falsch in Erinnerung.

 

[SymA]

AJAX ist eine Technik von Javascript und somit auch JQuery - aber ja es wird öfters mal damit gleichgesetzt, oder eben so gemeint.

 

[Cool Master]

Jqery hat mit Ajax 0 zu tun. Jquery ist ein Framework (Bibiliothek) und Ajax eine eigenständige Technik, welche es schon lange vor JQeury gab.