私のウェブサイトでCSSローダーを使用するには？

-1

フルロードサイトの前にこのCSSローダーを使いたいです。私のウェブサイトでCSSローダーを使用するには？

CSSローダーソース：http://tobiasahlin.com/spinkit。

このサイトでは、ドキュメントやヘルプはありません。

私のウェブサイトでこのHTMLコードを使用するには？

HTML：

はCSS：リフレッシュページの後

.sk-cube-grid { 
    width: 40px; 
    height: 40px; 
    margin: 100px auto; 
} 

.sk-cube-grid .sk-cube { 
    width: 33%; 
    height: 33%; 
    background-color: #333; 
    float: left; 
    -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
    animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
} 
.sk-cube-grid .sk-cube1 { 
    -webkit-animation-delay: 0.2s; 
    animation-delay: 0.2s; } 
.sk-cube-grid .sk-cube2 { 
    -webkit-animation-delay: 0.3s; 
    animation-delay: 0.3s; } 
.sk-cube-grid .sk-cube3 { 
    -webkit-animation-delay: 0.4s; 
    animation-delay: 0.4s; } 
.sk-cube-grid .sk-cube4 { 
    -webkit-animation-delay: 0.1s; 
    animation-delay: 0.1s; } 
.sk-cube-grid .sk-cube5 { 
    -webkit-animation-delay: 0.2s; 
    animation-delay: 0.2s; } 
.sk-cube-grid .sk-cube6 { 
    -webkit-animation-delay: 0.3s; 
    animation-delay: 0.3s; } 
.sk-cube-grid .sk-cube7 { 
    -webkit-animation-delay: 0s; 
    animation-delay: 0s; } 
.sk-cube-grid .sk-cube8 { 
    -webkit-animation-delay: 0.1s; 
    animation-delay: 0.1s; } 
.sk-cube-grid .sk-cube9 { 
    -webkit-animation-delay: 0.2s; 
    animation-delay: 0.2s; } 

@-webkit-keyframes sk-cubeGridScaleDelay { 
    0%, 70%, 100% { 
     -webkit-transform: scale3D(1, 1, 1); 
     transform: scale3D(1, 1, 1); 
    } 35% { 
      -webkit-transform: scale3D(0, 0, 1); 
      transform: scale3D(0, 0, 1); 
     } 
} 

@keyframes sk-cubeGridScaleDelay { 
    0%, 70%, 100% { 
     -webkit-transform: scale3D(1, 1, 1); 
     transform: scale3D(1, 1, 1); 
    } 35% { 
      -webkit-transform: scale3D(0, 0, 1); 
      transform: scale3D(0, 0, 1); 
     } 
}

、このコードは動作しません...

出典

2016-10-26 mySun

あなたが一番上にソースをクリックすると、それはあなたのソースを提供します。コピーして貼り付けてください。 – wrldbt

ローダーを含む 'div'を表示または非表示にするために、何らかのイベントをリッスンするJavaScriptロジックが必要になります。 –

さらに、View in GitHubリンクをクリックすると、使用方法の説明があるhttps://github.com/tobiasahlin/SpinKitに移動します。 [質問]に示されているように、スタックオーバーフローを尋ねる前にいくつかの調査をしてください。 –

文書の頭の中でCSSをインラインで追加します。次に、あなたのCSSをフッタの下に追加するか、閉じたbodyタグの前に追加します（適切なHTMLではありませんが、うまくいきます）。

プリローダーdivのcssクラスを追加し、固定された位置、上端、右端、下端、すべてを0にし、高いZインデックスを持つようにします。そのdivにプリローダー用のHTMLを配置します。

次に、CSSの後ろにjaファイルを追加します。そうでない場合は、末尾のbodyタグの前にjaファイルを追加します。

