単一要素ローダー：ドット

このシリーズのローダーを検討しています。 それ以上に、いくつかの一般的なローダーパターンと、単一のdivだけでそれらを再作成する方法を分析しています。 これまでのところ、私たちはバラバラにしています 古典的なスピニングローダー。 それでは、あなたがよく知っていると思われる別のものを見てみましょう。 ドット。

ドットローダーはいたるところにあります。 それらは通常、周りを踊るテキストの省略記号（…）のように見えるXNUMXつのドットで構成されているため、きれいです。

ここでの私たちの目標は、単一のdiv要素からこれと同じものを作成することです。 つまり、ドットごとにXNUMXつのdivや、ドットごとに個別のアニメーションはありません。

上記のローダーの例は、単一のdiv要素、いくつかのCSS宣言を使用して作成されており、疑似要素は使用されていません。 CSSを使用してXNUMXつの手法を組み合わせています background & mask。 完了したら、背景のグラデーションをアニメーション化することで、ドットが連続して上下に移動するときに色が変化する各ドットの錯覚を作成するのにどのように役立つかを確認します。

背景アニメーション

背景アニメーションから始めましょう：

.loader { width: 180px; /* this controls the size */ aspect-ratio: 8/5; /* maintain the scale */ background: conic-gradient(red 50%, blue 0) no-repeat, /* top colors */ conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */ background-size: 200% 50%; animation: back 4s infinite linear; /* applies the animation */
} /* define the animation */
@keyframes back { 0%, /* X Y , X Y */ 100% { background-position: 0% 0%, 0% 100%; } 25% { background-position: 100% 0%, 0% 100%; } 50% { background-position: 100% 0%, 100% 100%; } 75% { background-position: 0% 0%, 100% 100%; }
}

これがかなり簡単に見えることを願っています。 私たちが持っているのは 180px-ワイド .loader ハードカラーをスポーツするXNUMXつの円錐曲線を示す要素はそれぞれXNUMXつの色の間で停止します—最初のグラデーションは上半分に沿って赤と青です .loader、およびXNUMX番目のグラデーションは、下半分に沿って緑と紫です。

ローダーの背景のサイズ設定方法（200% ワイド）、一度に各半分にそれらの色のXNUMXつだけが表示されます。 次に、これらの背景グラデーションの位置を左右に押して、永遠に元に戻すこの小さなアニメーションがあります。

背景のプロパティを扱う場合—特に background-position —私はいつも自分のことを言います 詳細な説明をしているStackOverflowの回答 これがどのように機能するかについて。 CSSの背景のトリックに不安がある場合は、その答えを読んで、次に来ることを支援することを強くお勧めします。

アニメーションでは、最初のレイヤーが Y=0% （上部に配置） X からの変更です 0% 〜へ 100%. XNUMX番目のレイヤーについても同じです X 焙煎が極度に未発達や過発達のコーヒーにて、クロロゲン酸の味わいへの影響は強くなり、金属を思わせる味わいと乾いたマウスフィールを感じさせます。 Y=100% （下部に配置）。

なぜ使用するのか conic-gradient() linear-gradient()?

良い質問！ 直感的には、線形グラデーションを使用して、次のようなXNUMX色のグラデーションを作成する必要があります。

linear-gradient(90deg, red 50%, blue 0)

しかし、私たちはまた、 conic-gradient() —そしてより少ないコードで。 コードを減らし、その過程で新しいトリックを学びます！

色を左右にスライドさせることは、色を変更しているように見せるための良い方法ですが、代わりに即座に色を変更する方が良いかもしれません。そうすれば、ローダードットがXNUMXつの色を同時に点滅させる可能性はありません。 。 これを行うには、を変更しましょう animationからのタイミング関数 linear 〜へ steps(1)

ローダードット

あなたが一緒に続いた場合 このシリーズの最初の記事、私はあなたが次に来るものを知っているに違いない： CSSマスク！ マスクをとても素晴らしいものにしているのは、マスクが私たちに一種の 背景の「切り取り」部分 別の要素の形で。 したがって、この場合、いくつかのドットを作成し、ドットを介して背景のグラデーションを表示し、ドットの一部ではない背景の部分を切り取ります。

使用します radial-gradient() このため：

.loader { width: 180px; aspect-ratio: 8/5; mask: radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat; mask-size: 25% 40%; /* the size of our dots */
}

そこには重複したコードがいくつかあるので、CSS変数を作成して物事をスリム化しましょう：

