アトリエロワ

サイトにローディングを実装するjavascript

サイト（ホームページ）にローディングを実装する

HTML

全てのページでローディングする必要がないときは、HOME PAGE（TOPページ）にのみ記載

<div id="loading">
<div id="loading-in">
    <img src="../images/bg_01.png">
</div>
</div>

CSS

画像を回転させています

#loading {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  display: table;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;

}
#loading-in {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
#loading img {
  width: 100px;
  animation: rotate-anime 2s linear infinite;
}

画像を【Y軸回転】したいときはcssに下記を追加

@keyframes rotate-anime {
  0% {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
  }

javascript

//読み込みが完了したら実行
$(window).on('load',function () {
  // ローディングが10秒以内で終わる場合、読み込み完了後ローディング非表示
  endLoading();
});

//10秒経過したら下記で上記の処理を上書きして強制終了
$(function(){
  setTimeout('endLoading()', 10000);
});

//ローディング非表示
function endLoading(){
  // 1秒かけてロゴを非表示にし、その後0.8秒かけて背景を非表示にする
  $('#loading img').fadeOut(1000, function(){
    $('#loading').fadeOut(800);
  });
}

HOME > javascript > サイトにローディングを実装するjavascript

javascript

javascript

+ More