css实现百分比文字叠加进度条

maxiaoxin1314

已于 2023-03-21 11:17:38 修改

阅读量394

点赞数

分类专栏： js css 文章标签：前端 javascript Powered by 金山文档

于 2023-03-21 11:12:54 首次发布

本文链接：https://blog.csdn.net/maxiaoxin1314/article/details/129684526

版权

js 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

直接上代码吧

<!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>进度条</title>
    </head>
    <style>
    #app {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
      }
      .progress {
        width: 400px;
        height: 80px;
        background-image: linear-gradient(to right, #c424c5 calc(var(--percent) * 1%), #fed245 calc(var(--percent) * 1%));
        animation: all 2000ms;
        border-radius: 10px;
      }
      .progress p {
        height: 80px;
        width: 100%;
        line-height: 80px;
        background-image: linear-gradient(to right, #fff calc(var(--percent) * 1%), #c424c5 calc(var(--percent) * 1%));
        border-radius: 10px;
        text-align: center;
        margin: 0;
        color: transparent;
        -webkit-background-clip: text;
      }
      .progress p span::after {
        content: attr(data-progress);
      }
    </style>
    <body>
      <div id="app">
      <div class="progress" style="--percent: 0">
        <p>正在安装<span data-progress="0"></span>%</p>
      </div>
    </div>
      <script>
          const progress = document.querySelector(".progress");
        const spanStr = document.querySelector(".progress p span")
      const setProgress = (val) => {
        progress.style.setProperty("--percent", val);
        spanStr.setAttribute("data-progress", val);
      };
      let val = 0;
      let timer = setInterval(() => {
        if (val < 100) {
          val += Math.floor(Math.random() * 5);
          setProgress(val);
          // $(".progress span").text(val);
        } else {
          clearInterval(timer);
        }
      }, 200);
        </script>
    </body>
<html>