目次
jQueryでローディングアニメーションの設定
「jquery」でローディングアニメーションの設定方法をのご紹介!!
「jquery.js」をダウンロード致します。
ダウンロード先
HTMLを記載
下記のソースを追加してください。
CSSを記載
下記のソースを追加してください。
/********************
loading effects
********************/
.loadingAnim{
position: fixed;
z-index: 100;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
text-align: center;
}
.loadingAnim:before,
.loadingAnim:after{
line-height: 1;
position: fixed;
z-index: 99;
right: 0;
left: 0;
display: block;
width: 100%;
height: 50%;
margin-right: auto;
margin-left: auto;
content: ' ';
transition: all .3s cubic-bezier(.785, .135, .15, .86) 0s;
transition-delay: .3s;
background-color: #be8a40;
}
.loadingAnim:before{
top: 0;
}
.loadingAnim:after{
bottom: 0;
}
.loaded .loadingAnim:before{
height: 0;
-webkit-transform: translateY(-1%);
-ms-transform: translateY(-1%);
transform: translateY(-1%);
}
.loaded .loadingAnim:after{
height: 0;
-webkit-transform: translateY(1%);
-ms-transform: translateY(1%);
transform: translateY(1%);
}
.loadingAnim_line{
line-height: 1;
position: fixed;
z-index: 100;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: inline-block;
overflow: hidden;
width: 150px;
height: 1.25em;
margin: auto;
transition: all .3s cubic-bezier(.785, .135, .15, .86) 0s;
transition-delay: .6s;
text-align: center;
}
.loadingAnim_line:after{
position: absolute;
z-index: 100;
top: 0;
bottom: 0;
left: 0;
display: block;
width: 0;
height: 100%;
margin: auto auto auto 0;
content: ' ';
-webkit-animation: loadingAnim 2s ease-in-out .1s infinite normal backwards;
animation: loadingAnim 2s ease-in-out .1s infinite normal backwards;
background-color: #fff;
will-change: transform, width;
}
.loadingAnim_line:before{
font-family: 'Poppins', sans-serif;
font-size: 1.25em;
font-weight: bold;
font-style: normal;
line-height: 1;
display: block;
content: 'LOADING';
-webkit-animation: loadingAnim_text 1s ease .1s infinite alternate both;
animation: loadingAnim_text 1s ease .1s infinite alternate both;
letter-spacing: .5em;
color: #fff;
will-change: opacity;
}
.loaded .loadingAnim_line{
overflow: hidden;
height: 0;
}
.loaded .loadingAnim_line:after,
.loaded .loadingAnim_line:before{
-webkit-animation: none;
animation: none;
}
.loaded .loadingAnim_line:before{
content: 'LOADED!';
}
Javascriptを記載
下記のソースを追加してください。
※読み込みのcssはサンプルのリンク先を参照してください。
サンプル
下記のソースをお使いください。
表示サンプルを掲載いたします。
詳細内容はこちら(ローディングアニメーションを見る)
参考になるサイト
Loaders.css
Single Element CSS Spinners
SpinKit
CSS Loader
PACE
SVG Loaders
30 CSS Loading Animations for your Website
参考サイト：ツーブロッカ
参考サイト：Web Design Trends
