作者：_island
https://juejin.cn/post/6992141459977682951
前言
在一些前端項(xiàng)目中，它們會涉及文件的上傳 / 下載 功能，當(dāng)文件在進(jìn)行上傳 / 下載時(shí)，我們該怎么更好的向用戶進(jìn)行進(jìn)度反饋呢？我們常見的有彈窗式進(jìn)度條、吸頂式進(jìn)度條 ...
本篇章將給大家?guī)?/span>按鈕式進(jìn)度條，并手把手帶領(lǐng)大家一步步的從零手寫按鈕式進(jìn)度條 ?????
話不多說，先看看成品再碼
實(shí)現(xiàn)效果
1.gif原理
創(chuàng)建一個(gè)div作為按鈕的總體，在按鈕里邊放入3個(gè)div，分別是進(jìn)度條元素，圖標(biāo)元素，文本元素，我們將按鈕設(shè)置為相對定位，將進(jìn)度條元素設(shè)置為絕對定位，利用top和left值來控制進(jìn)度條，讓我們用碼實(shí)現(xiàn)！
2.png用碼實(shí)現(xiàn)
碼出基本樣式
<div class="button">
<span class="text">download</span>
</div>
復(fù)制代碼
.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;
}
復(fù)制代碼
3.png
很快，我們按鈕的基本樣式已經(jīng)寫出來了，接下來我們先實(shí)現(xiàn)進(jìn)度條效果，在.button元素下創(chuàng)建一個(gè)span標(biāo)簽，并綁定上一個(gè)progress類名作為進(jìn)度條元素。這里不能使用偽元素，因?yàn)楹罄m(xù)我們需要使用JavaScript來控制按鈕的狀態(tài)。而偽元素是不能通過JavaScript被查找到的。
后續(xù)我會出一篇關(guān)于偽元素的文章 關(guān)注我 不迷路 ?? ??
<div class="button">
<span class="text">download</span>
<span class="progress"></span>
</div>
復(fù)制代碼
把進(jìn)度條元素的樣式寫上
.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;
}
復(fù)制代碼
我們先把overflow的hidden屬性注釋掉，可以看到現(xiàn)在.progress元素位于按鈕元素的左下邊。露出10%的高度顯示在按鈕可見范圍中。后面我們通過JavaScript的API來獲取到.progress元素，控制該元素的left值就可以實(shí)現(xiàn)進(jìn)度條效果啦！
4.png碼出下載效果
我們使用JavaScript中querySelectorAll方法，獲取.button和.progress元素，及.text元素。
const btn = document.querySelectorAll('.button')[0];
const pr = document.querySelectorAll('.progress')[0];
const text = document.querySelectorAll('.text')[0];
復(fù)制代碼
給.button元素添加點(diǎn)擊事件，當(dāng)按鈕被點(diǎn)擊時(shí)我們將按鈕的left值設(shè)置為0，也就是進(jìn)度100%的效果。
btn.addEventListener('click', () => {
pr.style.left = '0';
});
復(fù)制代碼
5.gif
接下來，我們把按鈕元素的overflow屬性設(shè)置為hidden時(shí)。
6.gif
到了這里，我們已經(jīng)完成了進(jìn)度條效果，但對比效果圖還是差了那么一點(diǎn)點(diǎn)，當(dāng)進(jìn)度條到100%之后，我們需要將.progress元素的top值設(shè)置為0，把整塊元素上移。在點(diǎn)擊事件后加入以下代碼：
setTimeout(() => {
pr.style.top = '0';
pr.style.transitionDuration = '1s';
text.style.color = 'white';
text.innerText = 'downloaded';
}, 4000);
復(fù)制代碼
另外，在.progress元素上移后它會將我們的.text元素覆蓋上去，為此我們需要將.text的層級提升下。
.text{
z-index: 10;
}
復(fù)制代碼
7.gif引入圖標(biāo)
在HTML中引入 font awesome這個(gè)圖標(biāo)庫。
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet">
復(fù)制代碼
我們需要用到的圖標(biāo)分別：
<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>
復(fù)制代碼
我們在.button元素中插入這個(gè)i標(biāo)簽，為了圖標(biāo)不被進(jìn)度條元素覆蓋，同樣把層級設(shè)置為10。
<i class="fa fa-arrow-down" aria-hidden="true"></i>
復(fù)制代碼
i {
margin: 0 8px 0 0;
font-size: 16px;
z-index: 10;
}
復(fù)制代碼
8.png
給這個(gè)圖標(biāo)設(shè)置一個(gè)循環(huán)動畫，這樣可以用來吸引用戶眼球從而促使去點(diǎn)擊它 。
@keyframes tapDownload {
0% {
transform: translateY(2px);
}
100% {
transform: translateY(0);
}
}
.fa-arrow-down{
animation: tapDownload 1s ease infinite;
}
復(fù)制代碼
9.gif
加了這個(gè)動效之后，用戶是不是更有點(diǎn)擊欲啦？
動態(tài)更換圖標(biāo)
同樣，我們使用JavaScript中querySelectorAll方法，獲取icon元素。
const icon = document.querySelectorAll('.fa')[0];
復(fù)制代碼
通過對比上面三個(gè)圖標(biāo)元素，我們發(fā)現(xiàn)它們都有共同的類名為fa，而不同的是后面fa-*這個(gè)類，當(dāng)按鈕狀態(tài)改變時(shí)就將對應(yīng)的類名移除后再添加上新的類名即可，在按鈕的點(diǎn)擊事件中添加以下代碼：
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);
});
復(fù)制代碼
在下載過程中，我們給下載圖標(biāo)的fa-download類綁定一個(gè)幀動畫。
@keyframes downloading {
0% {
transform: scale(.7);
}
100% {
transform: scale(1);
}
}
.fa-download {
animation: downloading 1s ease infinite alternate-reverse;
}
復(fù)制代碼
10.gif最后
本文帶著大家從零實(shí)現(xiàn)到一個(gè)進(jìn)度條按鈕，使用前端三件套HTMLCSSJavaScript進(jìn)行進(jìn)度條式按鈕開發(fā)。還引入的font awesome庫。希望大家能從中有所收獲，寫出更好更炫酷的動畫效果。
閱讀原文：原文鏈接
該文章在 2025/7/21 10:18:14 編輯過
400 186 1886
