新規登録画面に登録済データを呼び出しセットする機能をつけてみる3

今回はローディングアニメーションのスタイルシートを実装してみたいと思います。

昔、開発したWEBシステムはローディングアニメーションつけてないこと割とあったのですが、ハングっているのか読み込んでるのかわからんとのことで、顧客からクレームうけること結構ありましたね。

1. app.balde.phpのheadタグ内に以下のCSSを配置します。

---

<style type="text/css">
    .hide {
        display: none;
    }
    .loading {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,.5);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
    }
    .circle{
        width:100px;
        height:100px;
        border-radius:150px;
        border:15px solid #fff;
        border-top-color:rgba(0,0,0,0.3);
        box-sizing:border-box;
        position:absolute;
        top:40%;
        left:47%;
        animation:circle 1s linear infinite;
        -webkit-animation:circle 1s linear infinite;
    }
    @keyframes circle{
        0%{transform:rotate(0deg)}
        100%{transform:rotate(360deg)}
    }
    @-webkit-keyframes circle{
        0%{-webkit-transform:rotate(0deg)}
        100%{-webkit-transform:rotate(360deg)}
    }
    tr:hover td {
        background-color: #d9efff;
    }
</style>

正直、これは拾い物です。とても小生の脳みそでは思いつきません。できたものを見ればなんとなくわかりますが、いちから作れと言われればまず無理です。

.loadingセレクタの部分はアニメーションの位置関連を設定し、.circleセレクタのところで、実際のアニメーションを記述してます。

これらのCSSをjavascriptで制御しローディングアニメーションを表示させたり隠したりします。

最後のtr:hoverのところは、ローディングアニメーションと全く関係なく、テーブルの行をマウスでホバーさせた時にバックグランドのカラーを変更したかったので追加しました。ちなみに、これだとすべてのテーブルに適用されてしまうので、テーブルにIdつけて、id名まで指定するほうがいいでしょう。‘

2. まとめ

---

こういったCSSをふんだんに使ったものは、ブラウザ依存するからといって、ローディングアニメーションはGIF画像とかでつくることが多かったのですが、最近のブラウザなら特に問題ないんじゃないでしょうかね。

今日はここまで。