css进度加载

最新推荐文章于 2024-04-18 02:16:24 发布

代号:12138的小贺

最新推荐文章于 2024-04-18 02:16:24 发布

阅读量121

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/qq_45992843/article/details/126160177

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>实现动态前进的阴影进度条</title>
    <style>
      section {
        width: 420px;
        margin: 50px auto;
        text-align: center;
      }

      div {
        position: relative;
      }

      .bar {
        position: absolute;
        top: -14px;
        left: 154px;
        width: 30px;
        height: 16px;
        background-image: linear-gradient(
          -45deg,
          transparent,
          rgba(255, 255, 255, 0.8),
          transparent
        );
        animation: shadow 2s 5 normal linear forwards;
      }

      @keyframes shadow {
        0% {
          left: 154px;
        }
        100% {
          left: 313px;
        }
      }
    </style>
  </head>
  <body>
    <section>
      <div>
        <span>完成百分比:</span>
        <progress id="p" max="100"></progress>
        <span id="span">0%</span>
        <p class="bar"></p>
      </div>
    </section>
    <script type="text/javascript">
      var progressBar = document.getElementById("p");
      setInterval("button_onclick()", 50);
      var i = 0;
      function button_onclick() {
        if (i < 100) {
          i++;
          progressBar.value = i;
          document.getElementById("span").innerHTML = i + "%";
        }
      }
    </script>
  </body>
</html>