Web サイト用のスタイリッシュなローダーを作成する方法

導入

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

ローダーとは何ですか?

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

ローダーを使用する理由

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

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

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

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

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

@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 サイトに統合する
Web プロジェクトでローダーを使用するには、ファイルに HTML と CSS を必ず含めてください。ローダーの HTML マークアップを希望の場所に配置すると、ローダーが読み込みプロセス中に表示されます。

結論

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

以上がWeb サイト用のスタイリッシュなローダーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。