このバーのアニメーションも読み解いていきましょう。構成は次のようになっています。動いているのがわかると思います。別々にして遅くするとこんな感じになります。割までの時間で左から右へ動きます。左端より右端のほうが速く動きます。最初と最後は速く、中盤はゆっくりになります。半分の時間だけ遅らせて開始します。前半は急速、後半はゆっくりになっていますね。以上がプログレスバーのアニメーションの解説になります。まとめ見慣れたアイコンのアニメーションも、詳しく見てみると細部までこだわってデザインされていることがわかります。変えただけでもかなり印象が変わります(みなさんも開発者ツールでぜひ試してみてください!)。そのものの静的な見た目のデザインだけでなく、それに動きをつけるデザインも重要になってきています。使えるフレームワークは便利だなと改めて感じました。機会があれば、ダイアログやメニューの開閉のアニメーションについても調べてみたいです。