ページ遷移中にアニメーションgifを持つ方法は？

Question

プロジェクトでは、Backbone.jsが使用されています。

gifでdivをHTMLボディに追加してみました。

startLoadingAnimation = function() { 
 
    $("<div id='loading'></div>").appendTo("body"); 
 
}

#loading { 
 
    display: block; 
 
    position: fixed; 
 
    z-index: 1000; 
 
    top:  0; 
 
    left:  0; 
 
    height:  100%; 
 
    width:  100%; 
 
    background: rgba(0, 0, 0, .8) 
 
    url('../img/loading.gif') 
 
    50% 50% 
 
    no-repeat; 
 
}

それは上のクリックイベントをリッスンします。

すべては期待どおりですが、読み込み中のgifはアニメーションを実行しません。ブラウザがページリクエストなどを行っているので、gifが実行されない、または実行が停止するためです。とにかくその周りに、またはページの遷移に "読み込み"アニメーションを配置する良い方法はありますか？

ご意見やご感想をお寄せください。前もって感謝します。

Answer 1

外部リソースを読み込む代わりにCSSアニメーションを試しましたか？

あなたが好きなウェブの周りの多くのCSSのスピナーを見つけることができ、この1：あなたの問題であるwher

html, 
 
body { 
 
    min-height: 100vh; 
 
    min-width: 100vw; 
 
    overflow: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.spinner-container { 
 
    display: block; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    position: relative; 
 
} 
 

 
.spinner { 
 
    display: block; 
 
    width: 16px; 
 
    height: 16px; 
 
    border-radius: 16px; 
 
    position: absolute; 
 
    left: calc(50% - 8px); 
 
    top: calc(50% - 8px); 
 
    box-shadow: 20px 0px #FB404B, 0px 20px #FFA534, -20px 0px #87CB16, 0px -20px #1DC7EA; 
 
    transform: translatez(0px); 
 
    background: transparent; 
 
    animation: spin 1.2s infinite; 
 
} 
 

 
@keyframes spin { 
 
    0% { 
 
    box-shadow: 20px 0px #FB404B, 0px 20px #FFA534, -20px 0px #87CB16, 0px -20px #1DC7EA; 
 
    transform: rotate(0deg); 
 
    } 
 
    50% { 
 
    box-shadow: 40px 0px #FB404B, 0px 40px #FFA534, -40px 0px #87CB16, 0px -40px #1DC7EA; 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<div class="spinner-container"> 
 
    <div class="spinner"></div> 
 
</div>