ITエンジニア/デザイナ向けにオープンソースを毎日紹介

CSS3だけで作れちゃうのが凄いですね!

処理中にユーザがストレスを感じないように表示されるスピナー。最も簡単なのはアニメーションGIFを表示することかなと思いますが、背景色を微妙に違ったり、大きさを適切に考えないといけないなど画像だけに扱いがちょっと面倒に感じることがあります。

そこで使ってみたいのがSpinKitです。なんとCSS3のアニメーションを使ってスピナーを実現しています。

一例。四角いパネルが回転します。
一例。四角いパネルが回転します。

円が次々に大きさを変えていくパターン。
円が次々に大きさを変えていくパターン。

棒の長さが変わっていくパターン。
棒の長さが変わっていくパターン。

スクリーンショットでは分かりづらいので動画を撮影しました。

例えば棒の長さが変わるウェーブの場合、次のようなスタイルシート設定になります。

.spinner {
  margin: 100px auto;
  width: 50px;
  height: 30px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;

  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% { transform: scaleY(0.4) }  
  20% { transform: scaleY(1.0) }
}

scaleYとanimation-delayを組み合わせることで上手に表現しているのが分かるかと思います。他のスピナーも同じようにスタイルシートの妙技によって実現しています。

CSS3限定なのでHTML5をサポートしたブラウザだけになるとは思いますが、スタイルシートであれば大きさや色を自由に設定できますので積極的に使ってみたいテクニックですね。

SpinKitはCSS3製、MIT Licenseのオープンソース・ソフトウェアです。

SpinKit | Simple CSS Spinners

tobiasahlin/SpinKit

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2