◆ 正方形に border をつける
◆ 一方向の border に色をつける
◆ border-radius で丸くする
◆ animation と transform:rotate() で回す 
海外のページを見ていたときに綺麗な loading 画面をみかけました
○の一箇所がクルクル回ってるタイプです
普通に gif かな？と思いながらソースを見ていると画像なしで CSS だけでやってました

どうなってるのか見てみるとちょっと驚き
こんな方法でできるのかー

日本のサイトだと全然見ない方法でした
あるのかもしれませんが私はみたことなかったです

国内だと IE とか古いのに合わせろという空気があるので css アニメーションなんか使わずに GIFアニメにしろってプレッシャーがあるのですかね



では方法です

  • div で四角形を作って一箇所だけborder の色を変えます
  • border-radius で丸にします
  • 回します
  • おしまい

なんとこれだけなんです
<div class="loading"></div>
<style>
.loading {
width: 60px;
height: 60px;
border: 5px solid rgba(255,255,255,0.4);
border-top-color: rgba(255,255,255,0.9);
border-radius: 50%;
animation: spin 1.2s linear 0s infinite;
}
@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
</style>