3 Pixel Grid
3 Pixel Gridは3×3の9マスに遅延効果を加えたシンプルで多彩なCSS+JavaScriptアニメーションインジケーター集です。仕様上、少々のjavascriptも使用されていますがアニメーションは基本的にCSSで制御されています。
正方形に配列された9つのマスに遅延とカラーを応用する事で多種多様なアニメーションインジケーターを扱えるようにしたもの。非常に軽量で依存関係もありません。
ローディング等でも見かけるシンプルなアニメーションもあれば👆のようなユニークなカラフルアニメーションのインジケーターもありますが、自身でカスタマイズしたりオリジナルのアニメーションインジケーターをデザインする事も出来るよう構築されていました。
how-it-worksに仕組みの解説があって興味深かったです。最初の設計は少し面倒ではあるものの、応用も管理もしやすい合理的なデザインですね。勉強になりました。
