日韩精品无码按摩精油,91偷自产一区二区三区精品,国产乱沈阳女人高潮乱叫老

技術頻道 - html技術

CSS實現(xiàn)的下載進程動畫【演示/源碼】

作者:admin 時間:2023-3-13 17:39:55 瀏覽:

在文件下載時，如果能顯示一個下載進程，那么對用戶來說是一個很好的反饋，本文將給大家介紹一個CSS實現(xiàn)的下載進程動畫。

CSS實現(xiàn)的下載進程動畫

demo download

實例介紹

點擊下載按鈕后，畫圓一周，圓內(nèi)顯示“100%”和一個勾，表示下載進程已經(jīng)結束。

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標簽，內(nèi)部為一個SVG標簽、一個div標簽和一個span標簽，其中SVG是一個圓，它的class值為circle，而div是圓內(nèi)部的圖標，它的class值為icon。span標簽顯示下載進程的百分比數(shù)字。

CSS代碼

由于涉及元素較多，所以CSS代碼也比較多。

.button設置按鈕樣式。

.circle設置圓的樣式。

.button span設置下載進程百分比數(shù)字樣式。

.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，它的作用是實現(xiàn)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();
  });

});