上传之球状进度条


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>progress</title>
    <style>
      .uploading-chart {
        width: 192px;
        height: 192px;
        background: #eaeaea;
        margin: 50px auto;
        border-radius: 50%;
        position: relative;
        transition: 0.5s;
        border: 0.5px solid #ffc831;
        padding: 4px;
      }
      .uploading-chart .process-anime {
        position: absolute;
        top: 50%;
        left: 50%;
        border: 4px solid #fff;
        transform: translate(-50%, -50%);
        width: 190px;
        height: 190px;
        background: linear-gradient(45deg, #ffc831, #fdeca6);
        border-radius: 50%;
        overflow: hidden;
      }
      .uploading-chart .process-anime .cube-a {
        background: rgba(53, 53, 53, 0.30196078431372547);
        animation: fx-rotate 15s linear infinite;
      }
      .uploading-chart .process-anime .cube-b {
        background: #fff;
        animation: fx-rotate 10s linear infinite reverse;
      }
      .uploading-chart .process-anime .cube {
        position: absolute;
        left: 50%;
        border-radius: 50%;
        width: 192px;
        height: 192px;
        transform-origin: 50% 50%;
        transition: 0.5s;
      }
      /* .uploading-chart .fx-mask {
        width: 100%;
        height: 100%;
        position: absolute;
        background: linear-gradient(137deg, hsla(0, 0%, 100%, 0.5), hsla(0, 0%, 100%, 0));
        top: 0;
        left: 0;
        z-index: 1;
      } */
      .uploading-chart .fx {
        position: absolute;
        z-index: 2;
        top: 20%;
        left: 10%;
        opacity: 0.5;
      }
      img {
        display: block;
        border-style: none;
      }
      #value {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        font-size: 30px;
      }

       .tick {
        animation: tick 1.8s ease-out;
        animation-fill-mode: forwards;
        animation-delay: .93s;
        animation-delay: 0s;
        stroke-dasharray: 350;
        stroke-dashoffset: 0;
      }
      @keyframes tick {
        from {
          stroke-dashoffset: 300;
        }
        to {
          stroke-dashoffset: 0;
        }
      }
      @keyframes fx-rotate {
        0% {
          transform: translate(-50%) ;
        }
        100% {
          transform: translate(-50%) ;
        }
      }
    </style>
  </head>
  <body>
    <div class="uploading-chart uploading">
      <div class="process-anime">
        <div class="cube cube-a" style="top: 0%"></div>
        <div class="cube cube-b" style="top: 0%"></div>
        <div class="fx-mask"></div>
        <!-- <img
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAA8CAYAAACelmGhAAAC7ElEQVRYhe2ZzUtUURiHH4cyzQzSFkbfkVmBuJHIFhFEtHERgS3DVbv6D/pY1cogwlUR9LkokChCCAwXRpBBbcq+sJiFQRKFhlR+/OLYuTXNOXecuXPvnRY98OJ43uv7zJx7zpl7jlWSiMh6oAvYA2wEVgNLgA/AI+A+cAuYCi1v5CVGi6Qbkma1MB8ldUuq8jmchgJRJ+m8pJkipPn0SaqNKt8q6YVTsjSGJC0tVd4h6VOZ4oCrpch3SZpwSpRHZ1C/0GjfbEftSidTHqNACzCTCSmzDLiTgNiwCThoXoTJzwLbnNb4OGoq+bp9NzBocgnK54A1+Z98MXAhYTG2x/fmyw8DW5xLk2FnbrcvAl7bdToNHuR+8kMpig0bcuXdTjpZGoNuXwe8KzD1kuD3ItOVstjwPRDud1LJM2G63YzyL0BdyvIR88m3V0BsGDXyVqc5HZ5n7LdMxeQNTnM6DBr58gqIXwFZI69xUsnTTwUWloArgfyzk0qWZ8DTQD6Wsrw3eGHkb510crwHLufKH6coPw1MB78EX6lZYK1zabyYe90OzAZVg9F+O2HxDHAkV5wrv+5cHi8ngWGnYs6+bCjmPVnAzWL25x1FbvhLYTh/WxwmN9Ebo/iJpEafNExeLemhU6Z0+iXV+4SF5CYayrj/PyQdl5Tx1HXCabBRY29BKWNgQFKbp1ZohCZstEq6KGnSUf1i3OZ3eP52wfBtkX2Y3WsbsAqoBb4Bb4CXZrZ6ri+Kcg4By6ZSDxPz/Jf/U3JzetwEVDuZBOX7gAFg0h5dfwXu2mkWP3YhMFOux1lC/jAl6UCUhaRQBMkTjs7FvIHmQsWiyE3BaUfl55KvSNQw9/yYPQYrhs4477u51+bsrdnJhFNvB2LZZCKcvRXbSwsSNs/DGLfnN7HJR5zWcO6FZiLK+5xWP+aBv8ebiYqkFZLGvBPrb04ltci023/A+ZiTdCbswT8OuYkmSeckZa3Q/Lxm31is0vmQ+AnQOtlY/wFl5gAAAABJRU5ErkJggg=="
          class="fx"
        /> -->
        <div id="value">
    </div>
    <svg width="190" height="170" id="svg" style="display: none">
      <!-- <circle fill="none" stroke="#68E534" stroke-width="20" stroke-linecap="round" cx="200" cy="200" r="190" class="circle" transform="rotate(-90 200 200)" /> -->
      <!-- <polyline fill="none" stroke="#68E534" stroke-width="18" points="88,214 173,284 304,138" stroke-linecap="round" stroke-linejoin="round"  /> -->
      <polyline fill="none" stroke="#68E534" stroke-width="18" points="52,102 85,135 145,66" stroke-linecap="round" stroke-linejoin="round"  />
    </svg>
    </div>

    <script>
        window.onload = function() {
            var num = 0
            setInterval(() => {

                if(num <= 100) {
                    num += 10;
                    let cube = document.querySelectorAll('.cube');
                    let value = document.getElementById('value');
                    let svg = document.getElementById('svg')
                    cube.forEach(node => {
                        node.style.top = -num + '%';
                        if(num < 101) {
                            value.style.display = 'block'
                            value.innerText = num + '%'

                            svg.style.display = 'none'
                        } else {
                            value.style.display = 'none';
                            svg.style.display = 'block'
                            svg.children[0].classList = 'tick'
                        }
                    })

                }
            },200)
        }
    </script>
  </body>
</html>
coleava / me

上传之球状进度条 #33
