シングルエレメントローダー：スピナー

CSSのみのローダーを作成することは私のお気に入りのタスクのXNUMXつです。 それらの無限のアニメーションを見るのはいつも満足です。 そして、もちろん、 たくさん それらを作るための技術とアプローチの CodePenよりもさらに見てください いくつあるかを確認します。 ただし、この記事では、単一要素ローダーができるだけ少ないコードを記述できるようにする方法を説明します。

私が持っている 500以上のシングルdivローダーのコレクションを作成しました このXNUMX部構成のシリーズでは、それらの多くを作成するために使用したトリックを共有します。 膨大な数の例を取り上げ、小さな調整がいかに楽しいバリエーションにつながるか、そしてそれをすべて実現するために記述する必要のあるコードがどれほど少ないかを示します。

この最初の記事では、より一般的なローダーパターンのXNUMXつであるスピニングバーを作成します。

これがアプローチです

このローダーの簡単な実装は、親要素内にラップされたバーごとにXNUMXつの要素を作成し（合計XNUMXつの要素に対して）、次のように操作することです。 opacity & transform 回転効果を得るために。

ただし、私の実装に必要な要素はXNUMXつだけです。

<div class="loader"></div>

…および10個のCSS宣言：

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid; mask: conic-gradient(from 22deg, #0003, #000); animation: load 1s steps(8) infinite;
}
.loader,
.loader:before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader:before { content: ""; transform: rotate(45deg);
}
@keyframes load { to { transform: rotate(1turn); }
}

それを分解しましょう

一見、コードは奇妙に見えるかもしれませんが、あなたはそれがあなたが思っているよりも単純であることがわかるでしょう。 最初のステップは、要素の寸法を定義することです。 私たちの場合、それは 150px 四角。 置くことができます aspect-ratio 何があっても要素が正方形のままになるように使用します。

.loader { width: 150px; /* control the size */ aspect-ratio: 1; /* make height equal to width */
}

CSSローダーを構築するとき、私は常に全体のサイズを制御するためにXNUMXつの値を持つようにしています。 この場合、それは width ここで取り上げるすべての計算は、その値を参照します。 これにより、単一の値を変更してローダーを制御できます。 多くの追加値を調整する必要なしに、ローダーのサイズを簡単に調整できることが常に重要です。

次に、グラデーションを使用してバーを作成します。 これは最も難しい部分です！ 使ってみよう XNUMXつ 作成するグラデーション 2 以下のようなバー：

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;

グラデーションは、XNUMXつのカラーストップとXNUMXつのカラーストップで定義されます。 その結果、フェードやトランジションのない単色になります。 サイズは等しい 34% 広いと 8% 高い。 中央にも配置されています（50%）。 秘訣はキーワード値の使用です space —これはグラデーションを複製し、合計XNUMXつのバーを提供します。

仕様:

画像は、クリップされることなく背景のポジショニング領域内に収まる頻度で繰り返され、その後、画像は領域を満たすように間隔が空けられます。 最初と最後の画像が領域の端に接触します。

私は等しい幅を使用しています 34% つまり、XNUMXつ以上のバーを持つことはできません（3*34% より大きい 100%）ただし、XNUMXつのバーを使用すると、空きスペースができます（100% - 2 * 34% = 32%）。 そのスペースは、XNUMXつのバーの間の中央に配置されます。 つまり、中間のグラデーションの幅を使用します 33% & 50% 少なくともXNUMXつのバーがあり、それらの間に少しスペースがあることを確認します。 値 space それが私たちのためにそれらを正しく配置するものです。

同じことを行い、XNUMX番目の同様のグラデーションを作成して、上部と下部にさらにXNUMXつのバーを取得します。これにより、 background のプロパティ値：

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat, linear-gradient(#17177c 0 0) 50%/8% 34% no-repeat space;

繰り返しを避けるために、CSS変数を使用してそれを最適化できます。

--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;

これでXNUMXつのバーができ、CSS変数のおかげで、色の値をXNUMX回書き込むことができます。これにより、後で簡単に更新できます（ローダーのサイズで行ったように）。

残りのバーを作成するには、をタップしてみましょう .loader 要素とその ::before 合計XNUMXつの合計でさらにXNUMXつのバーを取得するための疑似要素。

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid;
}
.loader,
.loader::before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader::before { content: ""; transform: rotate(45deg);
}

の使用に注意してください display: grid。 これにより、グリッドのデフォルトに依存することができます stretch 疑似要素がその親の領域全体をカバーするようにするための配置。 したがって、ディメンションを指定する必要はありません。コードを削減し、多くの値を処理することを回避するもうXNUMXつのトリックです。

次に、疑似要素を次のように回転させます。 45deg 残りのバーを配置します。 次のデモにカーソルを合わせると、トリックが表示されます。

不透明度の設定

