作者：_island

https://juejin.cn/post/6992141459977682951

前言

在一些前端項目中，它們會涉及文件的上傳 / 下載 功能，當文件在進行上傳 / 下載時，我們該怎么更好的向用戶進行進度反饋呢？我們常見的有彈窗式進度條、吸頂式進度條 ...

本篇章將給大家帶來按鈕式進度條，并手把手帶領大家一步步的從零手寫按鈕式進度條 ?????

話不多說，先看看成品再碼

實現效果

原理

創建一個div作為按鈕的總體，在按鈕里邊放入3個div，分別是進度條元素，圖標元素，文本元素，我們將按鈕設置為相對定位，將進度條元素設置為絕對定位，利用top和left值來控制進度條，讓我們用碼實現！

用碼實現

碼出基本樣式

<div class="button">
    <span class="text">download</span>
</div>
復制代碼

 .button {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 160px;
        height: 40px;
        color: black;
        background: white;
        border-radius: 10px;
        margin: 015px;
        font-size: 18px;
        text-decoration: none;
        overflow: hidden;
    }
復制代碼

很快，我們按鈕的基本樣式已經寫出來了，接下來我們先實現進度條效果，在.button元素下創建一個span標簽，并綁定上一個progress類名作為進度條元素。這里不能使用偽元素，因為后續我們需要使用JavaScript來控制按鈕的狀態。而偽元素是不能通過JavaScript被查找到的。

<div class="button">
    <span class="text">download</span>
    <span class="progress"></span>
</div>
復制代碼

把進度條元素的樣式寫上

.progress {
    content: '';
    position: absolute;
    top: 90%;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #4776E6; 
    background: -webkit-linear-gradient(to right, #8E54E9, #4776E6); 
    background: linear-gradient(to right, #8E54E9, #4776E6); 
    transition: all 4s;
  }
復制代碼

我們先把overflow的hidden屬性注釋掉，可以看到現在.progress元素位于按鈕元素的左下邊。露出10%的高度顯示在按鈕可見范圍中。后面我們通過JavaScript的API來獲取到.progress元素，控制該元素的left值就可以實現進度條效果啦！

碼出下載效果

我們使用JavaScript中querySelectorAll方法，獲取.button和.progress元素，及.text元素。

const btn = document.querySelectorAll('.button')[0];
const pr = document.querySelectorAll('.progress')[0];
const text = document.querySelectorAll('.text')[0];
復制代碼

給.button元素添加點擊事件，當按鈕被點擊時我們將按鈕的left值設置為0，也就是進度100%的效果。

btn.addEventListener('click', () => {
  pr.style.left = '0';
});
復制代碼

接下來，我們把按鈕元素的overflow屬性設置為hidden時。

到了這里，我們已經完成了進度條效果，但對比效果圖還是差了那么一點點，當進度條到100%之后，我們需要將.progress元素的top值設置為0，把整塊元素上移。在點擊事件后加入以下代碼：

setTimeout(() => {
  pr.style.top = '0';
  pr.style.transitionDuration = '1s';
  text.style.color = 'white';
  text.innerText = 'downloaded';
}, 4000);
復制代碼

另外，在.progress元素上移后它會將我們的.text元素覆蓋上去，為此我們需要將.text的層級提升下。

.text{
        z-index: 10;
    }
復制代碼

引入圖標

在HTML中引入 font awesome這個圖標庫。

  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet">
復制代碼

我們需要用到的圖標分別：

<i class="fa fa-arrow-down" aria-hidden="true"></i>
<i class="fa fa-download" aria-hidden="true"></i>
<i class="fa fa-check" aria-hidden="true"></i>
復制代碼

我們在.button元素中插入這個i標簽，為了圖標不被進度條元素覆蓋，同樣把層級設置為10。

<i class="fa fa-arrow-down" aria-hidden="true"></i>
復制代碼

i {
    margin: 0 8px 0 0;
    font-size: 16px;
    z-index: 10;
  }
復制代碼

給這個圖標設置一個循環動畫，這樣可以用來吸引用戶眼球從而促使去點擊它 。

@keyframes tapDownload {
  0% {
    transform: translateY(2px);
  }
  100% {
    transform: translateY(0);
  }
}

.fa-arrow-down{
    animation: tapDownload 1s ease infinite;
}
復制代碼

加了這個動效之后，用戶是不是更有點擊欲啦？

動態更換圖標

同樣，我們使用JavaScript中querySelectorAll方法，獲取icon元素。

const icon = document.querySelectorAll('.fa')[0];
復制代碼

通過對比上面三個圖標元素，我們發現它們都有共同的類名為fa，而不同的是后面fa-*這個類，當按鈕狀態改變時就將對應的類名移除后再添加上新的類名即可，在按鈕的點擊事件中添加以下代碼：

btn.addEventListener('click', () => {
  pr.style.left = '0';
  icon.classList.remove('fa-arrow-down');
  icon.classList.add('fa-download');
  text.innerText = 'downloading';
  setTimeout(() => {
    // 忽略了一些代碼
    icon.style.color = 'white';
    icon.classList.remove('fa-download');
    icon.classList.add('fa-check');
  }, 4000);
});
復制代碼

在下載過程中，我們給下載圖標的fa-download類綁定一個幀動畫。

@keyframes downloading {
  0% {
    transform: scale(.7);
  }
  100% {
    transform: scale(1);
  }
}

.fa-download {
    animation: downloading 1s ease infinite alternate-reverse;
  }
復制代碼

最后

本文帶著大家從零實現到一個進度條按鈕，使用前端三件套HTMLCSSJavaScript進行進度條式按鈕開發。還引入的font awesome庫。希望大家能從中有所收獲，寫出更好更炫酷的動畫效果。

閱讀原文：原文鏈接