[CSS] NowLoadingサンプル : Bar

自分の信念を簡単に曲げることができる、ユゲタです。 他人が何かしら良い事をやっていたり、面白い事をやっていると、それを自分がこれまでやりたくないと思って信念を持っていたけど、なんとなくやっちゃうっていうのは、人の性なのかもしれませんね。 プログラミングにおいて、「車輪の再発明」はご法度だぞ！とこれまで何度も聞いて、そう思っていたけれど、なんか最近、レッドオーシャンのビジネス領域のwebサービスを自分が使いやすいと思うシステムで作るのが、なんとなく面白い。 Baseもメルカリも、限りなく一人勝ちしていると思われていたレッドオーシャン領域で、のしあがって、上位のポジショニングを勝ち取っている事を考えると、 レッドオーシャンの上位であぐらをかいている企業は、ホントあっという間に塗り替えられちゃいますよ。 というか、後発で開発された製品、サービスの方がはるかに機能がいいのは間違いないので、そういう開発を個人でやってみるというのも、なかなか面白い取り組みかもしれませんね。 そんな無駄話はどーでもいいんですが、今回は、NowLoadingのCSSアニメサンプル「Bar」を公開します。 シンプルでいいでしょ？

ソース

<div class="loading"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </div> <style> .loading{ position:relative; width:128px; line-height:60px; } .loading > .bar{ display:inline-block; width:8px; height:48px; transform:scale(1.0 , 0.5); background-color:#1DA9F1; margin:2px 4px; transform-origin: bottom; animation: anim-bar 1s ease-in-out infinite; } .loading > .bar:nth-child(1){ animation-delay: 0s; } .loading > .bar:nth-child(2){ animation-delay: 0.2s; } .loading > .bar:nth-child(3){ animation-delay: 0.4s; } .loading > .bar:nth-child(4){ animation-delay: 0.6s; } @keyframes anim-bar{ 0%{ transform:scale(1.0 , 0.5); } 50%{ transform:scale(1.0 , 0.5); } 75%{ transform:scale(1.0 , 1.0); } 100%{ transform:scale(1.0 , 0.5); } } </style>

デモ

関連リンク

他のNowLoadingも見る