物事の本筋を見極めることができる男、ユゲタです。
NowLoadingって、待っている間のCMみたいな役割があり、その昔CDで起動していたプレステも、かならずLoadingの時間が必要だったし、
最近では、ネットでも、データやモジュール読み込みでLoadingが必要になります。
クルクル回るだけのアニメーションでもいいんですが、最悪なのは、何もアニメーションせずに、「NowLoading」とだけ書かれた文字が表示されていて、ピタっと画面が止まっている状態ですね。
ユーザーからすると、ハングアップしたのではないかと心配になるのも当たり前ですよね。
理想系は、Loadingしている感覚がなくなる様な何かしらの表示をするのが重要ですが、そのためのデータを読み込むために事前に重たいデータを読み込むなんて事になったら、本末転倒です。
このおまたせ時間を最もうまく使っているのは、ディズニーランド・シーじゃないでしょうか？
だって、数時間待ちをさせない工夫が園内の至る所に施されていて、あれをデジタルで展開できる思考があれば、めちゃくちゃ面白いゲームやコンテンツが作れると思うんだけどな〜。
概要
今回は、いたってシンプルだけど、なんか読み込んでる感がでる、ポイント３つだけのアニメーションです。
コードの軽さも魅力的ですが、シンプルなので汎用性も無限大です。
画面の中央で目立つ様に主張してもいいし、がめんの隅っこで、ひっそりと読み込みを表現してもいいですね。
何かしらの文字と一緒に設置しておけば、もはやユーザーから、ハングアップしているというクレームは起きないでしょう。
あ、でも実際にハングアップさせちゃだめですけどね。
ソース
sample.html
<div class="point">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<style>
.point{
position:relative;
width:128px;
line-height:60px;
}
.point > .dot{
display:inline-block;
width:8px;
height:8px;
border-radius:50%;
background-color:#1DA9F1;
margin:8px;
animation: anim-dot 1s ease-in-out infinite;
}
.point > .dot:nth-child(1){
animation-delay: 0s;
}
.point > .dot:nth-child(2){
animation-delay: 0.33s;
}
.point > .dot:nth-child(3){
animation-delay: 0.66s;
}
@keyframes anim-dot{
0%{
transform:scale(1.0);
}
30%{
transform:scale(1.0);
}
65%{
transform:scale(2.0);
}
100%{
transform:scale(1.0);
}
}
</style>
デモ
関連リンク
他のNowLoadingも見る
