CSSだけで実装できるローディングアニメを
紹介しているWebサービス。
Webアプリで時間の掛かる待ち時間に
必須なローディングアニメを簡単に作成できます。
目次
リンク先
I made 100 CSS loaders for your next project リンク先
レビュー
リンク先を開くとたくさんのローディングアニメが表示されます。
デザインの種別ごとにまとまっていてCODEPENで紹介されています。
面白いデザインやビジネスなデザインなどたくさん用意されています。
デザインはかなり豊富なので他では見たことないようなアニメーションを
実装することも出来そうです。
CSSなどでサイトに合わせて配色を変えたりも出来ます。
こちらは一番よく見かけるデザインでは無いでしょうか。
スマホアプリなどでもよく見かけます。
データベース関連やビジネスライクなデザインでよく見かけます。
時間の掛かる処理などには必須なローディングアニメで、
この表示がないと処理が止まっている？と思い更新ボタンなど
押してしまわれそうです。
少し前まではGifアニメなどを用いて表示していましたが、
今はCSSで簡単に実装できるようになりました。
実際に使うにはCODEPENの上部のCSSをクリックするとCSSコードが
表示されるので使いたい部分をコピーするだけです。
keyframesなども一緒にコピーして使いたい要素に合わせるだけで
簡単に実装が可能です。
コメント