使用svg()函数创建动态进度条和加载动画

发布时间：2024-01-18 02:53:32

SVG (Scalable Vector Graphics) 是一种用于描述二维矢量图形的 XML 标记语言。它可以创建各种各样的图形效果，包括动态进度条和加载动画。下面是一个使用 SVG 函数创建动态进度条和加载动画的例子：

动态进度条：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #progress-bar {
        width: 400px;
        height: 20px;
        border: 1px solid black;
      }
      #progress {
        height: 100%;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div id="progress-bar">
      <div id="progress"></div>
    </div>
    <script>
      function animateProgressBar() {
        var progressBar = document.getElementById("progress");
        var width = 0;
        var interval = setInterval(frame, 10);
        function frame() {
          if (width >= 100) {
            clearInterval(interval);
          } else {
            width++;
            progressBar.style.width = width + "%";
          }
        }
      }
      animateProgressBar();
    </script>
  </body>
</html>

在上面的例子中，我们使用 CSS 创建了一个固定宽度和高度的进度条容器，其中 #progress-bar 这个 div 元素代表整个进度条，#progress 这个 div 元素代表进度。初始时进度为 0。

在 JavaScript 中，我们定义了一个 animateProgressBar 函数来控制进度条的动画。使用 getElementById 方法获取进度条元素，并使用 setInterval 方法创建一个定时器，每 10 毫秒调用一次 frame 函数。在 frame 函数中，我们通过递增 width 变量的值来改变进度条的宽度，并将此值赋给进度条元素的 width 属性。当进度条宽度达到 100% 后，我们清除定时器停止动画。

加载动画：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #spinner {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        animation: spin 2s linear infinite;
      }
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div id="spinner"></div>
  </body>
</html>

在上面的例子中，我们使用 CSS 创建了一个圆形加载动画。使用 border-radius 属性将容器的边界形状设置为圆形，并使用 border 属性定义容器的边框。border-top 属性用于指定进度条的颜色。animation 属性定义了动画的名称 spin、持续时间 2s、动画类型 linear 和重复次数 infinite。

在这个例子中，我们使用了 @keyframes 规则来定义动画的关键帧。通过改变 transform 属性中的 rotate 值，我们使容器在 2 秒内沿顺时针方向旋转一周。0% 表示动画的起始状态，100% 表示动画的结束状态。

通过上述例子，你可以了解到如何使用 SVG 函数创建动态进度条和加载动画。掌握 SVG 可以为网页添加更多的图形效果，为用户提供更好的交互体验。