Animierter Upload Button anstatt ProgressBar bei XHR Request

[Falc410]

Ich habe mit Javascript einen XHR Request damit Leute eine Datei auf den Server hochladen können. Der Fortschritt wird über eine Progressbar angezeigt. Funktioniert prima. Damit das schöner aussieht soll es aber ein Button sein.
Z.b. der hier wäre schön: http://www.materialup.com/posts/material-design-upload-button-with-progress
Das Teil wurde aber anscheinend komplett in CSS geschrieben. Ich habe absolut keine Ahnung wie ich das mit meinem Javascript Code verbinden kann. Alle animierten Buttons die ich gefunden habe sind so aufgebaut! Das ist eine Webkit Transition mit Duration - d.h. die Animation ist immer gleich lang!

Hier eine gekürzte Form meiner upload Methode:

function upload(blob){
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '{% url 'recorder:upload' %}', true);

        progressBar = document.getElementById('progress');
        progressBar.value = 0;
        $('#progress').show();

        // Visualize upload progress
        xhr.upload.onprogress = function(e) {
            if (e.lengthComputable) {
                progressBar.value = (e.loaded / e.total) * 100;
                progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
            }
        };

        xhr.onreadystatechange=function(){
            if (xhr.readyState==4 && xhr.status==200){
                $('#progress').hide();
            } else if (xhr.readyState==4 && xhr.status == 400 || xhr.readyState==4 && xhr.status == 500) {
                alert("Error while Uploading - The admins have been notified. Please try again later")
            }
        };
        xhr.send(blob);
    }

Wie ihr seht wird die Progressbar einfach mit einem % Wert von 0 bis 100 befüllt. Gibt es keine Möglichkeit einen von den animierten Buttons die ich im Internet finde, ebenfalls so anzusprechen?

 

[AndrewPoison]

Wie ich das sehe, ist um das Element ein Checkbox-Element gestrickt, und abhängig vom Checkbox-Status wird eben ein anderer Hintergrund dargestellt - mittels Animation sieht der Übergang dann aus wie ein Ladebalken. Da du aber praktisch keine Möglichkeit hast, genau zu bestimmen, an welcher Position der Ladebalken sein soll (sondern nur "nach x Sekunden hat er voll zu sein"), ist das ein denkbar ungünstiges Konstrukt für dich. Du könntest maximal auf die Animation verzichten und stattdessen mittels JS direkt die CSS-Klassen mit den Rotationswerten angehen und manuell festlegen. Aber lustig ist was anderes.

Gibts da nichts von Ratiopharm? ;D

 

[Falc410]

Wie lösen dass denn andere Webseiten? Es gibt doch überall eine Fortschrittsanzeige - auch mit Animation.

Ich könnte mir vorstellen dass ich die Animation aufzeiche, in ein gif oder halt sehr viele Bilder speichere und dann abhängig von % das entsprechende Bild heraussuche. Aber ist natürlich auch schon ziemlich aufwendig.

Animierte Knöpfe die nur aus CSS bestehen, findet man wie Sand am Meer. Aber eine Anleitung wie man so etwas wirklich benutzen könnte, nicht.

 

[AndrewPoison]

Für gewöhnlich bestehen die Upload-Anzeigen aus zwei Elementen, dem Parent und dem eigentlichen Ladebalken. Die größe des Ladebalkens wird in Abhängigkeit von deinem Upload (den du ja schon prozentual ausrechnest) bestimmt. Das sind dann die simplen Varianten. Der Button in deinem Beispiel hat aber *eigentlich* nur einen On/Off-State, also "0" oder "100%", und nur durch die CSS-Animation entsteht dazwischen ein Übergang. Dieser lässt sich aber eben nur zeitgesteuert definieren, nicht Event-basiert. Außer eben, man nimmt wie besprochen die Animation komplett raus und dreht mittels der CSS-Rotate-Anweisung selbst das Ding rein.

 

[Falc410]

Danke für die Erklärung. Aber ich finde einfach nichts anderes. Das einzige was ich jetzt noch gefunden haben ist 'percircle'.
https://github.com/toubou91/percircle

Sieht zumindest schon einen Tick besser aus als die Progressbar. Vielleicht bekomme ich das zum laufen.

Edit: Ist auch nicht das wahre. Man kann den Kreis wohl nur 1x mit einem Wert initialisieren. Wenn man diesen später ändert wird er nicht mehr animiert bzw. überlagert sich. Dabei wäre das ja genau das gewesen was ich gebraucht hätte. Ist echt komisch dass es millionen Seiten gibt die so etwas implementiert haben aber nicht eine Library für so etwas im Internet verfügbar ist. Ich weiß schon warum ich kein Webentwickler bin. Anstatt mit richtigen Problemen, schlägt man sich so mit so einem Scheiss rum. sigh