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