HTML・CSSだけでLoadingのクールなアニメーションを作成します。
出典は、最近お気に入りの海外「プログラミングYoutuber（？）」である「Dark Code」からです。
もし、あなたも気に入ったら、是非ともチャンネル登録してみて下さい。
最終的に出来るアニメーション
Gifだと少々カクカクしてますが、WordpressのHTMLブロックに埋め込んだ例は以下の通りです。
HTMLとCSSだけでアニメーション
まずは、以下のYoutube動画を見て下さい。(音に注意！！)
５分ほどの動画ですが、EDMミュージックに乗せて、あっという間に「Loading」アニメーションが出来上がっていきます。とっても「クール」ですよね！！
Progateの初級と中級が完了したレベルであれば、動画を見るだけでクローン出来ると思いますが、簡単にポイントだけ解説します。
HTMLファイルのコード
<!-- Loading ここから-->
<div class="loading">
<span>Loading...</span>
</div>
<!-- ここまで-->
HTMLで追加するコードはこれだけです。
「Loading」クラスを作成して「div」で囲み、その中で「Loading…」という文字を「span」タグで囲んでいます。
「loading」にアニメーションを設定すると、文字も含めてクルクルと回ってしまう。
なので、「loading」に加え、「span」に更に逆回転のアニメーションを追加していきます。
円環の作成（赤）
/* 円環の作成（赤色） */
.loading{
width: 200px;
height: 200px;
box-sizing: border-box;
border-radius: 50%;
border-top: 10px solid #e74c4c;
position: relative;
}
円環の作成をここで行なっています。
「border-radius」を50%とするのがポイントです。また、「position: relative;」としているのは、後ほどの擬似要素のためです。
CSSの擬似要素で円環を作成
/* CSSの擬似要素で円環を作成 */
.loading::before, .loading::after{
content: '';
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: -10px;
box-sizing: border-box;
border-radius: 50%;
}
/* オレンジの円環（１２０度時計回りに回転） */
.loading::before{
border-top:10px solid #e67e22;
transform: rotate(120deg);
}
/* ブルーの円環（２4０度時計回りに回転） */
.loading::after{
border-top:10px solid #3498db;
transform: rotate(240deg);
}
CSSの擬似要素で円環を重ねて作成します。
そして、オレンジの円環は時計回りに120度回転させ、ブルーの円環は時計回りに240度回転させます。
擬似要素のおまけ
疑似要素には、コロンが１つ「:before」の書き方と、コロンが２つ「::before」の書き方があります。
CSSの最新規格であるCSS３では疑似要素はコロンを２つ書く決まりになっています。
擬似要素って何ぞや？という方は、以下のページを参考にして下さい。
擬似要素は、「HTMLコードを汚すことなく色々な表現が出来る」というメリットがあります。
カラーコードを取得
カラーコードを取得するのに使用しているサイトはこちらです。
マウスでクリックすると、カラーコードをコピーしてくれます。
アニメーションの定義
/*アニメーションa1(時計回り回転)*/
@keyframes a1{
to{
transform: rotate(360deg);
}
}
/*アニメーションa2(半時計回り回転)*/
@keyframes a2{
to{
transform: rotate(-360deg);
}
}
アニメーションを定義し、「.loading」と「.loading span」にそれぞれのアニメーションを適用していきます。
「a1」だけだと文字も含めて回転してしまうので、「a2」で文字を逆回転させています。
アニメーションの適用の仕方
例えば、loadingクラスにアニメーションを適用する場合は、以下の様に書きます。
.loading{
width: 200px;
height: 200px;
box-sizing: border-box;
border-radius: 50%;
border-top: 10px solid #e74c4c;
position: relative;
/*アニメーションの指定（a1） */
animation: a1 2s linear infinite;
}
まとめ
HTMLとCSSだけでローディング表示を作成していきましたがいかがでしたか？
動画で使われているテクニックについてそれぞれ復習してみると、更にHTMLとCSSの理解が深まると思います。
その他にも面白い動画が沢山アップされているので、気に入ったあなたは是非ともYoutube登録してみて下さい。
モダンなCSSや、CoolなCSSアニメーションについて学びたい方へ
もっと、CoolなCSSアニメーションを学びたいあなたは、Advanced CSS and Sass: Flexbox, Grid, Animations and More! がオススメです。
「Natour」という架空のWebサイトを作成しながら、モダンなCSSについて学習していく事が出来ます。
ProgateのCSS講座だけでは、CSSが守るべき設計原則、プロのエンジニアが実際の開発現場で使う様なツールについて解説が全く物足りないのが現状です。
Progateの後で楽しみながらステップアップしたい人には絶対にオススメです。