CSSだけで作るloadingアイコンメーカー(無料)

The Maker of CSS-only "Loading" Animation

これまで、中の人ブログで矢印ボールが回転するloadingloadingバーその他の回転系その他のバータイプテキストタイプと紹介してきたCSSだけで作るloadingを、CSS・HTMLコードを貼り付けるだけで使えるようにまとめました。

loadingアイコンの作り方

下の設定欄の左側でloadingのタイプを、右側でサイズ・色・アニメーションの速度を、プレビューを見ながら設定してください。クラス名の変更もできます。
また、テキストを使うアニメーションは、そのテキストの変更もできます。
常時、HTML・CSSコードが出力されていますので、気に入った設定になったら、これらのコードをコピーしてお使いください。
更に詳しい使い方はこちらをご覧ください。

ライセンス

出力したコードは商用・非商用に関わらず、無料で自由にご利用・改編して頂けます。可能であれば、当ページや当サイトへのリンクをお願いします。
このページにある「loadingメーカー」そのものは、当ページ以外では一切使用できません。

  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading

プレビュー

CSS

HTML

IE9以下用

サイズ
スピード
クラス名

気に入ったらシェアをお願いします!

免責と注意事項

  • 本プログラムで出力したコードは、商用・非商用を問わず無料でご利用・改編していただけます。
  • 本プログラムで出力したコードは、くれぐれも自己責任でご利用をお願いいたします。
    本プログラムで出力したコードの利用によって生ずるいかなる損害に対しても一切責任を負いません。

サポート掲示板

不具合や不明点などがありましたら、こちらの掲示板をご利用ください。メールでの返信が必要な場合は、お問合せからご連絡ください。

アイコン設定
投稿者さん使い方
掲示板の主旨に反する投稿は掲載されません。掲載の是非は管理者が判断いたします。予めご了承願います。 投稿内容は掲載されますので、個人情報は一切投稿しないでください。
通りすがりさん (60rgikie)2016/8/22 14:55 (No.25)削除
生成されたcssに不具合があります。 
@keyframes animation082

@keyframes animation08_2
管理人さん (5qh31dhf)2016/8/22 20:40削除
投稿ありがとうございます!
確認して修正いたします。
管理人さん (5qh31dhf)2016/8/23 19:08削除
修正しました。ご指摘ありがとうございました。
これまで正しく動作しておらず申し訳ございませんでした。
返信