最近のホームページでは、動画や画像がたくさん使われるようになってきています。ただ、通信環境やデバイスによって表示させるまで時間がかかる時に、読込中ですよーって表示されるアニメーションを作ってみたいと思います。
こちらのサイトでは、〇がくるくると描かれることでロード中を表現していますね。
目次
ロード中ですよー!をCSSで表現する
とりあえずHTMLを作ります。
<section class="container">
<div class="loader"></div>
</section>
CSSで〇作ります。
.loader {
width: 40px;
height: 40px;
/* 丸み */
border-radius: 50%;
/* 線の太さ */
border: solid 4px;
}

丸の線に分割して、透明度があるところをつくります。
.loader {
width: 40px;
height: 40px;
/* 丸み */
border-radius: 50%;
/* 線の太さ */
border: solid 4px;
/* 線の色 */
border-color: #000000 #00000010 #00000010;
}

次に、animationとkeyframe を追加してアニメーションがくりかえし実行されるようにします。
.loader {
width: 40px;
height: 40px;
/* 丸み */
border-radius: 50%;
/* 線の太さ */
border: solid 4px;
/* 線の色 */
border-color: #000000 #00000010 #00000010;
/* keyframes */
animation-name: spin;
animation-duration: 1.5s;
/* 無限にくりかえす */
animation-iteration-count: infinite;
/* 一定の速度でくりかえす */
animation-timing-function: linear;
}
@keyframes spin {
to {
/* 時計まわりに360度回す */
transform: rotate(360deg);
}
}

画像なので分かりませんが、クルクル回っているようになりました。下のリンク先へいくと動きがわかります。
コメント