単一要素ローダー：バー

スピナーを見てきました。 ドットを見てきました。 次に、ローダーの別の一般的なパターンに取り組みます。 バー。 また、シリーズのこのXNUMX番目の記事でも、XNUMXつの要素と、バリエーションを簡単に作成できる柔軟なCSSを使用して作成することで、他の記事と同じことを行います。

バーローダーの例を20つではなく、XNUMXつではなく、XNUMXから始めましょう。

何？！ それぞれの詳細を説明しますか？ それは記事には多すぎます！

一見そのように見えるかもしれません！ ただし、それらはすべて同じコード構造に依存しており、バリエーションを作成するためにいくつかの値を更新するだけです。 それがCSSのすべての力です。 XNUMXつのローダーを作成する方法は学習しませんが、同じコード構造を使用して必要な数のローダーを作成できるさまざまな手法を学習します。

バーを作ろう！

まず、を使用してそれらの寸法を定義します width （または height）と aspect-ratio 比率を維持するために：

.bars { width: 45px; aspect-ratio: 1;
}

このシリーズのパート2でドットローダーを作成した方法と非常によく似た、背景に線形勾配のある「偽の」XNUMX本のバーを並べ替えます。

.bars { width: 45px; aspect-ratio: 1; --c: no-repeat linear-gradient(#000 0 0); /* we define the color here */ background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%; background-size: 20% 100%; /* 20% * (3 bars + 2 spaces) = 100% */
}

上記のコードにより、次の結果が得られます。

このシリーズの他の記事と同様に、私たちは多くのことを扱います background トリック。 ですから、私たちがあまりにも速く飛び回っていると感じたり、もう少し詳細が必要だと感じた場合は、それらをチェックしてください。 私も読むことができます 私が与えるスタックオーバーフローの答え 詳細な説明 これがどのように機能するかについて。

バーのアニメーション

要素のサイズまたは位置をアニメーション化して、バーローダーを作成します。 次のアニメーションキーフレームを定義して、サイズをアニメーション化してみましょう。

@keyframes load { 0% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 1 */ 33% { background-size: 20% 10% , 20% 100%, 20% 100%; } /* 2 */ 50% { background-size: 20% 100%, 20% 10% , 20% 100%; } /* 3 */ 66% { background-size: 20% 100%, 20% 100%, 20% 10%; } /* 4 */ 100% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 5 */
}

そこで何が起こっているのか分かりますか？ 0％から100％の間で、アニメーションは background-size 要素の背景グラデーションの。 各キーフレームは、XNUMXつの背景サイズ（グラデーションごとにXNUMXつ）を設定します。

そして、これが私たちが得るものです：

サイズや位置に応じてさまざまなアニメーション構成で遊ぶことで得られる可能性のあるすべてのバリエーションを想像し始めることができますか？

サイズをに固定しましょう 20% 50% 今回は位置を更新します。

.loader { width: 45px; aspect-ratio: .75; --c: no-repeat linear-gradient(#000 0 0); background: var(--c), var(--c), var(--c); background-size: 20% 50%; animation: load 1s infinite linear;
}
@keyframes load { 0% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 1 */ 20% { background-position: 0% 50% , 50% 100%, 100% 100%; } /* 2 */ 40% { background-position: 0% 0% , 50% 50% , 100% 100%; } /* 3 */ 60% { background-position: 0% 100%, 50% 0% , 100% 50%; } /* 4 */ 80% { background-position: 0% 100%, 50% 100%, 100% 0%; } /* 5 */ 100% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 6 */
}

…これで別のローダーができます！

あなたはおそらく今までにトリックを持っています。 必要なのは、キーフレームに変換するタイムラインを定義することだけです。 サイズ、位置、またはその両方をアニメーション化することによって！ —私たちの指先でローダーの可能性は無限にあります。

そして、そのようなテクニックに慣れたら、さらに進んで、より複雑なグラデーションを使用して、 他には？ ローダー。

そのデモの最後のXNUMXつの例では、すべてのバーローダーが同じ基本的なマークアップとスタイル、およびアニメーションのさまざまな組み合わせを使用していることを期待してください。 コードを開き、各フレームを個別に視覚化してみてください。 数十を作るのがいかに簡単であるかがわかります— 数百ではないにしても —バリエーションの。

空想を得る

ドットローダーで行ったマスクトリックを覚えていますか このシリーズのXNUMX番目の記事？ ここでも同じことができます！

上記のすべてのロジックを内部に適用すると、 mask プロパティは、任意の背景構成を使用して、ローダーに派手な色を追加できます。

XNUMXつのデモを取り、それを更新してみましょう。

私がしたのはすべてを更新することです background-* 　 mask-* グラデーションカラーを追加しました。 それと同じくらい簡単ですが、それでも私たちは別のクールなローダーを手に入れます。

では、ドットとバーの間に違いはありませんか？

変わりはない！ できるだけ多くの例をカバーするためにXNUMXつの異なる記事を書きましたが、どちらも同じ手法に依存しています。

1. 形状を作成するためのグラデーション（ドットまたはバー、あるいは他の何か）
2. アニメーション background-size および background-position ローダーアニメーションを作成するには
3. マスクを追加して色のタッチを追加します

バーの丸め

今回は、バーの端を丸めることができる別のことを試してみましょう。

XNUMXつの要素とその ::before & ::after 疑似、XNUMXつの同一のバーを定義します。

.loader { --s: 100px; /* control the size */ display: grid; place-items: center; place-content: center; margin: 0 calc(var(--s) / 2); /* 50px */
}
.loader::before,
.loader::after { content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after { height: var(--s); width: calc(var(--s) / 5); /* 20px */ border-radius: var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

これにより、XNUMXつのバーが得られますが、今回は線形勾配に依存しません。

ここでの秘訣は、これらのバーを素敵なグラデーションで塗りつぶすことです。 連続的なグラデーションをシミュレートするには、で遊ぶ必要があります background プロパティ。 上の図では、緑色の領域がローダーによってカバーされる領域を定義しています。 その領域はグラデーションのサイズである必要があり、計算を行うと、ラベルが付けられた両側を乗算することになります。 S ダイアグラムで、または background-size: var(--s) var(--s).

要素は個別に配置されているため、すべての要素が重なるように、各要素内のグラデーションの位置を更新する必要があります。 このように、実際にはXNUMXつであるにもかかわらず、XNUMXつの連続的なグラデーションをシミュレートしています。

メイン要素（中央に配置）の場合、背景は中央にある必要があります。 以下を使用します。

.loader { /* etc. */ background: linear-gradient() 50% / var(--s) var(--s);
}

左側の疑似要素の場合、左側に背景が必要です

.loader::before { /* etc. */ background: linear-gradient() 0% / var(--s) var(--s);
}

また、右側の疑似の場合、背景を右側に配置する必要があります。

.loader::after { background: linear-gradient() 100% / var(--s) var(--s);
}

同じCSS変数を使用して、 --_i、翻訳に使用したので、次のようなコードを書くことができます。

.loader { --s: 100px; /* control the size */ --c: linear-gradient(/* etc. */); /* control the coloration */ display: grid; place-items: center; place-content: center;
}
.loader::before,
.loader::after{ content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after{ height: var(--s); width: calc(var(--s) / 5); border-radius: var(--s); background: var(--c) calc(50% + var(--_i, 0) * 50%) / var(--s) var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

今、私たちがしなければならないのは、高さをアニメートし、いくつかの遅延を追加することです！ 異なるのは色とサイズのXNUMXつの例です。

包み込む

これまでのところ、複雑に見える読み込みアニメーションを作成するために必要なすべての力に非常に勇気づけられていると感じていることを願っています。 必要なのは、バーを描画するためのグラデーションまたは疑似のXNUMXつの要素と、物事を移動するためのいくつかのキーフレームだけです。 無限の可能性を手に入れるためのレシピはこれですべてです。外に出て、素敵な料理を作り始めましょう。

次の記事まで、私が組み合わせているローダーの面白いコレクションを残しておきます ドット & バー!

---

単一要素ローダー：バー 最初に公開された CSSトリック。 あなたがすべき ニュースレターを入手する.

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