単一要素ローダー：スピナー

CSSのみのローダーを作成することはやりがいのある課題です。魅惑的な無限のアニメーションは、常に作成するのに満足しています。 Codepenは膨大な手法を紹介していますが、この記事では、最小限のコードでシングルエレメントローダーを達成することに焦点を当てています。

私は500を超えるシングルdivローダーを開発しましたが、この4部構成のシリーズは使用された手法を共有しています。多数の例を探り、微妙な調整がどのように多様な結果をもたらし、コードがどれほど簡潔になるかを示します。

シングルエレメントローダーシリーズ：

1. 単一の要素ローダー：スピナー -あなたはここにいます
2. 単一要素ローダー：ドット
3. 単一要素ローダー：バー
4. 単一要素ローダー：3Dに進みます

この最初の記事では、共通のローダーパターンを作成します：スピニングバー。

アプローチ

単純なアプローチでは、複数の要素（この場合は9）を使用し、それぞれが親の内部でバーを表します。不透明度と変換は、紡績効果を生み出します。

ただし、私の方法では、1つの要素のみを使用しています。

<div></div>

...および10のCSS宣言：

 .loader {
  幅：150px; / *サイズを制御 */
  アスペクト比：1;
  ディスプレイ：グリッド;
  マスク：conic-勾配（22deg、＃0003、＃000から）;
  アニメーション：1秒のステップ（8）無限をロードします。
}
。ローダ、
.loader：{前
  -_ g：線形勾配（＃17177c 0 0）50％; / *ここで色を更新 */
  背景： 
    var（--_ g）/34％8％スペースなし繰り返し、
    var（-_ g）/8％34％繰り返しスペース。
}
.loader：{前
  コンテンツ： "";
  変換：回転（45DEG）;
}
@KeyFramesロード{
  {transform：rotate（1turn）; }
}

コードの内訳

コードは最初は珍しいように思えるかもしれませんが、表示されるよりも簡単です。まず、要素の寸法（150pxの正方形）を定義します。 aspect-ratioサイズ変更に関係なく正方形のままであることを保証します。

 .loader {
  幅：150px; / *サイズを制御 */
  アスペクト比：1; / *正方形の形状を維持 */
}

CSSローダーの場合、シングルサイズの制御値が理想的です。ここでは、幅です。すべての計算はそれに関連しています。これにより、簡単なサイズの調整が可能になります。

勾配はバーを作成します。これは最も複雑な部分です。単一の勾配が2つのバーを生成します。

背景：線形勾配（＃17177c 0 0）50％/34％8％スペースなし繰り返し。

勾配は1色と2色の停止を使用して、固体色になります。サイズの幅は34％、高さは8％、中心（50％）です。 spaceキーワードは勾配を複製し、2つのバーを作成します。

仕様から：

画像は、クリップされずにバックグラウンドポジショニング領域に収まるように頻繁に繰り返され、その後、画像が領域を埋めるために間隔を空けています。最初と最後の画像は、エリアの端に触れます。

幅34％の幅は、2つのバー（3 34％> 100％）のみを許可し、ギャップ（100％ - 2 34％= 32％）が残ります。 spaceこれらのギャップを中央に配置します。 33％から50％の幅により、間隔の少なくとも2つのバーが保証されます。

2番目の勾配を使用してさらに2つのバーを作成し、以下を作成します。

背景： 
 線形勾配（＃17177c 0 0）50％/34％8％スペースなし、繰り返し、
 線形勾配（＃17177c 0 0）50％/8％34％繰り返しのスペース。

CSS変数はこれを最適化します：

 -_ g：線形勾配（＃17177c 0 0）50％; / *ここで色を更新 */
背景： 
 var（--_ g）/34％8％スペースなし繰り返し、
 var（-_ g）/8％34％繰り返しスペース。

これにより、4つのバーが生成されます。 CSS変数は、色の更新を簡素化します。

.loader要素とその::before 、さらに4つのバーを作成します。

 .loader {
  幅：150px; / *サイズを制御 */
  アスペクト比：1;
  ディスプレイ：グリッド;
}
。ローダ、
.loader :: before {
  -_ g：線形勾配（＃17177c 0 0）50％; / *ここで色を更新 */
  背景： 
    var（--_ g）/34％8％スペースなし繰り返し、
    var（-_ g）/8％34％繰り返しスペース。
}
.loader :: before {
  コンテンツ： "";
  変換：回転（45DEG）;
}

display: grid擬似要素が親の領域をカバーし、明示的な寸法の必要性を排除することを保証します。

擬似エレメントを45DEGで回転させると、残りのバーが位置します。

不透明なコントロール

フェージングトレイルを離れる単一のバーの効果はconic-gradientを備えたCSS maskを使用して達成されます。

マスク：conic-勾配（22deg、＃0003、＃000から）;

この勾配は、徐々に透明性を時計回りに増加させます。ローダーに適用すると、フェードバーの錯覚が作成されます。各バーはマスキングのためにフェードしているように見え、さまざまな不透明度の印象を生み出します。

回転アニメーション

steps(8) （8はバーの数）を使用して、段階的なアニメーションが回転を作成します。

 .loader {
  アニメーション：3Sステップ（8）無限をロードします。
}

@KeyFramesロード{
  {transform：rotate（1turn）}
}

これにより、シングルエレメントの最小CSSローダーが完成します。サイズと色は簡単に制御できます。 A ::after追加すると、マイナーなコード調整で12のバーに拡張できます。異なる勾配と不透明なテクニックを使用して、代替の実装も可能です。

代替形状：ドット

線形勾配の代わりに放射状勾配を使用して、ドットベースのローダーを作成することも同様です。不透明度のマスキングの中心的な概念は同じままですが、形状は円です。 Safariの互換性には、勾配調整が必要になる場合があります。

さらなる例

さまざまな技術（勾配、マスク、擬似要素）を使用して、いくつかの追加のスピナーローダーが表示されています。これらは、さまざまなアプローチを理解する上での演習として機能します。

結論

単一のdiv 、勾配、擬似要素、および変数を使用すると、さまざまな紡績ローダーを作成できます。例は根本的に類似しており、軽微な変更があります。これはほんの始まりです。このシリーズでは、より高度なCSSローダーテクニックを探索します。

シングルエレメントローダーシリーズ：

1. 単一の要素ローダー：スピナー -あなたはここにいます
2. 単一要素ローダー：ドット
3. 単一要素ローダー：バー
4. 単一要素ローダー：3Dに進みます

以上が単一要素ローダー：スピナーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。