Originally published on www.florin-pop.com

最初發布在www.florin-pop.com

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

每周編碼挑戰第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 ?).

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

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

在本文中，我們將構建這種進度條 ：

HTML (The HTML)

For the HTML structure we need two things:

對于HTML結構，我們需要兩件事：

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

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

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

   實際進度元素，它將基本跟蹤當前進度(例如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中用于實際設置進度的width 。 稍后您會明白我的意思，但首先讓我們設計這兩個元素的樣式。 ？

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:

關于上述CSS的幾點注意事項：

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

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

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

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

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

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

4. 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

   當它的data-size屬性的值動態更改時，添加到.progress的transition用于創建漂亮的動畫

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元素(在我們的示例中僅為一個，但是您可以在應用程序中添加多個)，以獲取其data-set值并將其設置為寬度。 在這種情況下，我們將使用百分比( % )。

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 ?.

但您可能已經知道了？

結論 (Conclusion)

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

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

1. Add multiple color variants via different classes

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

2. Add the percentage value
   添加百分比值
3. Make it animate dynamically by changing the size value.
   通過更改大小值使其動態制作動畫。

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

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

Happy Coding! ?

編碼愉快！ ？

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