結構初期の頃──ライブドアブログに引っ越す前──から導入しようしようと思いつつ先延ばしにしていた読込画面を、このたびやっと実装しました。

画像が多かったりで比較的重いブログなので、表示に時間がかかることがあり、閲覧者様のストレスが少しでも軽減されればと思います。

今のところ非常にシンプルなデザインなんですが、こんなんでも CSS がうまく設定できなくて、ちょっとマヌケなレイアウトになっているのは御容赦のほどを。

なお、くるくる回るアイコンはこちらのサイト様のフリー画像をそのまま流用させていただきました。
ここに記して御礼申し上げます。


以下、参考までにソースを

目次

HTML

<head>タグ内部に 
<link rel="stylesheet" href="CSSファイルのURL" type="text/css">
<script src="JavaScriptファイルのURL"></script>
<body>開始タグ直下に 
<div id="loader-bg">
    <div id="loader">
        <h1 id="loader-h"><$BlogTitle$></h1>
        <div class="circleH"></div>
        <p id="loader-p">Now Loading...</p>
    </div>
</div>
画像はいちばん内側の<div>タグの CSS で背景に設定していますが、この部分に直接<img>タグで指定しても構いません。

CSS

色などデザイン部分は省略しています 
#loader-bg {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9998;
}
#loader {
  margin:10% auto;
  width: 15em;
  display: block;
  text-align: center;
  z-index: 9999;
}
.circleH{
  width:180px; height: 180px;
  background: url('画像のURL') no-repeat;
  background-size: contain;
  display:table-cell;
  vertical-aligh: bottom;
  text-align:center;
}
.circleH:before{content:' '}
loading-ld
↑デスクトップ上で同じCSS設定で表示させた画面。
なぜかこれが再現できてませんorz

JavaScript

jQueryを読み込んでいます。
普通のJavaScriptだけだともうちょと複雑になってしまうので、便利ですね。 
$(function() {
  var h = $(window).height();
  $('#wrap').css('display','none');
  $('#loader-bg ,#loader').height(h).css('display','block');
});
$(window).load(function () {
    setTimeout('stopload()',3000);
});
function stopload(){
  $('#wrap').css('display','block');
  $('#loader-bg').delay(900).fadeOut(800);
  $('#loader').delay(600).fadeOut(300);
}
〖イメージ図〗(PC以外ではうまく表示されないかもしれません)

①wrap
②loader-bg
③loader

一萬人の麓路()
Now Loading...
①の wrap というのがこのブログのページ画面です。まずこれを非表示にし、その画面の高さに、②loader-bg 及び ③loader を合せて表示します。
②は目隠しで、③は画面読込中に表示する文字とアイコンです。
ブラウザの読込が終ると、③→②の順にフェードアウトして、①のブログ画面だけが表示されます。

SVG

ついでに画像を定義しているSVGファイルの中身を見てみましょう。 
<svg width="135" height="135" viewBox="0 0 135 135" xmlns="http://www.w3.org/2000/svg" fill="#fff">
    <path d="(略)">
        <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 67 67"
            to="-360 67 67"
            dur="2.5s"
            repeatCount="indefinite"/>
    </path>
    <path d="(略)">
        <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 67 67"
            to="360 67 67"
            dur="8s"
            repeatCount="indefinite"/>
    </path>
</svg>
<svg>タグの fill属性で描画色を指定しています。
上の例では #fff つまり白。ここを書き換えれば別の色にできますね。
あと、80×80 という画像をダウンロードしたのに、SVGファイルでは 135×135 になっています。
まあどんな拡縮処理をしても画質が劣化しないのが SVG のいいところ(実際、弊ブログでは CSS の方で 180×180 にしています)。
またここでは 
<svg
            style="fill-opacity: 0.7;"
            style="stroke-opacity: 0.85;"
>
などと、style属性で描画色や輪郭線色の不透明度を指定できるようです。

<animateTransform>タグの from属性、to属性は、角度と回転の中心座標、dur属性は一周する時間。
二つの<path>タグがあり、周期から推測すると一つ目が外回りの図形、二つ目が内回りの図形と思われます。
角度に負号をつけた方が時計回り、つけていない方が反時計回りなのは、数学と同じですね。

このように、SVG は HTMLタグだけでアニメーションを表現できる、すばらな画像形式です。
ただし、Internet Explorer と Edge では W3C の勧告から十四年が経過している現在に至ってなお十分なサポートはされておらず、特に IE8以前では表示すらされません。
弊ブログの訪問者の四割以上が IEユーザーなので、できるだけ IE対策はしているつもりですが、どうにもならないこともあるのです…
タグ ：
#SVG
#JavaScript