css+js实现水波状进度条动画

最新推荐文章于 2024-06-04 14:56:07 发布

guanguan0_0

最新推荐文章于 2024-06-04 14:56:07 发布

阅读量2.8k

点赞数 1

分类专栏： JS、jQuery 文章标签： css水波纹动画 css进度条动画 css水波进度

本文链接：https://blog.csdn.net/guanguan0_0/article/details/110955552

版权

JS、jQuery 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

进度条在前端很常见，效果也多种多样，慢慢积累。

这次介绍一个水波状的进度动画，如图

主要是使用js和css来处理，这里需要计算一个值，因为是匀速增加百分比，所以我们需要对照总耗时来计算对应的增长速度，这里是我的配置：

总时间：30s，也就是在样式的动画效果中的播放时间设置为30s

总进度：100%

增长间隙时间：150ms （经过测试，如果设置100ms感觉变化太快，看不清）

增长速度：0.48% 。30/0.15 = 100/0.5 但是为了让数据变化看起来更加真实，所以想要显示两位小数，故取用0.48

具体需求可以根据公式修改，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <style>
      @keyframes spin {
        50% {
          transform: translate(-50%, -101%) rotate(500deg);
        }
        100% {
          transform: translate(-50%, -101%) rotate(1000deg);
        }
      }
      .wave-progress {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #ffffff;
        overflow: hidden;
        position: relative;
      }
      .wave {
        position: relative;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(-180deg, #07c2b7 13%, #07c2b7 100%);
        border-radius: 50%;
      }
      #wave-mask {
        position: absolute;
        width: 200%;
        height: 200%;
        top: 0;
        left: 50%;
        border-radius: 40%;
        transform: translate(-50%, -101%) rotate(0);
        animation: spin 30s linear;
        z-index: 20;
        background-color: #a9dfdc;
      }
      #num {
        position: absolute;
        width: 100%;
        height: 100%;
        color: #fff;
        font-size: 16px;
        line-height: 100px;
        font-weight: bold;
        text-align: center;
        z-index: 100;
      }
    </style>
  </head>
  <body>
    <div class="wave-progress">
      <div id="num"></div>
      <div class="wave"></div>
      <div id="wave-mask"></div>
    </div>

    <script>
      let timerRef = null;
      let loading = 0;
      let numEle = document.getElementById("num");
      let maskEle = document.getElementById("wave-mask");
      window.onload = () => {
        timerRef = window.setInterval(() => {
          const num = loading + 0.49;
          if (num >= 100) {
            loading = 100;
            clearInterval(timerRef);
          } else {
            loading = num;
          }
          numEle.innerHTML = loading >= 100 ? 100 : loading.toFixed(2) + "%"; // 显示两位小数
          maskEle.style.top = 100 - loading + "%";
        }, 150);
      };
    </script>
  </body>
</html>

值得注意的是，如果你在vue或者react项目中使用定时器，需要在生命周期结束时，清除定时器。

guanguan0_0

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
css+js实现水波状进度条动画

进度条在前端很常见，效果也多种多样，慢慢积累。这次介绍一个水波状的进度动画，如图主要是使用js和css来处理，这里需要计算一个值，因为是匀速增加百分比，所以我们需要对照总耗时来计算对应的增长速度，这里是我的配置：总时间：30s，也就是在样式的动画效果中的播放时间设置为30s总进度：100%增长间隙时间：150ms （经过测试，如果设置100ms感觉变化太快，看不清）增长速度：0.48% 。30/0.15 = 100/0.5 但是为了让数据变化看起来更加真实，所以想要显示两位小数.
复制链接

扫一扫