将图像从中心填充到 div 中

Question

在整个页面加载时；黄色圆圈需要从距离中心的 1 条细线开始，并将“形成/填充”整个圆圈。

我使用了 jPreloader。我不确定如何从中心开始加载徽标。目前，高度随着页面加载而动画化。

将高度分配给 div 的 Javascript。

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

动画需要是这样的，从左到右：

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