gsap下载按钮点击显示进度动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：进度条

代码描述：gsap下载按钮点击显示进度动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Inter:400,500,600,700&amp;display=swap'>
  
<style>
.dl-parachute {
  --color-text: #fff;
  --color-icon: #fff;
  --color-line: #fff;
  --svg-y: 0px;
  --arrow-x: 0px;
  --arrow-y: 2px;
  --arrow-r: 0deg;
  --line-opacity: 0;
  --circle-opacity: 1;
  --parachute-o: 1;
  --parachute-y: 0px;
  --parachute-s: 0;
  --line-progress-o: 0;
  --line-progress: 260px;
  --success-y: 12px;
  --success-o: 0;
  --number-y: 12px;
  --number-o: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  outline: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: "Inter";
  position: relative;
  width: 120px;
  height: 120px;
}
.dl-parachute svg {
  display: block;
  pointer-events: none;
}
.dl-parachute svg.circle, .dl-parachute svg.line {
  width: 280px;
  height: 124px;
  position: absolute;
  left: -80px;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke: var(--color-line);
  fill: none;
}
.dl-parachute svg.circle {
  top: -2px;
  opacity: var(--circle-opacity);
  transform: translateY(var(--svg-y)) rotate(180deg);
}
.dl-parachute svg.line {
  height: 128px;
  bottom: -65px;
  opacity: var(--line-opacity);
}
.dl-parachute svg.line .progress {
  stroke-width: 6px;
  stroke-dasharray: 260px;
  opacity: var(--line-progress-o);
  stroke-dashoffset: var(--line-progress);
}
.dl-parachute .arrow {
  position: absolute;
  left: 36px;
  top: 36px;
  transform: translate(var(--arrow-x), var(--arrow-y)) rotate(var(--arrow-r));
}
.dl-parachute .arrow .base {
  fill: var(--color-icon);
  width: 48px;
  height: 48px;
}
.dl-parachute .arrow .parachute {
  position: absolute;
  width: 28px;
  height: 32px;
  fill: var(--color-icon);
  left: 10px;
  bottom: -26px;
  transform-origin: 50% 0%;
  opacity: var(--parachute-o);
  transform: translateY(var(--parachute-y)) scale(var(--parachute-s));
}
.dl-parachute .number,
.dl-parachute .success {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--t, 144px);
  text-align: center;
  color: var(--color-text);
  opacity: var(--o, var(--number-o));
  transform: translateY(var(--y, var(--number-y)));
}
.dl-parachute .success {
  --t: 12px;
  --o: var(--success-o);
  --y: var(--success-y);
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  overflow: hidden;
  min-height: 100vh;
  font-family: "Inter";
  display: flex;
  justify-content: center;
  align-items: center;
  background: #275EFE;
}
body .dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
}
body .dribbble img {
  display: block;
  width: 76px;
}
body .twitter {
  position: fixed;
  display: block;
  right: 112px;
  bottom: 14px;
}
body .twitter svg {
  width: 24px;
  height: 24px;
  fill: white;
}
</style>




</head>

<body>
  <button class="dl-parachute">
    <span class="success">Complete</span>
    <div class="arrow">
        <svg class="base" viewBox="0 0 48 48">
            <path d="M23.191 46.588C23.379 46.847 23.68 47 24 47C24.32 47 24.621 46.847 24.809 46.588L40.809 24.588C41.03 24.284 41.062 23.881 40.892 23.546C40.72 23.211 40.376 23 40 23H31V2C31 1.448 30.552 1 30 1H18C17.448 1 17 1.448 17 2V23H7.99999C7.62399 23 7.27999 23.211 7.10899 23.546C6.93799 23.881 6.96999 24.284 7.19199 24.588L23.191 46.588Z" />
        </svg>
        <svg class="parachute" viewBox="0 0 28 32">
            <path d="M27.5 20.2542C26.9093 23.9345 24.4253 32 14 32C3.57466 32 1.09075 23.9345 0.5 20.2542L0.502764 19.04L12.756 0H15.244L27.4972 19.04C27.4972 19.4629 27.5 20.2542 27.5 20.2542ZM25.8243 19.0357L14.933 3.0248V18.5033C15.9843 18.5979 16.8727 18.8393 17.7587 19.0801C18.887 19.3867 20.0115 19.6923 21.4639 19.6923C22.9864 19.6923 24.6154 19.3565 25.8243 19.0357ZM13.067 18.5033V3.0248L2.17572 19.0357C3.38456 19.3565 5.01356 19.6923 6.5361 19.6923C7.98852 19.6923 9.113 19.3867 10.2413 19.0801C11.1273 18.8393 12.0157 18.5979 13.067 18.5033Z" />
        </svg>
    </div>
    <svg class="circle" viewBox="0 0 280 124">
        <path d="M81.5 62C81.5006 29.6913 107.691 3.50059 140 3.5C172 3.5 198.505 30.1029 198.5 62C198.495 94.1709 172.67 120.225 140.5 120.5C108.054 120.777 81.4994 94.447 81.5 62Z" />
    </svg>
    <svg class="line" viewBox="0 0 280 128"></svg>
    <span class="number"><span>0</span>%</span>
</button>

  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script>
<sc.........完整代码请登录后点击上方下载按钮下载查看