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: "";

[kits]

欠けてるだけなのに光って見える。

[etr]

何か表示されるのかと思って，しばらく待ってしまいました。orz

[tailtame]

デモは画像先ｗ 確かに光って見える。

[efcl]

一部欠けたborder-radiusの円を作って回転させるとローディングっぽくなる

[UDONCHAN]

便利

[hitode909]

かわいい

[oppara]

1/5くらい欠けた円を回す - Weblog - http://t.co/zNjzdqtzMQ B!

[t_f_m]

"ローディング・アイコンをCSSで模したもの"

[cho45]

TODO: パクってつかう

[amagitakayosi]

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

[hiroshi_revolution]

1/5くらい欠けた円を回す - Weblog - http://t.co/7gDYzR4j3p