svg加载进度按钮

下载代码

html

css

分享到微信朋友圈

html

css

* {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  background-color: #1f1f1f;
  font-family: "Plus Jakarta Sans", sans-serif;
}
body main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: inherit;
  height: inherit;
}
body main .btn-area {
  position: relative;
  width: calc(210px + 2px);
  height: calc(60px + 2px);
}
body main .btn-area:hover .main-btn {
  opacity: 0.25;
}
body main .btn-area .main-btn {
  width: inherit;
  height: inherit;
  opacity: 0.15;
  transition: 250ms;
}
body main .btn-area .main-btn rect {
  width: 210px;
  height: 60px;
  transition: 250ms;
}
body main .btn-area .progress-area,
body main .btn-area .complete-area {
  position: absolute;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: #1578ff;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 1;
}
body main .btn-area .progress-area .area-left,
body main .btn-area .complete-area .area-left {
  display: flex;
}
body main .btn-area .progress-area .area-left svg,
body main .btn-area .complete-area .area-left svg {
  margin-right: 1rem;
  opacity: 0;
}
body main .btn-area .progress-area .area-left span,
body main .btn-area .complete-area .area-left span {
  width: 50px;
  text-align: right;
}
body main .btn-area .progress-area .area-right,
body main .btn-area .complete-area .area-right {
  position: relative;
  display: flex;
  align-items: center;
  height: 20px;
  margin-right: -1rem;
  padding-left: 1rem;
  border-left: 1px solid #1578ff44;
  overflow: hidden;
  cursor: pointer;
}
body main .btn-area .progress-area .area-right:hover,
body main .btn-area .complete-area .area-right:hover {
  height: 40px;
  transition: 250ms height;
}
body main .btn-area .progress-area .area-right:hover svg,
body main .btn-area .complete-area .area-right:hover svg {
  opacity: 1;
}
body main .btn-area .progress-area .area-right svg,
body main .btn-area .complete-area .area-right svg {
  opacity: 0.5;
  transition: 250ms;
}
body main .btn-area .progress-area .area-right .btn-play,
body main .btn-area .complete-area .area-right .btn-play {
  position: absolute;
  transform: translateY(40px);
}
body main .btn-area .complete-area {
  justify-content: space-around;
  display: none;
}
body main .btn-area .complete-area svg {
  width: 40px;
  height: 20px;
  margin-right: 1rem;
  padding-right: 1rem;
  border-right: 1px solid #fff6;
}
body main .btn-area .complete-area svg path {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 6px;
  opacity: 0;
}
body main .btn-area .complete-area span {
  color: #fffd;
  padding-bottom: 1px;
  opacity: 0;
}
body main .btn-area .frame-btn {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
}
body main .btn-area .frame-btn rect {
  width: 210px;
  height: 60px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body .instagram-link {
  position: absolute;
  right: 50px;
  bottom: 50px;
}
body .instagram-link i {
  color: #1578ff;
  transition: 150ms;
  font-size: 2rem;
  opacity: 0.5;
}
body .instagram-link i:hover {
  opacity: 1;
}

JavaScript

const buttonArea = document.querySelector('.btn-area')
const progressArea = document.querySelector('.progress-area')
const completeArea = document.querySelector('.complete-area')
const mainBtn = document.querySelector('.main-btn rect')
const frameBtn = document.querySelector('.frame-btn rect')
const loadingIcon = document.querySelector('.progress-area .area-left svg')
const loadingProgress = document.querySelector('.progress-area .area-left span')
const loadingBtn = document.querySelector('.progress-area .area-right')
const pauseBtn = document.querySelector('.progress-area .area-right .btn-pause')
const playBtn = document.querySelector('.progress-area .area-right .btn-play')
const tick1 = document.querySelector('.complete-area .tick-1')
const tick2 = document.querySelector('.complete-area .tick-2')
const doneText = document.querySelector('.complete-area span')

let loadingTime = 5500
let progress = {
  value: '0 %'
}
let loadingStatus = true

document.body.onload = function() {
  anime({
    targets: loadingIcon,
    opacity: [0, 1],
    duration: 750,
    easing: 'easeOutQuad'
  })

let aniLoadingIcon = anime({
    targets: loadingIcon,
    rotateZ: 360,
    duration: 2000,
    loop: true,
    easing: 'linear'
  })

anime({
    targets: loadingProgress,
    translateY: ['15px', '0'],
    opacity: [0, 1],
    delay: 250,
    duration: 750,
    easing: 'easeOutQuart'
  })

anime({
    targets: loadingBtn,
    translateY: ['15px', '0'],
    opacity: [0, 1],
    delay: 350,
    duration: 1000,
    easing: 'easeOutQuart'
  })

let aniProgress = anime({
    targets: progress,
    value: '100 %',
    duration: loadingTime,
    easing: 'cubicBezier(.5, .05, .3, .9)',
    delay: 1000,
    round: 1,
    update: function() {
      loadingProgress.innerHTML = JSON.stringify(progress.value).replace(/^"(.*)"$/, '$1')
    }
  })

let aniFrameBtn = anime({
    targets: frameBtn,
    strokeDashoffset: [525, 0],
    duration: loadingTime,
    easing: 'cubicBezier(.5, .05, .3, .9)',
    delay: 1000,
    complete: function() {
      completeLoading()
    }
  })

loadingBtn.addEventListener('click', () => {
    if (loadingStatus) {
      aniLoadingIcon.pause()
      aniProgress.pause()
      aniFrameBtn.pause()
      pauseBtn.style.transform = 'translateY(-40px)'
      playBtn.style.transform = 'translateY(0px)'
      loadingStatus = false
    } else {
      aniLoadingIcon.play()
      aniProgress.play()
      aniFrameBtn.play()
      pauseBtn.style.transform = 'translateY(0px)'
      playBtn.style.transform = 'translateY(40px)'
      loadingStatus = true
    }
    
  })
}

function completeLoading() {
  anime({
    targets: loadingIcon,
    translateX: [0, -20],
    opacity: [1, 0],
    duration: 500,
    delay: 0,
    easing: 'easeInQuad'
  })

anime({
    targets: loadingProgress,
    translateY: [0, -20],
    opacity: [1, 0],
    duration: 500,
    delay: 250,
    easing: 'easeInQuad'
  })

anime({
    targets: loadingBtn,
    translateY: [0, -20],
    opacity: [1, 0],
    duration: 500,
    delay: 500,
    easing: 'easeInQuad',
    complete: function() {
      progressArea.style.display = 'none'
      completeArea.style.display = 'flex'
    }
  })

anime({
    targets: frameBtn,
    fill: ['#f5f9fe', '#1578ff'],
    duration: 500,
    delay: 750,
    easing: 'easeInQuad'
  })

anime({
    targets: tick1,
    strokeDashoffset: [52, 0],
    opacity: [0, 1],
    duration: 500,
    easing: 'cubicBezier(.5, .05, .3, .9)',
    delay: 1000
  })

anime({
    targets: tick2,
    strokeDashoffset: [52, 0],
    opacity: [0, 1],
    duration: 500,
    easing: 'cubicBezier(.5, .05, .3, .9)',
    delay: 1250
  })

anime({
    targets: doneText,
    opacity: [0, 1],
    translateY: ['25', '0'],
    duration: 1000,
    easing: 'easeOutQuad',
    delay: 1250
  })
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg