animationを使って無限に回転するローディングアイコンを作っていきます。

• @keyframesの設定
• animationの設定
• 等速運動の設定

@keyframesの設定

・今回はアニメーションプロパティを使ってローディングアイコンを作っていきます。

・HTMLではdivを使って要素を作り、クラス名をloadingとしておきます。

・CSSの方ではまず形を作っていきます。widthとheightを４０pxにしてボーダーに色と太さ、線を指定していきます。border-right-color だけ transparent にしてみます。あとはボーダーレディウスを５０％に指定すると丸くなります。

・次に@keyframesの指定をしていきます名前はspinとしておきます。

・０％にtransformをnoneに指定し、100%にtransformをrotate(360deg)に指定していきます。

・0% と 100% は from 、 to と書いてあげても OK です。

animationの設定

・animation の設定をしていきましょう。一括指定プロパティで spin を 0.8 秒かけて、ずっとアニメーションするようと書いてあげます。

等速運動の設定

・このままだと回転に違和感があるのでlinearをして回転を等速にしてあげます。

-広告-

Anker PowerExpand Direct 7-in-2 USB-C PD メディア ハブ 4K対応 HDMIポート 100W出力 Power Delivery 対応 Thunderbolt 3 USB-Cポート USB-A ポート microSD & SDカード スロット搭載 価格：5999円（税込、送料無料) (2020/10/2時点) 楽天で購入

PD 充電器 RAVPower Type C 急速充電器 90W【GaN (窒化ガリウム)採用/2ポート/折畳式/PD対応/PSE認証済】iPhone 11/11 Pro/11 Pro Ma 価格：7329円（税込、送料無料) (2020/10/2時点) 楽天で購入