私たちがやろうとしているのは、円形のパスを移動するときに、フェードバーの跡を後ろに残すバーがXNUMXつあるという印象を与えることです。 今必要なのは、バーの透明度を試して、そのトレイルを作成することです。これは、CSSで行います。 mask 次のように円錐曲線と組み合わせます。

mask: conic-gradient(from 22deg,#0003,#000);

トリックをよりよく理解するために、これをフルカラーのボックスに適用してみましょう。

赤色の透明度は時計回りに徐々に増加しています。 これをローダーに適用すると、不透明度の異なるバーがあります。

実際には、グラデーションでマスクされ、XNUMXつの半透明の色の間にあるため、各バーはフェードしているように見えます。 これを実行するとほとんど目立たないので、すべてのバーが同じ色で不透明度が異なると言えるようなものです。

回転

回転アニメーションを適用してローダーを取得しましょう。 連続したアニメーションではなく、段階的なアニメーションが必要であることに注意してください。そのため、私は steps(8). 8 はバーの数に過ぎないので、使用しているバーの数に応じて値を変更できます。

.loader { animation: load 3s steps(8) infinite;
} /* Same as before: */
@keyframes load { to { transform: rotate(1turn) }
}

それでおしまい！ XNUMXつの要素と数行のCSSのみを備えたローダーがあります。 XNUMXつの値を調整するだけで、サイズと色を簡単に制御できます。

使用したのは ::before 疑似要素、を使用してさらにXNUMXつのバーを追加できます ::after 合計12本のバーで終わり、ほぼ同じコードで終わります。

考慮すべき疑似要素の回転を更新します 30deg & 60deg 45deg XNUMXステップではなくXNUMXステップのアニメーションを使用している間。 高さも下げました 5% 8% バーを少し細くします。

また、私たちが持っていることに注意してください grid-area: 1/1 疑似要素について。 これにより、それらを互いに同じ領域に配置し、互いに積み重ねることができます。

何だと思う？ 別の実装を使用して、同じローダーに到達できます。

コードの背後にあるロジックを理解できますか？ ヒントは次のとおりです。不透明度はCSSで処理されなくなりました mask しかし、グラデーションの内側で、 opacity プロパティ。

代わりにドットを使ってみませんか？

私たちは完全にそれを行うことができます：

コードを確認すると、線形グラデーションではなく放射状グラデーションを使用していることがわかります。 それ以外の点では、マスクが不透明な印象を与えるという概念はまったく同じですが、形状を線ではなく円として作成しました。

以下は、新しいグラデーション構成を説明するための図です。

Safariを使用している場合は、デモにバグがある可能性があることに注意してください。 これは、Safariが現在サポートを欠いているためです。 at 放射状グラデーションの構文。 しかし、それを克服するためにグラデーションを少し再構成することができます。

.loader,
.loader:before,
.loader:after { background: radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) 50% -150%/20% 80% repeat-y, radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) -150% 50%/80% 20% repeat-x;
}

その他のローダーの例

これは、前のものと同様のスピナーローダーの別のアイデアです。

これについては、私はただ頼っています background & mask 形状を作成します（疑似要素は必要ありません）。 また、CSS変数を使用して構成を定義し、同じコードから多くのバリエーションを作成できるようにします。これは、CSS変数の能力のもうXNUMXつの例です。 このテクニックについて別の記事を書きました 詳細が必要な場合。

一部のブラウザはまだに依存していることに注意してください -webkit- のプレフィックス mask-composite 独自の値のセットを使用し、デモでスピナーを表示しません。 これがそれを行う方法です 無し mast-composite より多くのブラウザサポートのために。

私はあなたのためにもう一つ持っています：

これには、 background-color 色を制御し、使用する mask & mask-composite 最終的な形状を作成するには：

終了する前に、しばらく前に作成したスピニングローダーをいくつか紹介します。 私はさまざまなテクニックに頼っていますが、それでもグラデーション、マスク、疑似要素などを使用しています。それぞれのロジックを理解し、同時に新しいトリックを学ぶことは良い練習になるかもしれません。 とはいえ、それらについて質問がある場合は、コメントセクションが下にあります。

包み込む

ほら、CSSでできることは、単一のdiv、いくつかのグラデーション、疑似要素、変数だけでできることがたくさんあります。 さまざまなスピニングローダーをたくさん作成したようですが、基本的にはすべて同じものですが、わずかな変更が加えられています。

これはほんの始まりに過ぎません。 このシリーズでは、CSSローダーを作成するためのより多くのアイデアと高度な概念を見ていきます。

---

シングルエレメントローダー：スピナー 最初に公開された CSSトリック。 あなたがすべき ニュースレターを入手する.

• コインスマート。 ヨーロッパで最高のビットコインと暗号通貨取引所。
• Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 出入り自由。
• CryptoHawk。 アルトコインレーダー。 無料トライアル。
• ソース：https：//css-tricks.com/single-element-loaders-the-spinner/