Loading

loadingについて

<!--ローディング-->
<div id="loading">
<img src="images/logo.png" alt="Loading">
<div class="progress-container">
<div class="progress-bar"></div>
</div>
</div>

主なスタイルは

cssフォルダのstyle.cssから「loading」でテキスト検索してみて下さい。詳しい解説もあります。

ローディングにかける時間は

スタイル中の2箇所ある「2s」の部分で調整できます。2sは2秒のことです。
コンテンツのサイズを実際に測っているわけではないので、コンテンツのボリュームに合わせて増減して下さい。容量の軽い画像がメインのサイトなら「1s」でも十分だと思います。
実はなくても問題ないのですが、バラバラとコンテンツが表示されていくのが気になるのでつくってみました。

テンプレート編集中にローディングが邪魔な場合

サーバーにアップすれば、トップページのローディングは最初の一回のみ表示されます。
ただし、ブラウザを一旦閉じたりすると、再度トップページを開いた際にローディングが出ます。

ローカルで編集中の場合、ローディングが少し出てくる場合もありますので、わずらわしい場合は編集中だけhtmlコードの下の方にある「ローディング」を一旦コメントアウトしておいて下さい。