前端 button 组件之按钮式进度条实现

谁践踏了优雅 2022-09-09 11:58 169阅读 0赞

# 大厂技术 高级前端 Node进阶    #

点击上方 程序员成长指北，关注公众号

回复1，加入高级Node交流群

![d65ba5e1835cddbe66bd063c4349bef0.png][]

#### 前言 ####

在一些前端项目中，它们会涉及文件的上传 / 下载 功能，当文件在进行上传 / 下载时，我们该怎么更好的向用户进行进度反馈呢？我们常见的有弹窗式进度条、吸顶式进度条 ...

本篇章将给大家带来**按钮式进度条**，并手把手带领大家一步步的从零手写按钮式进度条 ????????

**话不多说，先看看成品再码**

#### 实现效果 ####

![14775fa85ba5366ffec546c91a94f73e.gif][] 1.gif

#### 原理 ####

创建一个`div`作为按钮的总体，在按钮里边放入`3`个`div`，分别是进度条元素，图标元素，文本元素，我们将按钮设置为相对定位，将进度条元素设置为绝对定位，利用`top`和`left`值来控制进度条，让我们用码实现！

![02168be09cc6cfe966615c3f5abf0213.png][] 2.png

#### 用码实现 ####

##### 码出基本样式 #####

<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: 0 15px;
            font-size: 18px;
            text-decoration: none;
            overflow: hidden;
        }
    复制代码

![d5214cad4816f3aa1cd6b2ec86b9fe46.png][] 3.png

很快，我们按钮的基本样式已经写出来了，接下来我们先实现进度条效果，在`.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`值就可以实现进度条效果啦！

![fdbd14c9a7e154521996bbd2ea9e6b4a.png][] 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];
    复制代码

给`.button`元素添加点击事件，当按钮被点击时我们将按钮的`left`值设置为`0`，也就是进度`100%`的效果。

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

![c5e8b375acb343afc5e8a91e7fed19df.gif][] 5.gif

接下来，我们把按钮元素的`overflow`属性设置为`hidden`时。

![5ccd84032d9765487962e5e0e82158eb.gif][] 6.gif

到了这里，我们已经完成了进度条效果，但对比效果图还是差了那么一点点，当进度条到`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;
        }
    复制代码

![592ffa65ecd010c389136cf957281e69.gif][] 7.gif

##### 引入图标 #####

在`HTML`中引入 `font awesome`这个图标库。

我们需要用到的图标分别：

<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;
      }
    复制代码

![49116148550c17f408fff99be4cb9e9b.png][] 8.png

给这个图标设置一个循环动画，这样可以用来吸引用户眼球从而促使去点击它 。

@keyframes tapDownload {
      0% {
        transform: translateY(2px);
      }
      100% {
        transform: translateY(0);
      }
    }
    
    .fa-arrow-down{
        animation: tapDownload 1s ease infinite;
    }
    复制代码

![fa728037c10e42055206119674844448.gif][] 9.gif

加了这个动效之后，用户是不是更有点击欲啦？

##### 动态更换图标 #####

同样，我们使用`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;
      }
    复制代码

![ed7bf3908dfe8c9597047d21d34e758f.gif][] 10.gif

#### 最后 ####

本文带着大家从零实现到一个进度条按钮，使用前端三件套`HTML` `CSS` `JavaScript`进行进度条式按钮开发。还引入的`font awesome`库。希望大家能从中有所收获，写出更好更炫酷的动画效果、

???? 如果你觉得本文对你有所帮助 请留个赞 ????

关于本文

# 作者：\_island #

https://juejin.cn/post/6992141459977682951

Node 社群

我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

![438dc348425f1b38405adba5f86bd75b.png][]

**“分享、点赞、在看” 支持一波** ![fefca6cc69d71429dab2c3d9a004762d.png][]

[d65ba5e1835cddbe66bd063c4349bef0.png]: /images/20220829/bfbbf0c61ab54457b808e24316977c8c.png
[14775fa85ba5366ffec546c91a94f73e.gif]: /images/20220829/77e775f4ac57439b9daee762ed0b3c3d.png
[02168be09cc6cfe966615c3f5abf0213.png]: /images/20220829/229bf9ac94454b26a11d33cd962d0990.png
[d5214cad4816f3aa1cd6b2ec86b9fe46.png]: /images/20220829/149e02c1f8754465a3574b4c4c6a99f4.png
[fdbd14c9a7e154521996bbd2ea9e6b4a.png]: /images/20220829/77a77d7bc03248e4988b578933113936.png
[c5e8b375acb343afc5e8a91e7fed19df.gif]: /images/20220829/a4c204c8748d4350baa212ea7a40f35f.png
[5ccd84032d9765487962e5e0e82158eb.gif]: /images/20220829/4841154a391f48caa600d7953bdab79a.png
[592ffa65ecd010c389136cf957281e69.gif]: /images/20220829/4917c6041e834da1b68f0981eb49e0a3.png
[49116148550c17f408fff99be4cb9e9b.png]: /images/20220829/dc453e7c08e1462987240a9f7e6ce37d.png
[fa728037c10e42055206119674844448.gif]: /images/20220829/0ec178ef09b347d19d03b5544533bb80.png
[ed7bf3908dfe8c9597047d21d34e758f.gif]: /images/20220829/2539a90b11a5427eb631febe8c8577c8.png
[438dc348425f1b38405adba5f86bd75b.png]: /images/20220829/41822ae8340845ef8c9145ee858555cc.png
[fefca6cc69d71429dab2c3d9a004762d.png]: /images/20220829/cd19a221e3ac41c791c0c1d9a2ec658c.png