次に、上に含まれるdivを表示しないjqueryまたはJavaScriptが必要です。

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<html> 
 

 
<head> 
 
    HEAD STUFF 
 
    <style> 
 
    .sk-cube-grid { 
 
     width: 40px; 
 
     height: 40px; 
 
     margin: 100px auto; 
 
    } 
 
    .sk-cube-grid .sk-cube { 
 
     width: 33%; 
 
     height: 33%; 
 
     background-color: #333; 
 
     float: left; 
 
     -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
 
     animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
 
    } 
 
    .sk-cube-grid .sk-cube1 { 
 
     -webkit-animation-delay: 0.2s; 
 
     animation-delay: 0.2s; 
 
    } 
 
    .sk-cube-grid .sk-cube2 { 
 
     -webkit-animation-delay: 0.3s; 
 
     animation-delay: 0.3s; 
 
    } 
 
    .sk-cube-grid .sk-cube3 { 
 
     -webkit-animation-delay: 0.4s; 
 
     animation-delay: 0.4s; 
 
    } 
 
    .sk-cube-grid .sk-cube4 { 
 
     -webkit-animation-delay: 0.1s; 
 
     animation-delay: 0.1s; 
 
    } 
 
    .sk-cube-grid .sk-cube5 { 
 
     -webkit-animation-delay: 0.2s; 
 
     animation-delay: 0.2s; 
 
    } 
 
    .sk-cube-grid .sk-cube6 { 
 
     -webkit-animation-delay: 0.3s; 
 
     animation-delay: 0.3s; 
 
    } 
 
    .sk-cube-grid .sk-cube7 { 
 
     -webkit-animation-delay: 0s; 
 
     animation-delay: 0s; 
 
    } 
 
    .sk-cube-grid .sk-cube8 { 
 
     -webkit-animation-delay: 0.1s; 
 
     animation-delay: 0.1s; 
 
    } 
 
    .sk-cube-grid .sk-cube9 { 
 
     -webkit-animation-delay: 0.2s; 
 
     animation-delay: 0.2s; 
 
    } 
 
    @-webkit-keyframes sk-cubeGridScaleDelay { 
 
     0%, 70%, 100% { 
 
     -webkit-transform: scale3D(1, 1, 1); 
 
     transform: scale3D(1, 1, 1); 
 
     } 
 
     35% { 
 
     -webkit-transform: scale3D(0, 0, 1); 
 
     transform: scale3D(0, 0, 1); 
 
     } 
 
    } 
 
    @keyframes sk-cubeGridScaleDelay { 
 
     0%, 70%, 100% { 
 
     -webkit-transform: scale3D(1, 1, 1); 
 
     transform: scale3D(1, 1, 1); 
 
     } 
 
     35% { 
 
     -webkit-transform: scale3D(0, 0, 1); 
 
     transform: scale3D(0, 0, 1); 
 
     } 
 
    } 
 
    div#preloader { 
 
     position: fixed; 
 
     top: 0; 
 
     left: 0; 
 
     right: 0; 
 
     bottom: 0; 
 
     z-index: 999; 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="preloader"> 
 
    <div class="sk-cube-grid"> 
 
     <div class="sk-cube sk-cube1"></div> 
 
     <div class="sk-cube sk-cube2"></div> 
 
     <div class="sk-cube sk-cube3"></div> 
 
     <div class="sk-cube sk-cube4"></div> 
 
     <div class="sk-cube sk-cube5"></div> 
 
     <div class="sk-cube sk-cube6"></div> 
 
     <div class="sk-cube sk-cube7"></div> 
 
     <div class="sk-cube sk-cube8"></div> 
 
     <div class="sk-cube sk-cube9"></div> 
 
    </div> 
 
    </div> 
 
    
 
    
 
    HAVE YOUR MAIN BODY HERE 
 
    
 
    
 
    CSS FILE LINKS & JS FILE LINKS GO HERE (YOU NEED JQUERY) 
 
    <script> 
 
    $("#preloader").fadeOut(300); 
 
    </script> 
 
</body> 
 

 
</html>

出典

2016-10-26 18:25:28 Shiv

ありがとう、サンプルコードを見せてください。 – mySun

私の更新を見てください。人々があなたのためにすべてをやることを期待しないでください、私はちょうどいい気分にあります。 @Shayvard – Shiv

新しい更新プログラムは、あなたが必要とする最小の労力で完全な実例を持っています。あなたは大歓迎です。 :)この回答を受け入れてupvoteそれを覚えてください：D – Shiv

私のウェブサイトでCSSローダーを使用するには？

答えて

関連する問題