jquery mobileまたはjqueryを使用してHTMLページコンテンツにページローディングを表示する方法

Question

jquery mobileまたはjquery .iを使用してHTMLページコンテンツにページローディングを表示するjqueryおよびajaxでいくつかのコーディングを試しました。それは動作していません...任意の解決策があります誰も私を示唆する

Answer 1

これを達成するのに役立ちます。

これらはすべて基本的に同じものを表示します。^{（コンテンツがAjaxで読み込み中のウェブサイトを作成しています）}若干の違いがあります。

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/

http://tutorialzine.com/2009/09/simple-ajax-website-jquery/

http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp

Answer 2

だけ.GIF画像を使用しています。ちょうどGoogleイメージ検索 "スピナーgif"をしてください。 次に、spinner.gifをurローカルに保存します。 ....表示し、非表示にする "可視化" を使用し

手順： - 1. Google.com

1. クリックして画像検索

2. 検索ボックスに "Spinner.gifを入力します"

3. クリックして[検索]ボタン

それを行ってsは今、あなたはあなたの願い（アプリのどれ.GIF画像フィット）HTMLでのローカルの使用中 店も、

Answer 3

///HTML CODE//// 
<div class="loader"> 
</div> 
<button id="btn"> 
click 
</button> 
<p>Processing - Please wait </p> 

// CSS CODE /// 
.loader { 
    border: 16px solid yellow; 
    border-radius: 50%; 
    border-top: 16px solid #1BB2AC; 
    width: 120px; 
    height: 120px; 
    -webkit-animation: spin 2s linear infinite; 
    animation: spin 2s linear infinite; 
} 

@-webkit-keyframes spin { 
    0% { -webkit-transform: rotate(0deg); } 
    100% { -webkit-transform: rotate(360deg); } 
} 

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
} 

/// JQUERY CODE /// 
$('.loader').hide(); 
$('p').hide(); 
$('#btn').on('click', function(){ 
     setInterval(function(){ 
      $('.loader').hide(); 
    $('p').hide() 
     $('#btn').hide(); 
     }, 2000) 
    $('p').show(); 
     $('.loader').show(); 
    $('#btn').hide(); 
    }); 

https://jsfiddle.net/dxpkumar/4kgupxeL/#&togetherjs=8rscNma3nL