Toolipedia 埋め込み
JA
← すべてのテキストツール

CSSローダージェネレーター

スピナーとローディングアニメーションを、色とサイズを指定して純粋なCSSで作成します。

  • 無料
  • 登録不要
  • どの端末でも使える

約CSSローダージェネレーター

スピナー、ドット、バー、パルスのアニメーションから選び、色とサイズを設定して、純粋なCSSをコピーできます。画像もJavaScriptも不要なので、遅い回線でもローダーがすぐに表示されます。スクリーンリーダーの利用者にも読み込み中であることが伝わるよう、テキストのラベルやaria-busy属性を追加してください。

CSSローダージェネレーターの使い方

  1. スピナー、ドット、バーなどのローダーのスタイルを選択してください。
  2. サイトに合うように、色、サイズ、速度を設定してください。
  3. HTMLとCSSをコピーして、コンテンツが読み込まれている場所に配置してください。

このツールを使う理由

別名

よくある質問

CSSのローダーはGIFより優れていますか?

通常はそうです。CSSのローダーは非常に小さく、どの画面でも拡大縮小でき、変数1つで色を変えられ、追加のネットワークリクエストも不要です。一方、GIFは重く、高密度のディスプレイではぼやけます。

ページの準備ができたときに、ローダーを非表示にするにはどうすればよいですか?

ローダーにクラスを付けて、コンテンツが読み込まれたら、小さなスクリプトで、クラスを削除するか、display noneを設定してください。CSSだけでは、読み込みがいつ終わるかを知ることができません。

ローダーを画面の中央に配置できますか?

position fixedのコンテナに入れて、flexboxで中央揃えにすると、コンテンツの読み込み中、ローダーがビューポートの中央に表示されます。

CSSローダージェネレーターは無料ですか？

はい。ToolipediaのCSSローダージェネレーターは無料で、登録不要、透かしもありません。

安全に使えますか？

はい。すべての計算はブラウザ内で行われ、入力した内容が当社サーバーに送信されることはありません。

スマートフォンでも使えますか？

はい。AndroidやiPhoneの最新ブラウザのほか、タブレットやパソコンでも使えます。インストールは不要です。

アカウントは必要ですか？

いいえ。ページを開いてツールを使うだけです。登録もメールアドレスも不要です。

CSSローダージェネレーター を自分のサイトに置けますか？

はい。ツールの下にある「サイトに埋め込む」ボタンで短いコードをコピーし、ページに貼り付けてください。無料でアカウントも不要、ツールはページ内でそのまま動作します。

関連ツール