Zenn
🕑

【Web制作】jQueryによるLoading！

2021/05/09に公開
CSS
HTML
JavaScript
jQuery
Scss
tech

Loading画面

Web制作でよく見られるLoading画面を実装してみました。
※reset.scssは以下のサイトのものを使用しています。

実装例

HTML,SCSS,JSで実装しています。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css" type="text/css">
  <title>Loading</title>
</head>
<body>
  <div id="loader-bg">
    <div id="loader">
      <img src="images/loader.gif" alt="Now Loading...">
      <br>Now Loading...
    </div>
  </div>

  <main>
    <h1>画面を読み込みました！</h1>
    <img src="images/sea.jpeg" alt="海の画像">
  </main>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
</body>
</html>
style.scss
@charset "utf-8";
@import "_reset.scss";

main {
    margin: 10px;
}

#loader-bg {
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
}

#loader {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    color: #fff;
}
script.js
$(function() {
    var height = $(window).height();
    $('#main').css('display', 'none');
    $('#loader-bg ,#loader').height(height).css('display','block');
});

// 全ての読み込みが完了したら実行
$(window).load(function () {
    $('#loader-bg').delay(1000).fadeOut(800);
    $('#main').css('display', 'block');
});

動作確認

.movを.gifに変換してアップロードしたため、速度が遅いですが、ブラウザだと正常です。

Discussion