Sanduhr beim Speichern

[Albert]

Wahrscheinlich ist es leichter als gedacht, aber für mich gerade nicht. Ich versuch in die Welt von Bootstrap4 und php einzutauchen. Ich habe ein Formular, in dem auch eine Datei Uploadet. Das dauert je nach Größe. Jetzt möchte ich statt der Statuszeile unten Im Browser, so eine Art Sanduhr in der Mitte haben.

Kann mir jemand einen Hinweis geben, wie ich hierbei vorgehen kann

Ich weiß Google ist ein Freund, aber nicht meiner, da ich das was ich suche nicht in zwei Worte fassen kann.

[Der Martin]

Hallo,

Ich habe ein Formular, in dem auch eine Datei Uploadet.
Das dauert je nach Größe. Jetzt möchte ich statt der Statuszeile unten Im Browser, so eine Art Sanduhr in der Mitte haben.

meine erste Idee wäre, über die CSS-Eigenschaft cursor den Mauszeiger zu verändern (cursor:wait bietet sich an).

Vorteil: Es ist das vom Nutzer gewohnte Verhalten einer Anwendung, die signalisieren will: Moment, dauert einen Augenblick.
Nachteil: Eventuell recht unauffällig.

Zweiter Ansatz: Eine GIF-Animation einer Eieruhr oder so nehmen (findet man bestimmt irgendwo als frei verwendbare Grafik), und dieses Bild als Overlay über die Seite pappen. Das wäre dann bestimmt nicht zu übersehen.

Ich weiß Google ist ein Freund, aber nicht meiner, da ich das was ich suche nicht in zwei Worte fassen kann.

Dürfen auch drei oder vier Worte sein, Google ist da großzügig. ;-)

Ciao,
 Martin

[dedlfix]

Tach!

Ich versuch in die Welt von Bootstrap4 und php einzutauchen. Ich habe ein Formular, in dem auch eine Datei Uploadet.

Es kommt drauf an, wie der Upload erfolgt. Wenn es lediglich ein <input type=file> in einem Formular ist, dann hast du da wenig Einflussmöglichkeiten, weil der Browser mit dem Senden des Requests beschäftigt ist. In dem Fall geht meines Wissens nur, das Submit abzufangen und die entsprechende DOM-Änderung vorzunehmen, die die Sanduhr-Animation einfügt, bevor man das Submit-Ereignis dem Browser durchreicht. Die Frage ist allerdings, welche Art von Animation der Browser während des Requests abzuspielen in der Lage ist, oder ob er sie vielleicht stoppt.

Eine andere Vorgehensweise ist, den Upload asynchron mit einem XMLHttpRequest durchzuführen. Der läuft ja im Hintergrund und man kann in der Zeit nach Belieben am DOM hantieren.

dedlfix.

[Felix Riesterer]

Lieber Albert,

Ich habe ein Formular, in dem auch eine Datei Uploadet.

magst Du ein bisschen mehr Code verraten? @dedlfix hat ja schon angedeutet, dass es hier sehr darauf ankommt, wie genau Du den Upload realisierst.

Kann mir jemand einen Hinweis geben, wie ich hierbei vorgehen kann

Ganz klar eindeutige Antwort: Ja, natürlich!

Ich weiß Google ist ein Freund, aber nicht meiner, da ich das was ich suche nicht in zwei Worte fassen kann.

Wir haben ein Tutorial zum Thema Upload. Dort wird auch erwähnt, wie man mit JavaScript den Vorgang mit einer komfortablen Prozentanzeige erweitern kann. Alternativ kann man auch die File Upload API des Browsers benutzen, um den Upload mit JavaScript zu realisieren.

Die Idee mit der Sanduhr bedeutet in jedem Fall, dass der Upload-Prozess mit JavaScript-Mitteln "abgefangen" werden muss, um die Sanduhr (ein animiertes GIF?) anzuzeigen, bevor der eigentliche Upload stattfindet. Ebenso benötigt es einen Weg, das Ende des Prozesses abzufangen, um die Sanduhr wieder zu verbergen.

Was genau hast Du schon an Bausteinen zusammen?

Liebe Grüße

Felix Riesterer

[Matthias Apsel]

Hallo Albert,

ich habe mir von https://www.cssscript.com/tag/loading-spinner/ ein Beispiel ausgesucht, das per CSS (display:none) unsichtbar gemacht und mit JS (in dem Fall JQuery) einfach

zeige_spinner = function() {
  $('.spinneroverlay').css('display','block');
}

$('form').submit(zeige_spinner);

Wenn der upload abgeschlossen ist, wird meinem Fall die Seite neu geladen und die Spinnergrafik ist nicht mehr zu sehen.

Bis demnächst
Matthias