[CSS] NowLoadingサンプル : Bar

2022年8月7日

CSS テクノロジー プログラミング 特集

eyecatch 自分の信念を簡単に曲げることができる、ユゲタです。 他人が何かしら良い事をやっていたり、面白い事をやっていると、それを自分がこれまでやりたくないと思って信念を持っていたけど、なんとなくやっちゃうっていうのは、人の性なのかもしれませんね。 プログラミングにおいて、「車輪の再発明」はご法度だぞ!とこれまで何度も聞いて、そう思っていたけれど、なんか最近、レッドオーシャンのビジネス領域の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も見る

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。