Wie funktioniert die Ladeanimation in html?
Guten Morgen,Ich habe eine Webanwendung welche beim Aufruf verschiedener Unterseiten Scripte ausführt. Nun möchte ich dass eine Ladeanimation erscheint sobald ich die Unterseite aufrufe und diese soll erst beendet werden sobald das Script fertig ausgeführt wurde. Habe bereits eine geeignete Animation gefunden und implementiert, nur weis ich nicht wie man diese jetzt aufruft, denn von allein funktioniert das nicht. Habe ein div spinner mit den Attributen und noch webkitkeyframes für die Animationen, wie kann man der Animation angeben wann sie beginnen soll und wann sie sich beenden soll?
Hier der code in css: (html code beinhaltet nur ein div spinner)
3 Antworten
Nun möchte ich dass eine Ladeanimation erscheint sobald ich die Unterseite aufrufe und diese soll erst beendet werden sobald das Script fertig ausgeführt wurde
Das ist zwar ziemlich unsinnig, aber ist ja nicht meine Seite -deswegen hier das Vorgehen: Du überlagerst den Inhalt der gesamten Seite mit einem <div> das Deine Ladeanimation darstellt. Nach dem Laden führst Du ein Javascript aus, das dieses <div> verschwinden lässt:
<style>
div#overlay {
position:absolute;
left:0;
top:0;
width: 100vW;
height: 100vH;
background:white
}
div#wrapper {
display:none
}
</style>
<body>
<div id="overlay">
<-- hier der Code für die Ladeanimation -->
</div>
<div id="wrapper">
<!-- hier der Rest der Seite -->
</div>
<script>
window.onload = document.getElementById('overlay').style.display='none'
</script>
</body>
Alex
Irgendwie wird die Ladeanimation nicht aufgerufen :/ es erscheint einfach nur die Seite.
hm ja, der wrapper wird irgendwie nicht gehidet am Anfang, ich glaube das liegt daran dass das Script schon ausgeführt wird bevor die Seite geladen wird..
tja wird wohl so sein, ich glaube ich werde das mit der Ladeanimation mal auf eis legen, habe heute schon zu viel Zeit darin investiert. Danke trotzdem.
Du könntest auch den Code der gesamten Seite posten (auf pastebin.com), dann wäre das Problem in 2 Minuten gelöst.
Welches Framework nutzt du dazu? Ich würde dir Angular/AngularJS empfehlen. Das kann dynamisch zur Laufzeit Elemente aus und einblenden.
https://stackoverflow.com/questions/15033195/showing-spinner-gif-during-http-request-in-angularjs
This really depends on your specific use case, but a simple way would follow a pattern like this:
.controller('MainCtrl', function ( $scope, myService ) {
$scope.loading = true;
myService.get().then( function ( response ) {
$scope.items = response.data;
}, function ( response ) {
// TODO: handle the error somehow
}).finally(function() {
// called no matter success or failure
$scope.loading = false;
});
});
And then react to it in your template:
<div class="spinner" ng-show="loading"></div>
<div ng-repeat="item in items>{{item.name}}</div>
Mal ne andere Frage: Welchen Editor nutzt du eigentlich?
Kann ich den Code für die Ladeanimation frei lassen? Denn diesen habe ich in css. Also einfach den code für die Ladeanimation in css für overlay schreiben?