少し前まで、ローディングアニメーションといえばGIFアニメーションでしたが、最近ではCSSのみで実装するということが増えてきました。 CSSのアニメーションは、JavaScriptを知らなくても簡単にアニメーションを作ることができる手軽さがある上、システムにも負荷をかけません。そのため、ローディングアニメーションにはぴったりの技術なのです。 実現するには、CSS3から登場したanimation プロパティをアニメーションさせたい要素に付与します。 今日は、そんなCSSアニメーションで作られたローディング素材のコードを公開しているサイトをご紹介します。ぜひ、皆様のWebサイト制作やCSS3のお勉強に活かしてください。 1. Loaders.css Loaders.css このサイトは、28個

スマートフォンに対応したWebサイトが増えてくるとともに、Webサイトのデータを読み込み中であることを示すローディングアニメーションのデザインや種類も増えてきました。 今日は、ローディングアニメーションのフリー素材で私が可愛いなーと思った「Flat Preloaders」をご紹介します。 Flat Preloadersで配布されているこのローディングアニメーションは、GIFアニメーションの形式のため、ファイルサイズも軽く、気軽に使うことができます。 しかも、フラットデザインで、見た目もとってもおしゃれ！ もちろん、自分でGIFアニメーションでローディングアニメーションを作りたいという方にとっても参考になると思います。 サイズは128x128, 64x64, 32x32の3パターン。 Dow