2014-09-09

1/5くらい欠けた円を回す

新しいApple Storeアプリで使われてるローディング・アイコンをCSSで模したもの。たまにこういうものを作ると、自分が新たなCSSテクニックを学ぶことに貪欲でないことを再認識させられる。

Demo: Apple Store App Loading Icon

.loading {
  border: 1px solid #797673;
  border-radius: 51%;
  position: relative;
  width: 2rem;
  height: 2rem;
  background-color: #fff;
  animation-duration: 1s linear infinite spin;
}

.loading::before {
  display: block;
  position: absolute;
  width: 50%;
  height: 50%;
  content: "";
  background-color: #fff;
}

普通に1pxの円を作り、1/5くらい欠けるように擬似要素で背景色と同じ色の四角を作って重ねる。大きさを変えても問題ないように50%の幅と高さで四角を作ると良い感じだった。あとは1sくらいで一定の速度で無限に回るようにする。回転するアニメーションはrotate()使うだけなので省略。

border-radiusプロパティーで要素を丸くする場合、50%だと稀にきれいな丸にならないことがある。そのため最近は51%か99%にすることが多い。というようなことを力説したら失笑された。