.loader { width: 180px; aspect-ratio: 8/5; --_g: radial-gradient(#000 68%, #0000 71%) no-repeat; mask: var(--_g),var(--_g),var(--_g); mask-size: 25% 40%;
}

かっこいい。 しかし、今度は、アニメーション化されたグラデーション間でドットを上下に移動するのに役立つ新しいアニメーションが必要です。

.loader { /* same as before */ animation: load 2s infinite;
} @keyframes load { /* X Y, X Y, X Y */ 0% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */ 16.67% { mask-position: 0% 100%, 50% 0% , 100% 0%; } 33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; } 50% { mask-position: 0% 100%, 50% 100%, 100% 100%; } /* all of them at the bottom */ 66.67% { mask-position: 0% 0% , 50% 100%, 100% 100%; } 83.33% { mask-position: 0% 0% , 50% 0% , 100% 100%; } 100% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */
}

はい、それはそこにある合計XNUMXつの放射状グラデーションであり、すべて同じ構成と同じサイズです。アニメーションはそれぞれの位置を更新します。 に注意してください X 各ドットの座標は固定されています。 The mask-position 最初のドットが左側になるように定義されます（0%）、中央のXNUMX番目のもの（50%）、および右側のXNUMX番目のもの（100%）。 更新するだけです Y からのコーディネート 0% 〜へ 100% ドットを踊らせるために。

これが私たちが得るものです：

これをグラデーションアニメーションと組み合わせると、魔法が起こり始めます。

ドットローダーのバリエーション

最後の例で作成したCSS変数を使用すると、新しい色に交換したり、同じローダーのバリエーションをさらに作成したりすることがはるかに簡単になります。 たとえば、さまざまな色とサイズ：

私たちのドットの別の動きはどうですか？

ここでは、アニメーションを更新してさまざまな位置を考慮するだけで、同じコード構造の別のローダーを取得できます。

マスクレイヤーに使用したアニメーション手法を背景レイヤーで使用して、単一の色でさまざまなローダーを作成することもできます。 これについての詳細な記事を書きました。 同じコード構造から、いくつかの値を変更するだけでさまざまなバリエーションを作成できることがわかります。 記事の最後でいくつかの例を共有しています。

ドットがXNUMXつあるローダーはどうですか？

これは、同じ手法を使用しているが、より単純なロジックを使用しているため、かなり簡単に理解できるはずです。

これは私もアニメートしているローダーの別の例です radial-gradient と組み合わせること CSSフィルター & mix-blend-mode ぼろぼろの効果を作成するには：

コードをチェックすると、私が実際に行っているのはアニメーション化だけであることがわかります。 background-position、前のローダーで行ったのとまったく同じですが、 background-size ドットを吸収するにつれてブロブが大きくなるように見せます。

そのブロブ効果の背後にある魔法を理解したい場合は、参照することができます これらのインタラクティブなスライド （Chromeのみ） アナチューダー 彼女はトピックをとてもよくカバーしているからです！

これが別のドットローダーのアイデアです。今回は別の手法を使用しています。

これはたった10個のCSS宣言とキーフレームです。 メイン要素とそのXNUMXつの疑似要素は、XNUMXつの放射状グラデーションを持つ同じ背景構成を持っています。 それぞれがXNUMXつのドットを作成し、合計でXNUMXつになります。 アニメーションは、ドットごとに異なる遅延を使用して、グラデーションを上から下に移動します。

ああ、このデモがCSSグリッドをどのように使用しているかに注意してください。 これにより、グリッドのデフォルトを活用できます stretch 両方の疑似要素が親の領域全体をカバーするように配置します。 サイジングの必要はありません！ で少し押してください translate() そして、私たちはすべて準備ができています。

その他の例！

ポイントを家に帰すために、私たちが見たものの実際のバリエーションである追加の例をたくさん残したいと思います。 デモを見ると、ここで取り上げたアプローチは非常に柔軟で、多くの設計の可能性が開かれていることがわかります。

次は…

さて、この記事ではドットローダーと最後の記事でスピナーについて説明しました。 このXNUMX部構成のシリーズの次の記事では、別の一般的なタイプのローダーに注目します。 バー。 これまでに学んだことの多くを取り上げ、それらを拡張して、コードを最小限に抑え、可能な限り柔軟性を備えた、さらに別の単一要素ローダーを作成する方法を見ていきます。

---

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

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