如何创建自定义进度栏

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结构，我们需要两件事：

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
实际进度元素，它将基本跟踪当前进度(例如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的几点注意事项：

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宽度设置为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
当它的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

is the same as:

是相同的：

const size = bar.dataset.size

but you might know that already ?.

但您可能已经知道了？