美しいCSSローダーを作成する

直感的なドラッグアンドドロップインターフェースで、カスタムCSS読み込みアニメーションを数秒で生成します。コーディングは必要ありません!

ローダーのカスタマイズ

ローダータイプ

Color

Size 40px

Speed 1s

詳細オプション

Preview

.loader { border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid #165DFF; width: 40px; height: 40px; animation: spin 1s linear infinite; }  @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

使用方法

左側のコントロールを使用してローダーをカスタマイズします
「CSSの生成」ボタンをクリックします
生成されたHTMLコードとCSSコードをコピーします
プロジェクトに貼り付けます

一般的なローダーの例

パルスローダー

3 Dots 実装が簡単

スピナーローダー

Classic 100% CSS

Dual Ring

ダブルサークル今風

バウンスローダー

跳ねるドットスムーズアニメーション

リングローダー

ドット付きリングユニークなデザイン

スケールローダー

ドットのスケーリング Lightweight

CSSローダーの使用方法

基本的な実装

このツールによって生成されたCSSローダーの使用は簡単です。生成されたHTMLコードとCSSコードをプロジェクトにコピーするだけです。

ステップ 1: CSS を追加する

Add the generated CSS code to your stylesheet or in a