HKN

html knowhow

Seiten-Lade-Anzeiger










Seiten-Lade-Anzeiger

So sieht´s aus
Quellcode
<html>
<head>

<style type="text/css">
.loader {border-radius: 50%;width: 10em;height: 10em;margin: 60px auto; font-size: 10px; position: relative; text-indent: -9999em; border-top: 1.1em solid blue;
border-right: 1.1em solid yellow; border-bottom: 1.1em solid green; border-left: 1.1em solid aqua;
-webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;}
@-webkit-keyframes load8 {
0% { webkit-transform: rotate(0deg); transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg);} }
@keyframes load8 {
0% { webkit-transform: rotate(0deg); transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg);} }
#loadingDiv {position:absolute;; top:0; left:0; width:100%; height:100%; background-color:transparent;}
#loading-image {z-index: 100;}
</style>
<head>

<body >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('body').append('<div id="loadingDiv"><div class="loader">Loading...</div></div>');
$(window).on('load', function(){
setTimeout(removeLoader, 1000); });
function removeLoader(){
$( "#loadingDiv" ).fadeOut(100, function() {
$( "#loadingDiv" ).remove();
});
}
</script>
</body>

</html>





Kontakt    Datenschutz   Impressum