🎒 🤞🏽 👲🏻 カスタマイズHTML5進捗要素 🤘🏿 🌭 👨🏼‍🚒

プログレスバーは、選択、チェックボックス、入力などとは異なり、サイト上ではめったに見られない要素ですが、それなしではUIキットはできません。

現時点では、HTML5はネイティブのプログレス要素を提供しており、その基本機能はほとんどすべての最新ブラウザー（ caniuse.com/#feat=progress ）でサポートされています。

しかし、たとえばIE11が提供する基本的なスタイリング機能については、控えめに言っても、それほど遠くはありません。それでも、プログレスバーには、アニメーション、グラデーション、プログレススライダーのスムーズな変化、そして最も重要なこととして、表示されるパーセンテージを表示する必要があります。

この記事では、2つの条件に基づいて進行状況バーをカスタマイズする方法を示します。

JSなしすべてのスタイリングはCSSによってのみ行われます。
カスタムプログレスバーを使用した以降の作業では、それだけを使用する必要があります（値を変更し、スライダーの幅を変更するために必要なものを考えたり、正しいパーセンテージに置き換えたりしないでください）。

つまり、プログレスバーを50％に設定する場合、次のようなことを行います。

document.getElementById('progress').value = '50';

レイアウトするときは、CSSツールをできるだけ使用せず、可能な限りJSに頼らないようにすることをすぐに言わなければなりません。したがって、この方法は誰かにとっては不要に思えるかもしれません。また、例ではプリプロセッサが使用されます。プリプロセッサがないと、目的のスタイルを作成するのに非常に長い時間がかかるためです。私はLESSを好みますが、記事を書いているときに、LESSをサポートする健全なサンドボックスが1つも見つかりませんでした。したがって、例はSCSSになります。

それでは、基本的なHTMLマークアップから始めましょう。

 <div class="progress"> <progress max="100" value="0"></progress> <div class="progress-value"></div> <div class="progress-bg"><div class="progress-bar"></div></div> </div>

ネイティブ要素を非表示にします：

 .progress { font: 12px Arial, Tahoma, sans-serif; position: relative; overflow: hidden; } .progress progress { position: absolute; width: 0; height: 0; overflow: hidden; left: -777px; } .progress-bar { overflow: hidden; background: #ac92ec; width: 0; height: 100%; position: absolute; top: 0; left: 0; } .progress-value { color: #333; display: block; line-height: 21px; text-align: center; } .progress-bg { background: #e6e9ed; position: relative; height: 8px; border-radius: 5px; overflow: hidden; }

次に、美しさをもたらします。

 .progress-bar:after { background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); -webkit-background-size: 40px 40px; background-size: 40px 40px; position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; }

アニメーションを追加します。

 @keyframes progress_bar { 0% { background-position: 0 0; } 100% { background-position: -40px 0; } } .progress-bar { transition: width 1s linear; } .progress-bar:after { animation: progress_bar 0.8s linear infinite; }

そして、最も重要なポイントは、進捗状況の幅と、パーセント単位の数値を記録することです。ここではすべてがシンプルで、ロジックは次のようになります。

 .progress progress[value="1"] + .progress-value:before { content: "1%"; } .progress progress[value="1"] ~ .progress-bg .progress-bar { width: 1%; }

推測するのは難しくありません。これらのルールは正確に100個必要です。そのためには、プリプロセッサが必要です。

SCSSコード：

 @for $i from 0 through 100 { .progress progress[value="#{$i}"] { & + .progress-value:before { content : '#{$i}%' } & ~ .progress-bg .progress-bar { width: $i * 1% } } }

LESSのコード：

 .generate-progress(@n, @i: 0) when (@i =< @n) { .progress progress[value="@{i}"] { & + .progress-value:before { content : '@{i}%' } & ~ .progress-bg .progress-bar { width: @i * 1% } } .generate-progress(@n, (@i + 1)); } .generate-progress(100);

最後の例。

もちろん、大きなマイナスがあります-出力には多くのCSSがあります。しかし、私にとっては、この方法の利点は巨大なCSSコードと重複しています。

カスタマイズHTML5進捗要素

More articles: