SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
てるてる動画

回転させるCSS

問題

CSSでローディング用アイコンなどをくるくる回したいです。

答え

CSSを自作すると以下のような感じ。

@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
.c-spin {animation: spin 1s linear infinite;}

なお、Font Awesome では、アニメーションするためのクラスが含まれているので、Font Awesomeを利用していたら、自作不要。

<div class="fa-3x">
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>
</div>

https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons

関連するメモ

コメント