技術をかじる猫

適当に気になった技術や言語、思ったこと考えた事など。

ページをロードする合間に、「now loading」を表示する。

jQuery 使ってると、動的コンテンツ挿入楽でいいね。

// ローディング開始時
$('body').append('<div id="progress">now loading.</div>');

// ローディング完了時
$('#progress').remove();

そして、このスタイル定義。

#progress {
    -webkit-border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color:     white;
    font-size: 18px;
    font-weight: bold;
    height: 80px;
    padding: auto;
    line-height:80px;
    margin: 0 auto;
    text-align: center;
    top:120px;
    width:120px;
}

これで画面中央にざくっとローディングのダイアログ(?)が表示される。