導入

ローダー (またはローディング スピナー) は、ロード中に視覚的なフィードバックを提供することでユーザー エクスペリエンスを向上させます。このチュートリアルでは、HTML と CSS を使用して洗練された最新のローダーを作成します。さあ、飛び込みましょう！

ローダーとは何ですか?

ローダーは、コンテンツが処理されていることを示すアニメーション要素です。これにより、アプリケーションが機能していることがユーザーに保証され、ロード中にイライラする可能性が軽減されます。

ローダーを使用する理由

• ユーザー エクスペリエンスの向上: 待機中にユーザーに情報を提供します。
• 見た目の美しさを高める: 適切に設計されたローダーを使用すると、ウェブサイトをよりプロフェッショナルな外観にすることができます。
• ユーザーの離脱を防止: 視覚的なフィードバックを提供することで、ユーザーが待機中に離脱する可能性が低くなります。

ステップ 1: HTML 構造のセットアップ
ローダーの基本的な HTML 構造から始めます。次のコードは、12 個のバーを含むローダーのコンテナーを作成します。

ステップ 2: CSS でスタイル設定する
次に、CSS を追加してローダーのスタイルを設定します。これは、アニメーション化されたバーを含む円形ローダーを作成するコードです。

`.loader {
位置: 相対;
幅: 54px;
高さ: 54px;
境界半径: 10px;
}

.loader div {
幅: 8%;
高さ: 24%;
背景: rgb(128, 128, 128);
位置: 絶対;
左: 50%;
トップ: 30%;
不透明度: 0;
境界半径: 50px;
ボックスシャドウ: 0 0 3px rgba(0,0,0,0.2);
アニメーション: fade458 1s リニア無限;
}

@keyframes fade458 {
から {
不透明度: 1;
}

に {
不透明度: 0.25;
}
}`

ステップ 3: アニメーションを追加する
各バーに回転とアニメーションの遅延を適用して、動的な読み込み効果を作成します。

`.loader .bar1 {
変換: 回転(0度) 変換(0, -130%);
アニメーション遅延: 0s;
}

.loader .bar2 {
変換: 回転(30度) 平行移動(0, -130%);
アニメーション遅延: -1.1s;
}

.loader .bar3 {
変換: 回転(60度) 平行移動(0, -130%);
アニメーション遅延: -1s;
}

.loader .bar4 {
変換: 回転(90度) 平行移動(0, -130%);
アニメーション遅延: -0.9s;
}

.loader .bar5 {
変換: 回転(120度) 平行移動(0, -130%);
アニメーション遅延: -0.8s;
}

.loader .bar6 {
変換: 回転(150度) 平行移動(0, -130%);
アニメーション遅延: -0.7s;
}

.loader .bar7 {
変換: 回転(180度) 平行移動(0, -130%);
アニメーション遅延: -0.6s;
}

.loader .bar8 {
変換: 回転(210度) 平行移動(0, -130%);
アニメーション遅延: -0.5s;
}

.loader .bar9 {
変換: 回転(240度) 平行移動(0, -130%);
アニメーション遅延: -0.4s;
}

.loader .bar10 {
変換: 回転(270度) 平行移動(0, -130%);
アニメーション遅延: -0.3 秒;
}

.loader .bar11 {
変換: 回転(300度) 平行移動(0, -130%);
アニメーション遅延: -0.2s;
}

.loader .bar12 {
変換: 回転(330度) 平行移動(0, -130%);
アニメーション遅延: -0.1s;
}`

ステップ 4: ローダーをウェブサイトに統合する
Web プロジェクトでローダーを使用するには、ファイルに HTML と CSS を必ず含めてください。ローダーの HTML マークアップを希望の場所に配置すると、ロード プロセス中にローダーが表示されます。

結論

ローダーを作成すると、Web サイトのユーザー エクスペリエンスが大幅に向上します。シンプルな HTML と CSS を使用して、視覚的に魅力的で機能的なローダーを構築できます。ウェブサイトのデザインに合わせて色やサイズを試してみてください!