Заполнить изображение в div от центра

Question

Пока загружается вся страница; желтый круг должен начинаться с 1 тонкой линии от центра и будет «формировать/заполнять» весь круг.

Я использовал jPreloader. Я не уверен, как начать загрузку логотипа из центра. В настоящее время высота анимируется по мере загрузки страницы.

Javascript, где высота присваивается div.

$(jBar).stop().animate({ 
     height: per + '%' 
    }, 500, 'linear'); 

CSS, где размещен логотип:

#jpreBar { 
    border-radius:0%; 
    -moz-border-radius:0%; 
    -webkit-border-radius:0%; 

    background: url(../images/logo.jpg) left top no-repeat; 

    animation: progress 2s linear infinite; 
    -moz-animation: progress 2s linear infinite; 
    -webkit-animation: progress 2s linear infinite; 
    -ms-animation: progress 2s linear infinite; 
    -o-animation: progress 2s linear infinite; 
} 

анимация должна быть такой, слева направо: ссылка

Проект:

http://50.87.144.37/~projtest/team/design/yellowmedia/ 

Answer 1

Попробуйте этот код от моего jsFiddle. Подумайте, это поможет вам и добавит функциональность к вашему экрану загрузки. Время анимации и границы были добавлены мной для проверки всего.

HTML:

<div id="outer"> 
    <div id="jpreBar"></div> 
</div> 

<input id="input" value="0" /> 
<button id="button">Update</button> 

JS

$(document).ready(function(){ 
    $('#button').click(function(){ 
     var per = $('#input').val(); 

     var height = per; 
     backgroundy = -176 + 176 * (per/100); 
     margintop = 176 - 176 * (per/100); 

     $('#jpreBar').stop().animate({ 
     'height': height + '%', 
     'background-position-y': backgroundy + 'px', 
     'margin-top': margintop + 'px' 
     }, 5000, 'linear'); 
    }); 
}); 

CSS

#jpreBar { 
border-radius:0%; 
-moz-border-radius:0%; 
-webkit-border-radius:0%; 

background-image: url("http://50.87.144.37/~projtest/team/design/yellowmedia/images/logo.jpg"); 
background-repeat: no-repeat; 
background-position: 0px -176px; 
height: 0%; 
margin-top: 176px; 

animation: progress 2s linear infinite; 
-moz-animation: progress 2s linear infinite; 
-webkit-animation: progress 2s linear infinite; 
-ms-animation: progress 2s linear infinite; 
-o-animation: progress 2s linear infinite; 

border: 0px solid black; 
} 

#outer{ 
border: 0px solid black; 
height: 351px; 
}