以前であればアニメーションGIFを用いることが多かったローディングアニメーション（プリローダー）も最近ではSVGを使ったり見栄えだけでなく動きも含めてCSSのみで実装するということも大分増えてきたので、過去に参考にさせてもらったものや覚えておきたいと思った実装方法のまとめです。 また、サンプルやチュートリアル以外に簡単にCSSやSVGを使用したローディングアニメーションを作成できるジェネレータも併せて紹介します。
Hero Patterns Hero Patternsは、背景画像に使えるシームレスなSVGパターン画像のコレクションです。 SVGなので、前景色、背景色、透過度の調整が可能です。 現在、オリジナルのパターン画像、20点が公開されています。 パターン画像は、生成されるCSSのコピペで実装することができます。また、ベースとなるSVGを「Download unstyled SVG」のリンクからダウンロードすることも可能です。 コピペしたCSSでSVGを背景画像として実装 svgをbodyの背景画像に設定してみます。コピペしたCSSをスタイルに設定するだけです。 HTML + CSS <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <style> body { background-color: #DFDBE5; ba
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く