[CSS] NowLoadingサンプル : Rotation

Loadingアニメクリエーターの、ユゲタです。 非常にシンプルなLoadingアニメーションを掲載するのを忘れていました。 ボールがくるくると回っているように見えて、読み込んでますよ雰囲気が存分に表現されているシンプル・イズ・ベストなLoadingアニメです。 それぞれのボールを.dotとして、タグで書き込んでいますが、before,afterを使えば、12個のタグを4個に減らせるのですが、今回はシンプル構成にしています。 Javascriptでタグをcreateしてみてももう少しシンプルにできるかもですね。 またh、sassとか・・・ でも、今回はとにかくシンプルに・・・がテーマでした。 サイズなどは適宜変更してお使いください。

デモ

ソース

html <div class="rotate"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> css .rotate{ position:relative; width:128px; height:128px; } .rotate > .dot{ position:absolute; width:100%; height:100%; top:0; left:0; } .rotate > .dot:after{ content:""; position:absolute; left:calc(50% - 10px); top:0; width:15%; height:15%; border-radius:50%; background-color:black; border:0; margin:0; padding:0; font-size:0; animation: anim-rotate-dot 1.2s ease-in-out infinite; } .rotate > .dot:nth-child(1){transform:rotate(0deg);} .rotate > .dot:nth-child(1):after{animation-delay: 0s;} .rotate > .dot:nth-child(2){transform:rotate(30deg);} .rotate > .dot:nth-child(2):after{animation-delay: -1.1s;} .rotate > .dot:nth-child(3){transform:rotate(60deg);} .rotate > .dot:nth-child(3):after{animation-delay: -1.0s;} .rotate > .dot:nth-child(4){transform:rotate(90deg);} .rotate > .dot:nth-child(4):after{animation-delay: -0.9s;} .rotate > .dot:nth-child(5){transform:rotate(120deg);} .rotate > .dot:nth-child(5):after{animation-delay: -0.8s;} .rotate > .dot:nth-child(6){transform:rotate(150deg);} .rotate > .dot:nth-child(6):after{animation-delay: -0.7s;} .rotate > .dot:nth-child(7){transform:rotate(180deg);} .rotate > .dot:nth-child(7):after{animation-delay: -0.6s;} .rotate > .dot:nth-child(8){transform:rotate(210deg);} .rotate > .dot:nth-child(8):after{animation-delay: -0.5s;} .rotate > .dot:nth-child(9){transform:rotate(240deg);} .rotate > .dot:nth-child(9):after{animation-delay: -0.4s;} .rotate > .dot:nth-child(10){transform:rotate(270deg);} .rotate > .dot:nth-child(10):after{animation-delay: -0.3s;} .rotate > .dot:nth-child(11){transform:rotate(300deg);} .rotate > .dot:nth-child(11):after{animation-delay: -0.2s;} .rotate > .dot:nth-child(12){transform:rotate(330deg);} .rotate > .dot:nth-child(12):after{animation-delay: -0.1s;} @keyframes anim-rotate-dot{ 0%{opacity:0.0;} 35%{opacity:1.0;} 70%{opacity:0.0;} 100%{opacity:0.0;} }

おまけ

htmlが同じ構成で、少しcssを変えただけで、印象を変えたバージョンも追加しておきます。 css .rotate{ position:relative; width:128px; height:128px; } .rotate > .dot{ position:absolute; width:100%; height:100%; top:0; left:0; } .rotate > .dot:after{ content:""; position:absolute; left:calc(50% - 10px); top:0; width:15%; height:15%; border-radius:50%; background-color:black; border:0; margin:0; padding:0; font-size:0; animation: rotate-ex-dot 1.2s ease-in-out infinite; } .rotate > .dot:nth-child(1){transform:rotate(0deg);} .rotate > .dot:nth-child(1):after{animation-delay: 0s;} .rotate > .dot:nth-child(2){transform:rotate(30deg);} .rotate > .dot:nth-child(2):after{animation-delay: -1.1s;} .rotate > .dot:nth-child(3){transform:rotate(60deg);} .rotate > .dot:nth-child(3):after{animation-delay: -1.0s;} .rotate > .dot:nth-child(4){transform:rotate(90deg);} .rotate > .dot:nth-child(4):after{animation-delay: -0.9s;} .rotate > .dot:nth-child(5){transform:rotate(120deg);} .rotate > .dot:nth-child(5):after{animation-delay: -0.8s;} .rotate > .dot:nth-child(6){transform:rotate(150deg);} .rotate > .dot:nth-child(6):after{animation-delay: -0.7s;} .rotate > .dot:nth-child(7){transform:rotate(180deg);} .rotate > .dot:nth-child(7):after{animation-delay: -0.6s;} .rotate > .dot:nth-child(8){transform:rotate(210deg);} .rotate > .dot:nth-child(8):after{animation-delay: -0.5s;} .rotate > .dot:nth-child(9){transform:rotate(240deg);} .rotate > .dot:nth-child(9):after{animation-delay: -0.4s;} .rotate > .dot:nth-child(10){transform:rotate(270deg);} .rotate > .dot:nth-child(10):after{animation-delay: -0.3s;} .rotate > .dot:nth-child(11){transform:rotate(300deg);} .rotate > .dot:nth-child(11):after{animation-delay: -0.2s;} .rotate > .dot:nth-child(12){transform:rotate(330deg);} .rotate > .dot:nth-child(12):after{animation-delay: -0.1s;} @keyframes rotate-ex-dot{ 0%{transform:scale(0.0);} 35%{transform:scale(1.0);} 70%{transform:scale(0.0);} 100%{transform:scale(0.0);} }

関連リンク

他のNowLoadingも見る