原文：www.florin-pop.com/blog/2019/0…
作者：FLORIN POP
翻译：前端小白

进度条

进度条用于显示用户的一个操作完成了多少。 一个很好的例子是下载进度条，它显示已经下载了多少文件（如果上传文件，它也可以是上传进度条🙂）。

在本文中，我们将来构建一个类似于这种进度条：codepen

HTML

html 结构：

1. 我陪们需要一个容器来显示进度条总长度（100%）- .progress-bar
2. 实际进度的元素，占进度条百分比（如20%） -.progress

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

如你所见，.progress div 具有 data-size 属性。 这将在 JavaScript 中用于实际设置进度元素的宽度。 你马上就会理解我的意思，但首先让我们给这两个元素添加样式。 😄

.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;
}

上面的 css 有几点需要注意：

• 这两个元素都是具有相同高度的矩形（30px），相同的 border-radius
• 将 .progress 的宽度初始化为0，我们会在接下来的 JavaScript 的代码中更改
• .progress 有一个漂亮的 linear-gradient，参考 uiGradients。
• .progress 中添加 transition 来显示动画，当 data-size 的值动态改变时

Javascript

我们需要遍历所有 .progress 元素(在我们的示例中只有一个，但您可以在应用程序中添加多个元素)，以获取它们的 data-set 属性并将其设置为宽度。在本例中，我们将使用百分比(%)。

const progress_bars = document.querySelectorAll('.progress');

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

我们在其中使用了 对象解构 的语法

结论

这个组件还有其他很多地方可以完善：

1. 通过添加不同的类来更改颜色
2. 添加百分比值
3. 通过设置 size 的值来设置动态动画