利用svg实现带加载进度的loading

下面就来详细讲解利用SVG实现带加载进度的loading的完整攻略。

使用SVG创建loading图标

在SVG中创建loading图标，可以利用SVG的 circle 或 path 标签。以下示例是利用circle标签创造一个loading动画的SVG代码。

<svg viewBox="0 0 64 64">
  <circle cx="32" cy="32" r="24" fill="#fff" stroke="#000" stroke-width="4" stroke-dasharray="150 94" transform="rotate(-90, 32, 32)">
    <animateTransform attributeName="transform" type="rotate" from="0 32 32" to="360 32 32" dur="2s" repeatCount="indefinite"></animateTransform>
    <animate attributeName="stroke-dashoffset" from="1" to="-244" dur="2s" repeatCount="indefinite"></animate>
  </circle>
</svg>

这个SVG图标包含了一个圆形，圆形的边界有一个白色的填充。圆形的边界被描绘为黑色线条。该SVG图标将加载中的状态通过旋转圆形和调整描边宽度来表示。这些动画是通过加上 SVG 动画元素来完成的。其中：

attributeName="transform" 表示执行旋转动画；
type="rotate" 表示旋转动画通过旋转整个loading图标进行；
from="0 32 32" 表示动画开始时旋转到指定角度，这里旋转到 0 度；
to="360 32 32" 表示动画结束时旋转到指定角度，这里旋转到 360 度；
dur="2s" 表示动画持续时间，2秒；
repeatCount="indefinite" 表示动画重复的次数，这里是无限次重复。

与此同时，stroke-dashoffset 属性被使用来调整描边宽度。stroke-dasharray 属性可用于定义组成描边的分隔符长度和空隙长度。这很有用，因为通过设置分隔符和空隙的长度来调整描边宽度。

利用CSS实现加载进度效果

接下来，我们将在SVG文件中实现加载进度效果。这主要通过轻微调整我们的SVG代码及添加CSS样式完成的。

以下是一个例子，展示如何定义一个具有 CSS 动画的 SVG：

<svg viewBox="0 0 512 512">
  <circle class="circle" cx="256" cy="256" r="200" />
</svg>

在这个例子中，我们的SVG代码包含一个圆形，圆心在宽和高上各一半的位置，半径为200。接下来，我们使用一个新的属性“class”指向这个SVG元素，从而使其可以调用CSS样式。

接下来，我们创建一组 CSS 样式来定义一个旋转动画以及实现加载进度的样式。下面是一个例子：

.circle {
  stroke: #fff;
  stroke-width: 5;
  fill: none;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: loading 8s cubic-bezier(0.8, 0, 0.2, 1) infinite;
}

@keyframes loading {
  from {
    stroke-dashoffset: 500;
  }
  to {
    stroke-dashoffset: 0;
  }
}

这一段CSS代码包含了三部分效果。

首先，我们给我们的圆形赋予CSS类名 .circle。
接下来，我们给圆形设置了 stroke，用来描边，边框颜色为白色。
在 stroke-width 属性中，我们对描边宽度进行了设置，这里用了5个像素。
在 fill 属性中，我们设置为 none 表示不要进行填充操作。
接下来，在 stroke-dasharray 属性中，我们设置为500。它指定了在描边周长内有多少分隔符长度和空隙长度，以使填充动画起作用。
stroke-dashoffset 属性同理，设置描边的偏移量。在开始时它是圆形的周长（500），但它会逐渐降到0，这样就会显示出加载进度效果。

最后，我们将所有定义的 CSS 动画样式整合在 @keyframe 中。在这里，我们定义了从500开始（表示描边），逐渐变为0的过程，从而在动画的8秒内输出进度条的效果，使用了CSS3中的 cubic-bezier 函数表现出更加自然的形变时间。

在页面上实现带加载进度的loading图标及进度条

最后，我们就可以将上述两个步骤整合在一起，最终实现一个带进度条的loading效果了。

以下是一个简单示例，展示如何在一个 HTML 页面中使用 SVG+CSS 实现带加载进度的loading图标及进度条：

<!DOCTYPE html>
<html>
<head>
  <title>SVG loading animation with progress bar</title>
  <style>
    .circle {
      stroke: #00BFFF;
      stroke-width: 1;
      fill: none;
      stroke-dasharray: 500;
      stroke-dashoffset: 500;
      animation: loading 2s cubic-bezier(0.8, 0, 0.2, 1) infinite;
    }
    .progress-ring__circle {
      animation: progress 2s ease-out forwards;
    }
    @keyframes loading {
      from {
        stroke-dashoffset: 500;
      }
      to {
        stroke-dashoffset: 0;
      }
    }
    @keyframes progress {
      0% {
        stroke-dasharray: 0 314;
      }
      100% {
        stroke-dasharray: 252 314;
      }
    }
  </style>
</head>
<body>
  <div class="load">
    <svg viewBox="0 0 64 64">
      <circle class="circle" cx="32" cy="32" r="24" />
      <circle class="progress-ring__circle" cx="32" cy="32" r="24" />
    </svg>
  </div>
  <script>
    window.onload = function(){
      document.querySelector('.load').classList.add('loaded');
    }
  </script>
</body>
</html>

在上面的示例中，我们首先在HTML文件中创建一个带有两个圆的SVG元素，两个圆分别有 circle 和 progress-ring__circle 的类名。

每个圆都有自己的CSS样式（分别为 .circle 和 .progress-ring__circle），使用动画来呈现包含在SVG中的加载进度条，并在JavaScript中以显示动画完成后完成回调以等待加载过程结束。

通过整合 SVG 和 CSS，我们已经成功地实现了带进度条的 SVG loading 动画。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：利用svg实现带加载进度的loading - Python技术站

利用svg实现带加载进度的loading

使用SVG创建loading图标

利用CSS实现加载进度效果

在页面上实现带加载进度的loading图标及进度条

相关文章