[CSS] NowLoadingサンプル : Spinner

2022年8月13日

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

eyecatch CSSを自由自在に操ることができるようになったら、それはデザインが無敵に近くなるでしょう。 そんなスーパーマンを夢見ている、ユゲタです。 今回は、今となっては懐かしの、Windows8の起動画面で、面白いLoadingアニメーションがあったので、cssで再現してみました。 覚えている人はもしかすると「懐かしい!」と感じる人もいるかもしれません。

ソース

index.html <div class='spinner'> <div class="circle orbit-1"></div> <div class="circle orbit-2"></div> <div class="circle orbit-3"></div> <div class="circle orbit-4"></div> <div class="circle orbit-5"></div> </div> <style> .spinner{ width:64px; height:64px; margin:8px; position:relative; } .spinner .circle{ width:100%; height:100%; position:absolute; top:0; left:0; transform-origin:center; animation-name: anim-spinner; animation-duration: 5.5s; animation-iteration-count: infinite; opacity:0; } .spinner .circle::before{ content:''; width:13%; height:13%; background-color:blue; border-radius:50%; position:absolute; top:0; left:50%; transform:translateX(-50%); } .spinner .orbit-1{animation-delay: 0s;} .spinner .orbit-2{animation-delay: 0.24s;} .spinner .orbit-3{animation-delay: 0.48s;} .spinner .orbit-4{animation-delay: 0.72s;} .spinner .orbit-5{animation-delay: 0.96s;} @keyframes anim-spinner{ 0% { transform:rotate(225deg); opacity: 1; animation-timing-function: ease-out; } 7% { transform:rotate(345deg); animation-timing-function: linear; } 30% { transform:rotate(455deg); animation-timing-function: ease-in-out; } 39% { transform:rotate(690deg); animation-timing-function: linear; } 70% { transform:rotate(815deg); opacity: 1; animation-timing-function: ease-out; } 75% { transform:rotate(945deg); animation-timing-function: ease-out; } 76% { transform:rotate(945deg); opacity: 0; } 100% { transform:rotate(945deg); opacity: 0; } } </style>

サンプル

解説

構成は非常にシンプルで、5つの玉の要素をdivで囲って作っているだけです。 それぞれの玉は全く同じ構成で、before疑似属性を使って、描く円の上部に小さな玉を作っています。 それをtransform-originをcenterにした状態でくるくると回るanimationをセットしている状態です。 そして、5つの玉をanimation-delayを使って、少しずつ遅らせて動かすことによって、windows8のloadingアニメーションが出来がります。

関連リンク

他のNowLoadingも見る

このブログを検索

ごあいさつ

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