0

加载整个页面时；黄色圆圈需要从中心的 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; 
}

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

动画

4

1 回答 1

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;
}
于 2013-09-02T08:57:55.670 回答