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 に答える