1642923600
1つの要素を使用してCSSのみのローダーを作成する
Webサイトがある場合は、ローダーを使用すると、ユーザーがリンクまたはボタンをクリックすると何かが起こっていることを知ることができるので便利です。
このローダーコンポーネントは多くの場所で使用でき、可能な限りシンプルにする必要があります。
<div>この投稿では、1行と数行のCSSコードで2種類のローダーを構築する方法を説明します。これだけでなく、同じコードからさまざまなバリエーションを簡単に作成できるようにカスタマイズできるようにします。
これが私たちが構築するものです：
CSSのみのスピナーとプログレスローダー
スピナーローダーを作成する方法
以下は、私たちが構築しているもののデモです。
https://codepen.io/t_afif/pen/PoJyaNy
<div class="loader"></div>
<div class="loader" style="--b: 15px;--c: blue;width: 120px;--n: 8"></div>
<div class="loader" style="--b: 5px;--c: green;width: 80px;--n: 6;--g: 20deg"></div>
<div class="loader" style="--b: 20px;--c: #000;width: 80px;--n: 15;--g: 7deg"></div>
.loader {
--b: 10px; /* border thickness */
--n: 10; /* number of dashes*/
--g: 10deg; /* gap between dashes*/
--c: red; /* the color */
width: 100px; /* size */
aspect-ratio: 1;
border-radius: 50%;
padding: 1px;
background: conic-gradient(#0000,var(--c)) content-box;
-webkit-mask:
repeating-conic-gradient(#0000 0deg,
#000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
#0000 calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
mask:
repeating-conic-gradient(#0000 0deg,
#000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
#0000 calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
-webkit-mask-composite: destination-in;
mask-composite: intersect;
animation: load 1s infinite steps(var(--n));
}
@keyframes load {to{transform: rotate(1turn)}}
同じコードを使用する4つの異なるローダーがあります。いくつかの変数を変更するだけで、CSSコードに触れることなく新しいローダーを生成できます。
変数は次のように定義されます。
--b境界線の太さを定義します。--nダッシュの数を定義します。--gダッシュ間のギャップを定義します。円形の要素を扱っているので、これは角度の値です。--c色を定義します。
これは、さまざまな変数を確認するための図です。
スピナーローダーのCSS変数
CSSコードに取り組みましょう。別の図を使用して、ローダーの段階的な構成を説明します。
スピナーローダーのステップバイステップの図
まず、次のような円を作成します。
.loader {
width: 100px; /* size */
aspect-ratio: 1;
border-radius: 50%;
}これまでのところ複雑なことはありません。これを使用すると、サイズを制御するためにaspect-ratio1つの値（）のみを変更できることに注意してください。width
次に、透明から定義された色（変数--c）に円錐曲線の色を追加します。
.loader {
width:100px; /* size */
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(#0000,var(--c));
}このステップでmaskは、円の一部を繰り返し非表示にするプロパティを紹介します。--nこれはと--d変数に依存します。図をよく見ると、次のパターンに気付くでしょう。
visible part
invisible part
visible part
invisible part
etcこれを行うには、を使用しますrepeating-conic-gradient(#000 0 X, #0000 0 Y)。から0までXは不透明な色（可視部分）があり、からXまでYは透明な色（不可視部分）があります。
変数を紹介します。
- との間の式がになる
gように、各可視部分の間に等しいギャップが必要です。XYX = Y - g n目に見える部分が必要なので、の式YはY = 360deg/nです。完全な円は360deg、単純にで割ったものです。n
これまでのコードは次のとおりです。
.loader {
width: 100px; /* size */
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(#0000,var(--c));
mask: repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n))
}この次のステップは最も難しいステップです。最終的な形状を取得するために、別のマスクを適用して一種の穴を作成する必要があるためです。これを行うにはradial-gradient()、変数で論理的にaを使用しますb。
radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0)に等しい厚さを削除するところから完全な円b。
これを前のマスクに追加します。
.loader {
width: 100px; /* size */
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(#0000,var(--c));
mask:
radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0),
repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n))
}2つのマスクレイヤーがありますが、結果は私たちが望むものではありません。次のようになります。
奇妙に見えるかもしれませんが、それは論理的です。「最終的な」可視部分は、各マスクレイヤーの各可視部分の合計に他なりません。この動作は、を使用して変更できますmask-composite。このプロパティを説明するために記事全体が必要になるので、単純に値を示します。
intersect私たちの場合、 （そしてdestination-out接頭辞付きのプロパティについて）考慮する必要があります。コードは次のようになります。
.loader {
width: 100px; /* size */
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(#0000,var(--c));
mask:
radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0),
repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n));
-webkit-mask-composite: destination-in;
mask-composite: intersect;
}形が出来上がりました！アニメーションが欠けているだけです。後者は無限回転です。
注意すべき唯一のことは、stepsアニメーションを使用して、固定されたダッシュと動く色の錯覚を作成しているということです。
これが違いを見るためのイラストです
線形アニメーションとステップアニメーション
最初のものは形状の線形で連続的な回転であり（私たちが望むものではありません）、2番目のものは離散アニメーション（私たちが望むもの）です。
アニメーションを含む完全なコードは次のとおりです。
<div class="loader"></div>
<div class="loader" style="--b: 15px;--c: blue;width: 120px;--n: 8"></div>
<div class="loader" style="--b: 5px;--c: green;width: 80px;--n: 6;--g: 20deg"></div>
<div class="loader" style="--b: 20px;--c: #000;width: 80px;--n: 15;--g: 7deg"></div>
.loader {
--b: 10px; /* border thickness */
--n: 10; /* number of dashes*/
--g: 10deg; /* gap between dashes*/
--c: red; /* the color */
width: 100px; /* size */
aspect-ratio: 1;
border-radius: 50%;
padding: 1px;
background: conic-gradient(#0000,var(--c)) content-box;
-webkit-mask:
repeating-conic-gradient(#0000 0deg,
#000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
#0000 calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
mask:
repeating-conic-gradient(#0000 0deg,
#000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
#0000 calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
-webkit-mask-composite: destination-in;
mask-composite: intersect;
animation: load 1s infinite steps(var(--n));
}
@keyframes load {to{transform: rotate(1turn)}}
説明で使用したコードとの違いに気付くでしょう。
padding: 1px背景を追加して設定していますcontent-box+/1degの色の間にありますrepeating-conic-gradient()- 内側の色には数パーセントの違いがあります
radial-gradient()
これらは、視覚的な不具合を回避するためのいくつかの修正です。グラデーションは「奇妙な」結果を生成することが知られているため、それらを回避するためにいくつかの値を手動で調整する必要があります。
プログレスローダーを作成する方法
前のローダーと同様に、概要から始めましょう。
https://codepen.io/t_afif/pen/bGoNddg
<div class="loader"></div>
<div class="loader" style="--s:10px;--n:10;color:red"></div>
<div class="loader" style="--g:0px;color:darkblue"></div>
<div class="loader" style="--s:25px;--g:8px;border-radius:50px;color:green"></div>
.loader {
--n:5; /* control the number of stripes */
--s:30px; /* control the width of stripes */
--g:5px; /* control the gap between stripes */
width:calc(var(--n)*(var(--s) + var(--g)) - var(--g));
height:30px;
padding:var(--g);
margin:5px auto;
border:1px solid;
background:
repeating-linear-gradient(90deg,
currentColor 0 var(--s),
#0000 0 calc(var(--s) + var(--g))
) left / calc((var(--n) + 1)*(var(--s) + var(--g))) 100%
no-repeat content-box;
animation: load 1.5s steps(calc(var(--n) + 1)) infinite;
}
@keyframes load {
0% {background-size: 0% 100%}
}
以前のローダーと同じ構成になっています。ローダーを制御するCSS変数：
--nダッシュ/ストライプの数を定義します。--s各ストライプの幅を定義します。--gストライプ間のギャップを定義します。
CSS変数の図
上の図から、要素の幅が3つの変数に依存することがわかります。CSSは次のようになります。
.loader {
width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
height: 30px; /* use any value you want here */
padding: var(--g);
border: 1px solid;
}padding両側にギャップを設定するために使用します。その場合、幅はストライプの数に幅とギャップを掛けたものに等しくなります。Nストライプにはギャップがあるため、1つのギャップを削除しN-1ます。
ストライプを作成するには、以下のグラデーションを使用します。
repeating-linear-gradient(90deg,
currentColor 0 var(--s),
#0000 0 calc(var(--s) + var(--g))
)From 0tosは定義された色であり、from stos + gは透明色（ギャップ）です。
currentColorプロパティの値であるwhichを使用していcolorます。内部に色を定義しなかったためborder、の値にも使用されることに注意してくださいcolor。ローダーの色を変更したい場合は、colorプロパティを設定するだけです。
これまでのコード：
.loader {
width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
height: 30px;
padding: var(--g);
border: 1px solid;
background:
repeating-linear-gradient(90deg,
currentColor 0 var(--s),
#0000 0 calc(var(--s) + var(--g))
) left / 100% 100% content-box no-repeat;
}content-boxグラデーションがパディング領域をカバーしないようにするために使用しています。100% 100%次に、左の位置に等しいサイズを定義します。
アニメーションの時間です。このローダーでは、background-sizefrom 0% 100%toをアニメーション化します。これは、fromから toへ100% 100%のグラデーションの幅を意味します。0%100%
steps()以前のローダーと同様に、連続的なアニメーションではなく、個別のアニメーションを使用することに依存します。
線形アニメーションとステップアニメーション
2つ目は作成したいもので、次のコードを追加することで実現できます。
.loader {
animation: load 1.5s steps(var(--n)) infinite;
}
@keyframes load {
0% {background-size: 0% 100%}
}最後の図をよく見ると、アニメーションが完全ではないことがわかります。を使用したとしても、最後に1つのストライプがありませんN。これはバグではありませんが、どのように機能するsteps()はずです。
これを克服するには、追加のステップを追加する必要があります。background-sizeグラデーションを増やしてN+1ストライプを含め、を使用しますsteps(N+1)。これにより、最終的なコードが表示されます。
.loader {
width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
height: 30px;
padding: var(--g);
margin: 5px auto;
border: 1px solid;
background:
repeating-linear-gradient(90deg,
currentColor 0 var(--s),
#0000 0 calc(var(--s) + var(--g))
) left / calc((var(--n) + 1)*(var(--s) + var(--g))) 100%
content-box no-repeat;
animation: load 1.5s steps(calc(var(--n) + 1)) infinite;
}
@keyframes load {
0% {background-size: 0% 100%}
}グラデーションの幅は、N+1（ではなく100%） 1つのストライプとギャップの幅を掛けたものに等しいことに注意してください。
結論
このチュートリアルを楽しんでいただけたでしょうか。興味があれば、私は500以上のCSSのみのシングルdivローダーを作成しました。また、バックグラウンドプロパティのみを使用してドットローダーを作成する方法を説明する別のチュートリアルを作成しました。
以下の便利なリンクを見つけて、複雑さのために完全には説明しなかった、私が使用したいくつかのプロパティの詳細を確認してください。
mask-composite：https ：//css-tricks.com/mask-compositing-the-crash-course/steps()：https ：//developer.mozilla.org/en-US/docs/Web/CSS/easing-function#the_steps_class_of_easing_functions
読んでくれてありがとう！
リンク：https ：//www.freecodecamp.org/news/how-to-create-a-css-only-loader/
What is GEEK
Buddha Community
1642923600
1つの要素を使用してCSSのみのローダーを作成する
Webサイトがある場合は、ローダーを使用すると、ユーザーがリンクまたはボタンをクリックすると何かが起こっていることを知ることができるので便利です。
このローダーコンポーネントは多くの場所で使用でき、可能な限りシンプルにする必要があります。
<div>この投稿では、1行と数行のCSSコードで2種類のローダーを構築する方法を説明します。これだけでなく、同じコードからさまざまなバリエーションを簡単に作成できるようにカスタマイズできるようにします。
これが私たちが構築するものです：
CSSのみのスピナーとプログレスローダー
スピナーローダーを作成する方法
以下は、私たちが構築しているもののデモです。
https://codepen.io/t_afif/pen/PoJyaNy
<div class="loader"></div>
<div class="loader" style="--b: 15px;--c: blue;width: 120px;--n: 8"></div>
<div class="loader" style="--b: 5px;--c: green;width: 80px;--n: 6;--g: 20deg"></div>
<div class="loader" style="--b: 20px;--c: #000;width: 80px;--n: 15;--g: 7deg"></div>
.loader {
--b: 10px; /* border thickness */
--n: 10; /* number of dashes*/
--g: 10deg; /* gap between dashes*/
--c: red; /* the color */
width: 100px; /* size */
aspect-ratio: 1;
border-radius: 50%;
padding: 1px;
background: conic-gradient(#0000,var(--c)) content-box;
-webkit-mask:
repeating-conic-gradient(#0000 0deg,
#000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
#0000 calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
mask:
repeating-conic-gradient(#0000 0deg,
#000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
#0000 calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
-webkit-mask-composite: destination-in;
mask-composite: intersect;
animation: load 1s infinite steps(var(--n));
}
@keyframes load {to{transform: rotate(1turn)}}
同じコードを使用する4つの異なるローダーがあります。いくつかの変数を変更するだけで、CSSコードに触れることなく新しいローダーを生成できます。
変数は次のように定義されます。
--b境界線の太さを定義します。--nダッシュの数を定義します。--gダッシュ間のギャップを定義します。円形の要素を扱っているので、これは角度の値です。--c色を定義します。
これは、さまざまな変数を確認するための図です。
スピナーローダーのCSS変数
CSSコードに取り組みましょう。別の図を使用して、ローダーの段階的な構成を説明します。
スピナーローダーのステップバイステップの図
まず、次のような円を作成します。
.loader {
width: 100px; /* size */
aspect-ratio: 1;
border-radius: 50%;
}これまでのところ複雑なことはありません。これを使用すると、サイズを制御するためにaspect-ratio1つの値（）のみを変更できることに注意してください。width
次に、透明から定義された色（変数--c）に円錐曲線の色を追加します。
.loader {
width:100px; /* size */
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(#0000,var(--c));
}このステップでmaskは、円の一部を繰り返し非表示にするプロパティを紹介します。--nこれはと--d変数に依存します。図をよく見ると、次のパターンに気付くでしょう。
visible part
invisible part
visible part
invisible part
etcこれを行うには、を使用しますrepeating-conic-gradient(#000 0 X, #0000 0 Y)。から0までXは不透明な色（可視部分）があり、からXまでYは透明な色（不可視部分）があります。
変数を紹介します。
- との間の式がになる
gように、各可視部分の間に等しいギャップが必要です。XYX = Y - g n目に見える部分が必要なので、の式YはY = 360deg/nです。完全な円は360deg、単純にで割ったものです。n
これまでのコードは次のとおりです。
.loader {
width: 100px; /* size */
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(#0000,var(--c));
mask: repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n))
}この次のステップは最も難しいステップです。最終的な形状を取得するために、別のマスクを適用して一種の穴を作成する必要があるためです。これを行うにはradial-gradient()、変数で論理的にaを使用しますb。
radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0)に等しい厚さを削除するところから完全な円b。
これを前のマスクに追加します。
.loader {
width: 100px; /* size */
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(#0000,var(--c));
mask:
radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0),
repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n))
}2つのマスクレイヤーがありますが、結果は私たちが望むものではありません。次のようになります。
奇妙に見えるかもしれませんが、それは論理的です。「最終的な」可視部分は、各マスクレイヤーの各可視部分の合計に他なりません。この動作は、を使用して変更できますmask-composite。このプロパティを説明するために記事全体が必要になるので、単純に値を示します。
intersect私たちの場合、 （そしてdestination-out接頭辞付きのプロパティについて）考慮する必要があります。コードは次のようになります。
.loader {
width: 100px; /* size */
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(#0000,var(--c));
mask:
radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0),
repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n));
-webkit-mask-composite: destination-in;
mask-composite: intersect;
}形が出来上がりました！アニメーションが欠けているだけです。後者は無限回転です。
注意すべき唯一のことは、stepsアニメーションを使用して、固定されたダッシュと動く色の錯覚を作成しているということです。
これが違いを見るためのイラストです
線形アニメーションとステップアニメーション
最初のものは形状の線形で連続的な回転であり（私たちが望むものではありません）、2番目のものは離散アニメーション（私たちが望むもの）です。
アニメーションを含む完全なコードは次のとおりです。
<div class="loader"></div>
<div class="loader" style="--b: 15px;--c: blue;width: 120px;--n: 8"></div>
<div class="loader" style="--b: 5px;--c: green;width: 80px;--n: 6;--g: 20deg"></div>
<div class="loader" style="--b: 20px;--c: #000;width: 80px;--n: 15;--g: 7deg"></div>
.loader {
--b: 10px; /* border thickness */
--n: 10; /* number of dashes*/
--g: 10deg; /* gap between dashes*/
--c: red; /* the color */
width: 100px; /* size */
aspect-ratio: 1;
border-radius: 50%;
padding: 1px;
background: conic-gradient(#0000,var(--c)) content-box;
-webkit-mask:
repeating-conic-gradient(#0000 0deg,
#000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
#0000 calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
mask:
repeating-conic-gradient(#0000 0deg,
#000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
#0000 calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
-webkit-mask-composite: destination-in;
mask-composite: intersect;
animation: load 1s infinite steps(var(--n));
}
@keyframes load {to{transform: rotate(1turn)}}
説明で使用したコードとの違いに気付くでしょう。
padding: 1px背景を追加して設定していますcontent-box+/1degの色の間にありますrepeating-conic-gradient()- 内側の色には数パーセントの違いがあります
radial-gradient()
これらは、視覚的な不具合を回避するためのいくつかの修正です。グラデーションは「奇妙な」結果を生成することが知られているため、それらを回避するためにいくつかの値を手動で調整する必要があります。
プログレスローダーを作成する方法
前のローダーと同様に、概要から始めましょう。
https://codepen.io/t_afif/pen/bGoNddg
<div class="loader"></div>
<div class="loader" style="--s:10px;--n:10;color:red"></div>
<div class="loader" style="--g:0px;color:darkblue"></div>
<div class="loader" style="--s:25px;--g:8px;border-radius:50px;color:green"></div>
.loader {
--n:5; /* control the number of stripes */
--s:30px; /* control the width of stripes */
--g:5px; /* control the gap between stripes */
width:calc(var(--n)*(var(--s) + var(--g)) - var(--g));
height:30px;
padding:var(--g);
margin:5px auto;
border:1px solid;
background:
repeating-linear-gradient(90deg,
currentColor 0 var(--s),
#0000 0 calc(var(--s) + var(--g))
) left / calc((var(--n) + 1)*(var(--s) + var(--g))) 100%
no-repeat content-box;
animation: load 1.5s steps(calc(var(--n) + 1)) infinite;
}
@keyframes load {
0% {background-size: 0% 100%}
}
以前のローダーと同じ構成になっています。ローダーを制御するCSS変数：
--nダッシュ/ストライプの数を定義します。--s各ストライプの幅を定義します。--gストライプ間のギャップを定義します。
CSS変数の図
上の図から、要素の幅が3つの変数に依存することがわかります。CSSは次のようになります。
.loader {
width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
height: 30px; /* use any value you want here */
padding: var(--g);
border: 1px solid;
}padding両側にギャップを設定するために使用します。その場合、幅はストライプの数に幅とギャップを掛けたものに等しくなります。Nストライプにはギャップがあるため、1つのギャップを削除しN-1ます。
ストライプを作成するには、以下のグラデーションを使用します。
repeating-linear-gradient(90deg,
currentColor 0 var(--s),
#0000 0 calc(var(--s) + var(--g))
)From 0tosは定義された色であり、from stos + gは透明色（ギャップ）です。
currentColorプロパティの値であるwhichを使用していcolorます。内部に色を定義しなかったためborder、の値にも使用されることに注意してくださいcolor。ローダーの色を変更したい場合は、colorプロパティを設定するだけです。
これまでのコード：
.loader {
width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
height: 30px;
padding: var(--g);
border: 1px solid;
background:
repeating-linear-gradient(90deg,
currentColor 0 var(--s),
#0000 0 calc(var(--s) + var(--g))
) left / 100% 100% content-box no-repeat;
}content-boxグラデーションがパディング領域をカバーしないようにするために使用しています。100% 100%次に、左の位置に等しいサイズを定義します。
アニメーションの時間です。このローダーでは、background-sizefrom 0% 100%toをアニメーション化します。これは、fromから toへ100% 100%のグラデーションの幅を意味します。0%100%
steps()以前のローダーと同様に、連続的なアニメーションではなく、個別のアニメーションを使用することに依存します。
線形アニメーションとステップアニメーション
2つ目は作成したいもので、次のコードを追加することで実現できます。
.loader {
animation: load 1.5s steps(var(--n)) infinite;
}
@keyframes load {
0% {background-size: 0% 100%}
}最後の図をよく見ると、アニメーションが完全ではないことがわかります。を使用したとしても、最後に1つのストライプがありませんN。これはバグではありませんが、どのように機能するsteps()はずです。
これを克服するには、追加のステップを追加する必要があります。background-sizeグラデーションを増やしてN+1ストライプを含め、を使用しますsteps(N+1)。これにより、最終的なコードが表示されます。
.loader {
width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
height: 30px;
padding: var(--g);
margin: 5px auto;
border: 1px solid;
background:
repeating-linear-gradient(90deg,
currentColor 0 var(--s),
#0000 0 calc(var(--s) + var(--g))
) left / calc((var(--n) + 1)*(var(--s) + var(--g))) 100%
content-box no-repeat;
animation: load 1.5s steps(calc(var(--n) + 1)) infinite;
}
@keyframes load {
0% {background-size: 0% 100%}
}グラデーションの幅は、N+1（ではなく100%） 1つのストライプとギャップの幅を掛けたものに等しいことに注意してください。
結論
このチュートリアルを楽しんでいただけたでしょうか。興味があれば、私は500以上のCSSのみのシングルdivローダーを作成しました。また、バックグラウンドプロパティのみを使用してドットローダーを作成する方法を説明する別のチュートリアルを作成しました。
以下の便利なリンクを見つけて、複雑さのために完全には説明しなかった、私が使用したいくつかのプロパティの詳細を確認してください。
mask-composite：https ：//css-tricks.com/mask-compositing-the-crash-course/steps()：https ：//developer.mozilla.org/en-US/docs/Web/CSS/easing-function#the_steps_class_of_easing_functions
読んでくれてありがとう！
リンク：https ：//www.freecodecamp.org/news/how-to-create-a-css-only-loader/