まず完成形

完成形を見た方が早いので、まずは完成形。こんな感じのボタンを作成したかったのですが記事を探せど探せど見つからず自力で作成しました。

See the Pen
oNNomEY by webnohito (@web-no-hito)
on CodePen.

コード

HTML

今回はdiv要素一つで作成しました。


<div></div>

CSS

次にCSSです。SCSS記法で記述しておりますので、必要に応じて変換等してください。


body {
  background: #474b42; // 画面の背景色
}
@keyframes spin { // spinという名前のアニメーションを作成
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

div {
  width: 140px; // widthとheightは揃えてください
  height: 140px;
  margin: auto;
  border-radius: 50%; // 要素を円にする
  border: 40px solid #f0f; //ぐるぐるしている部分
  border-color: transparent transparent transparent #c3d825; // 1辺のみ色を付ける
  animation: spin 1s linear infinite;  // 秒数で回転速度変更
  &:after {　// after要素が中央の円になる
    content: "";
    display: block;
    border-radius: 50%;
    width: 140px;
    height: 140px;
    background: #69821b;
  }
}

コード内に軽く解説を書きましたが、ポイントはぐるぐるしている部分をどう実装するかだと思います。

div要素自体の背景色を指定しない（transparent）ことでボーダー部分にのみ色がつきます。そしてそのボーダーはtop/right/bottom/leftのどこか1辺にのみに色をつけることでこのような実装が可能です。

あともう1点はkeyframeでアニメーションを作成しておきましょう。これはよく見るアニメーションだと思いますが、要素を回転させるためのアニメーションです。