Ändern der Größe eines Laden Gif

Question

Ich habe den Code unten als Laden Gif für meine Webseite, aber fragte mich, wie ich die Größe des Gif kleiner machen könnte? Jedes Mal, wenn ich versuche, die Größe zu ändern, ändert sich die Größe der gesamten Sache und nicht das Gif selbst.

$(window).load(function() { 
 
    setTimeout(function(){ 
 
      $('.loader').fadeOut('slow', function() { 
 
      }); 
 
     },1000); 
 
})

.loader { 
 
    position: fixed; 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 9999; 
 
    background: url('http://bosonprotein.com/onewebmedia/Magiska%20Bollar.gif') 50% 50% no-repeat rgb(0,0,0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="loader"></div>

Answer 1

Verwenden Sie die background-size propety so:

.loader { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
    background: url('http://bosonprotein.com/onewebmedia/Magiska%20Bollar.gif') 50% 50% no-repeat rgb(0,0,0); 
    background-size:10%; 
} 

Arbeits DEMO.

Dokumentation: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

P. S. Sie können auch px verwenden, em ..

setTimeout(function() { 
 
    $('.loader').fadeOut('slow', function() {}); 
 
}, 1000);

.loader { 
 
    position: fixed; 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 9999; 
 
    background: url('http://bosonprotein.com/onewebmedia/Magiska%20Bollar.gif') 50% 50% no-repeat rgb(0,0,0); 
 
    background-size:10%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="loader"></div>