js实现带进度条的下载按钮点击效果代码-html代码-BFW代码库

js实现带进度条的下载按钮点击效果代码

代码语言：html

所属分类：其他

代码描述：js实现带进度条的下载按钮点击效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
  
<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");

body{
  margin:0;
  padding:0;
  height:100vh;
  background:rgb(60,60,60);
  font-family: Montserrat, sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
}
#btn-wrapper{
  width:150px;
  height:50px;
  background:#263238;
  overflow:hidden;
  transition:.3s;
  position:relative;
  border-radius:5px;
}
#btn-wrapper button{
  width:150px;
  height:50px;
  background:rgb(240,240,240);
  font-family: Montserrat, sans-serif;
  border:0;
  border-radius:5px 0 0 5px;
  position:absolute;
  left:0;
  font-size:20px;
  transition:.3s ease-out;
}
#btn-wrapper button:hover{
  background:rgb(210,210,210);
}
#progress-bar{
  --color:#00C853;
  --color2:#00E676;
  width:0;
  height:50px;
  background:linear-gradient(to right,var(--color) 70%,var(--color2));
  position:absolute;
  left:30px;
  display:none;
  transition:.3s ease-out;
}
#progress-completed{
  width:0;
  height:50px;
  background:#212121;
  color:rgb(240,240,240);
  position:absolute;
  display:none;
  right:0;
  border-radius:0 5px 5px 0;
  text-align:center;
}
#btn-wrapper.loading{
  width:310px;
}
#btn-wrapper.loading button{
  width:30px;
  height:50px;
}
#btn-wrapper.loading #progress-bar{
  display:inline;
}
#btn-wrapper.loading #progress-completed{
  width:60px;
  display:i.........完整代码请登录后点击上方下载按钮下载查看