【譯】建立自定義進度條

原文：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 的值來設置動態動畫