从中心填充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; 
}

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

项目链接：

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