CSS实现的下载进程动画【演示/源码】

技术频道 - html技术

CSS实现的下载进程动画【演示/源码】

作者:admin 时间:2023-3-13 17:39:55 浏览:

在文件下载时，如果能显示一个下载进程，那么对用户来说是一个很好的反馈，本文将给大家介绍一个CSS实现的下载进程动画。

CSS实现的下载进程动画

demo download

实例介绍

点击下载按钮后，画圆一周，圆内显示“100%”和一个勾，表示下载进程已经结束。

HTML代码

<button class="button">
    <svg class="circle" viewBox="0 0 76 76">
        <circle class="default" cx="38" cy="38" r="36"></circle>
        <circle class="active" cx="38" cy="38" r="36"></circle>
    </svg>
    <div class="icon">
        <svg class="line" viewBox="0 0 4 37">
            <line x1="2" y1="2" x2="2" y2="35"></line>
        </svg>
        <div>
            <svg class="arrow" viewBox="0 0 40 32"></svg>
            <svg class="progress" viewBox="0 0 444 10">
                <path d="M2,5 L42,5 C60.0089086,6.33131695..."></path>
            </svg>
        </div>
    </div>
    <span>0%</span>
</button>

HTML结构外部为一个button标签，内部为一个SVG标签、一个div标签和一个span标签，其中SVG是一个圆，它的class值为circle，而div是圆内部的图标，它的class值为icon。span标签显示下载进程的百分比数字。

CSS代码

由于涉及元素较多，所以CSS代码也比较多。

.button设置按钮样式。

.circle设置圆的样式。

.button span设置下载进程百分比数字样式。

.icon设置圆容器的样式，.icon svg.line是线条动画的样式。

部分CSS代码：

.button {
  --default: rgba(255, 255, 255, .2);
  --active: #fff;
  position: relative;
  border: none;
  outline: none;
  background: none;
  padding: 0;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transform: scale(var(--s, 1));
  transition: transform 0.2s;
}
.button:active {
  --s: .96;
}
.button svg {
  display: block;
  fill: none;
  stroke-width: var(--sw, 3px);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.button .circle {
  width: 76px;
  height: 76px;
  transform: rotate(-90deg);
}
.button .circle circle.default {
  stroke: var(--default);
}
.button .circle circle.active {
  stroke: var(--active);
  stroke-dasharray: 227px;
  stroke-dashoffset: var(--active-offset, 227px);
  transition: stroke-dashoffset var(--all-transition, 4s) ease var(--all-delay, 0.8s);
}
.button span {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  bottom: 13px;
  font-weight: 500;
  font-size: 10px;
  color: var(--active);
  opacity: var(--count-opacity, 0);
  transform: translateY(var(--count-y, 4px));
  -webkit-animation: var(--count, none) 0.3s ease forwards var(--all-delay, 4.6s);
          animation: var(--count, none) 0.3s ease forwards var(--all-delay, 4.6s);
  transition: opacity 0.2s ease 0.6s, transform 0.3s ease 0.6s;
}
.button .icon {
  --sw: 2px;
  width: 24px;
  height: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -12px;
}
.button .icon svg.line {
  width: 4px;
  height: 37px;
  stroke: var(--active);
  position: absolute;
  left: 10px;
  top: 0;
  stroke-dasharray: 0 33px var(--line-array, 33px) 66px;
  stroke-dashoffset: var(--line-offset, 33px);
  transform: translateY(var(--line-y, 0));
  opacity: var(--line-opacity, 1);
  transition: stroke-dasharray 0.2s, stroke-dashoffset 0.2s, transform 0.32s ease var(--all-delay, 0.25s);
}

此外，还有箭头样式，其CSS代码为：

.button .icon div svg.arrow {
  width: 40px;
  height: 32px;
  opacity: var(--arrow-opacity, 1);
  transition: opacity 0s linear var(--all-delay, 1s);
}

JavaScript代码

本实例动画用SVG完成，所以用到了一个第三方JS库文件gsap.min.js，它的作用是实现SVG动画。

<script src='gsap.min.js'></script>

部分JavaScript代码：

const $ = (s, o = document) => o.querySelector(s);
const $$ = (s, o = document) => o.querySelectorAll(s);

$$('.button').forEach(button => {

  let count = {
    number: 0 },

  icon = $('.icon', button),
  iconDiv = $('.icon > div', button),
  arrow = $('.icon .arrow', button),
  countElem = $('span', button),
  svgPath = new Proxy({
    y: null,
    s: null,
    f: null,
    l: null },
  {
    set(target, key, value) {
      target[key] = value;
      if (target.y !== null && target.s != null && target.f != null && target.l != null) {
        arrow.innerHTML = getPath(target.y, target.f, target.l, target.s, null);
      }
      return true;
    },
    get(target, key) {
      return target[key];
    } });


  svgPath.y = 30;
  svgPath.s = 0;
  svgPath.f = 8;
  svgPath.l = 32;

  button.addEventListener('click', e => {
    if (!button.classList.contains('loading')) {

      if (!button.classList.contains('animation')) {

        button.classList.add('loading', 'animation');

        gsap.to(svgPath, {
          f: 2,
          l: 38,
          duration: .3,
          delay: .15 });


        gsap.to(svgPath, {
          s: .2,
          y: 16,
          duration: .8,
          delay: .15,
          ease: Elastic.easeOut.config(1, .4) });


        gsap.to(count, {
          number: '100',
          duration: 3.8,
          delay: .8,
          onUpdate() {
            countElem.innerHTML = Math.round(count.number) + '%';
          } });


        setTimeout(() => {
          iconDiv.style.setProperty('overflow', 'visible');
          setTimeout(() => {
            button.classList.remove('animation');
          }, 600);
        }, 4820);

      }

    } else {

      if (!button.classList.contains('animation')) {

        button.classList.add('reset');

        gsap.to(svgPath, {
          f: 8,
          l: 32,
          duration: .4 });


        gsap.to(svgPath, {
          s: 0,
          y: 30,
          duration: .4 });


        setTimeout(() => {
          button.classList.remove('loading', 'reset');
          iconDiv.removeAttribute('style');
        }, 400);

      }

    }
    e.preventDefault();
  });

});