Изменение размера загрузочного gif

Question

У меня есть код ниже для загрузки gif для моей веб-страницы, но мне было интересно, как я могу уменьшить размер gif? Каждый раз, когда я пытаюсь изменить размер, он меняет размер всей вещи, а не самого gif.

$(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

Используйте background-size propety так:

.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%; 
} 

Рабочая DEMO.

Документация: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

P.S. Вы можете также использовать точки, их, ..

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>