CSSだけでローディングアイコン

CSSのアニメーションを使ってよく見るローディングアイコンを作れます！ローディングの形はボーダーで作ります。

html

<div class="loadingicon"></div>

css

.loadingicon {
 width: 40px;
 height: 40px;
 
 /* まずボーダーをつけます */
 border: 8px solid gray;
 
 /* 次にボーダーの右線を透明に */
 border-right-color: transparent;
 
 /* 〇に */
 border-radius: 50%;
 
 /* アニメーションをつけます */
 animation: spin 1s infinite linear;
}


/* spinの部分に好きな名前をつけます */
@keyframes spin {
 0% {
   /* 最初は変化なし */
   transform: none;
 }
 
 100% {
   /* 最後の時点で360度回転 */
   transform: rotate(360deg);
 }
}

アニメーションは@keyframes 任意のアニメーション名で作ります。回転させたいのでrotateを使います。

animation: spin 1s infinite linear; は、
spinという名前のアニメーションを、1秒かけて、infinite(永遠に）、linear(同じ速度で)行うという意味になります。

CSSだけでも意外と簡単にローディングアイコンを作れます。
参考になると嬉しいです。