Originally published on www.florin-pop.com

最初發(fā)布在www.florin-pop.com

The theme for week #14 of the Weekly Coding Challenge is:

每周編碼挑戰(zhàn)第14周的主題是：

進度條 (Progress Bar)

A progress bar is used to show how far a user action is still in process until it's completed. A good example is a download progress bar which shows you how much of the file is downloaded already (or it could also be an upload progress bar if you upload files ?).

進度條用于顯示用戶操作在完成之前還有多長時間。 一個很好的例子是下載進度條，它顯示了已經(jīng)下載了多少文件(或者，如果您上傳文件，它也可以是上傳進度條？)。

In this article we're going to build this kind of a Progress Bar:

在本文中，我們將構(gòu)建這種進度條 ：

HTML (The HTML)

For the HTML structure we need two things:

對于HTML結(jié)構(gòu)，我們需要兩件事：

a container which will display the total length (100%) of the progress bar - .progress-bar

一種容器，其將顯示進度條的總長度(100％) - .progress-bar

the actual progress element which will basically track the current progress (e.g. 20%) - .progress

實際進度元素，它將基本跟蹤當(dāng)前進度(例如20％)-. .progress

<div class="progress-bar"><div data-size="20" class="progress"></div> </div>

As you can see the .progress div has a data-size attribute. This will be used in JavaScript to actually set the width of the progress. You'll see in a moment what I mean, but first let's style these two elements. ?

如您所見， .progress div具有data-size屬性。 這將在JavaScript中用于實際設(shè)置進度的width 。 稍后您會明白我的意思，但首先讓我們設(shè)計這兩個元素的樣式。 ？

CSS (The CSS)

.progress-bar {background-color: #fefefe;border-radius: 3px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);margin: 15px;height: 30px;width: 500px;max-width: 100%; }.progress {background: #ad5389;background: -webkit-linear-gradient(to bottom, #3c1053, #ad5389);background: linear-gradient(to bottom, #3c1053, #ad5389);border-radius: 3px;height: 30px;width: 0;transition: width 0.5s ease-in; }

Few things to note regarding the above CSS:

關(guān)于上述CSS的幾點注意事項：

both elements are rectangles that have the same height (30px) and the same border-radius

這兩個元素都是具有相同高度( 30px )和相同border-radius矩形

initially the .progress width it set to 0 and we'll update this in the JavaScript code below

最初將.progress寬度設(shè)置為0 ，我們將在下面的JavaScript代碼中對其進行更新

also the .progress has a nice linear-gradient from uiGradients

也.progress有一個很好的linear-gradient從uiGradients

the transition added to the .progress is used to create a nice animation when the value of it's data-size attribute is dynamically changed

當(dāng)它的data-size屬性的值動態(tài)更改時，添加到.progress的transition用于創(chuàng)建漂亮的動畫

JavaScript (The JavaScript)

For this we'll need to loop over all the .progress elements (in our example is only one, but you can add multiple ones in an app) to get their data-set value and to set it as their width. We'll use percentage (%) in this case.

為此，我們需要遍歷所有.progress元素(在我們的示例中僅為一個，但是您可以在應(yīng)用程序中添加多個)，以獲取其data-set值并將其設(shè)置為寬度。 在這種情況下，我們將使用百分比( % )。

const progress_bars = document.querySelectorAll('.progress');progress_bars.forEach(bar => {const { size } = bar.dataset;bar.style.width = `${size}%`; });

We're using a little bit of Object Destructuring.

我們正在使用一些對象分解 。

const { size } = bar.dataset

const { size } = bar.dataset

is the same as:

是相同的：

const size = bar.dataset.size

const size = bar.dataset.size

but you might know that already ?.

但您可能已經(jīng)知道了？

結(jié)論 (Conclusion)

There are multiple things you could do to improve this component. Some of which are:

您可以采取多種措施來改進此組件。 其中一些是：

Add multiple color variants via different classes

通過不同的類別添加多種顏色

Add the percentage value

添加百分比值

Make it animate dynamically by changing the size value.

通過更改大小值使其動態(tài)制作動畫。

I hope you enjoyed it and make sure you share with me what you're creating!

希望您喜歡它，并確保與我分享您正在創(chuàng)造的東西！

Happy Coding! ?

編碼愉快！ ？

翻譯自: https://www.freecodecamp.org/news/how-to-create-a-custom-progress-bar/

總結(jié)

以上是生活随笔為你收集整理的如何创建自定义进度栏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。