【CSS】CSSで簡単なくるくるを作成する

【CSS】CSSで簡単なくるくるを作成する

ロード画面なんかでくるくるしているアレについてです。

スピナーと呼ぶそうなのですが、簡単なものであればCSSで作れてしまうそうです。

CSSのborderで円を作り、borderのどこかを背景と同じ色に設定することで欠けた円になります。

さらに、CSSのanimationによってくるくる回る動作を設定すると、それっぽいのが出来上がります。

/* くるくる */
.circle {
  position: absolute;
  animation: rotate 1s linear infinite;
  border: 10px solid #8888ff;
  border-radius: 50%;
  border-right-color: transparent; 
  height: 100px;
  width: 100px;
}
@keyframes rotate
{
  0% { 
    transform: rotate(0deg);   opacity: 0.2;
  }
  50% {
    transform: rotate(180deg); opacity: 1.0; 
  } 
  100% {
    transform: rotate(360deg); opacity: 0.2; 
  } 
}

こんな感じです。

処理中に操作が出来ないようにカバーをかけつつ、くるくるを表示しています。

カバーを非表示にすると、くるくるも一緒に消えるようになっています。

まだ使いこなせていませんが、アニメーションが使えるとちょっと華が出てきますね。