SOURCE

const btn = document.querySelector('.button');
const pro = document.querySelector('.progress');
const text = document.querySelector('.text');
const icon = document.getElementById('icon')

btn.addEventListener('click',()=>{
    pro.style.left = '0';
    console.log(icon)
    icon.classList.remove('fa-arrow-down');
    icon.classList.add('fa-download');
    text.innerText = 'downloading';
    setTimeout(()=>{
    pro.style.top='0';
    icon.classList.remove('fa-download');
    icon.classList.add('fa-check');
    pro.style.transitionDuration='1s';
    text.style.color='white';
    text.innerText='downloaded';
},3000)
})

// 当进度条100%的时候需要将progress的top值设置为0

<div class="button">
    <i class="fa fa-arrow-down" aria-hidden="true" id='icon'></i>
    <span class="text">download</span>
    <span class="progress"></span>
</div>

<!-- <i class="fa fa-download" aria-hidden="true"></i>
<i class="fa fa-check" aria-hidden="true"></i> -->

.button{
    -webkit-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
}
.button:hover{
    cursor: pointer
}
.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 2s;
}

.text{
    z-index: 10
}
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 
}
/* 给下载过程一个动画 */
@keyframes downloading {
  0% {
    transform: scale(.7);
  }
  100% {
    transform: scale(1);
  }
}

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