如何用SVG实现一个炫酷的带加载进度的loading动画？

2023-09-21 12:40:59

我们日常生活中接触到最多的网站和应用中，都有不少地方用到loading加载效果，在用户体验上，当用户点击了页面上的按钮后，如果长时间没有反馈很容易会让用户失去耐心而关闭网页，为了能让用户对当前操作是否成功有个感知，并降低用户等待的时间，loading加载效果就产生了。尤其是用于一些业务关键的场景里，如加载多个用户上传的视频，或者下载大尺寸的图片时，提示用户加载状态是一个很有必要的交互。

想用代码实现一个loading效果，最简单的就是通过js让一个元素来回运动，如用一个div盒子来回移动就可以。如果你想实现效果酷炫点的，就需要使用canvas或者svg来实现。今天，我们就来介绍一下如何用svg实现一个简单的带进度条的loading效果。

SVG概述

SVG(Scalable Vector Graphics)是一种基于XML的矢量图形格式，它不受分辨率的限制，可以被无限放大而不会失真。SVG是一种非常强大的图形格式，它可以用来创建各种各样的图形，包括静态图形和动态图形。

创建SVG loading

要创建一个SVG loading，我们首先需要创建一个SVG文件。我们可以使用任何文本编辑器来创建SVG文件，但最好使用专门的SVG编辑器，如Inkscape或Adobe Illustrator。

在SVG文件中，我们需要定义一个<svg>元素，<svg>元素是SVG图形的根元素。<svg>元素的属性可以用来指定SVG图形的宽、高、背景颜色等。

在<svg>元素中，我们可以添加各种图形元素，如<path>元素、<circle>元素、<rect>元素等。这些图形元素可以用来创建各种各样的图形。

添加动画

为了让SVG loading动起来，我们需要添加动画。SVG动画可以使用<animate>元素来实现。<animate>元素可以用来指定图形元素的动画属性，如位置、颜色、透明度等。

<animate>元素的属性可以用来指定动画的持续时间、延迟时间、重复次数等。

实现带进度条的loading

要实现带进度条的loading，我们可以使用<circle>元素来创建一个进度条。<circle>元素的属性可以用来指定进度条的半径、位置、颜色等。

然后，我们可以使用<animate>元素来让进度条动起来。<animate>元素的属性可以用来指定进度条的动画属性，如半径、颜色等。

代码示例

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="loading" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="200px" height="200px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<circle id="circle" cx="25" cy="25" r="20" fill="none" stroke="#000" stroke-width="4" stroke-linecap="round"/>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" repeatCount="indefinite" values="0 25 25;360 25 25"/>
</svg>