8个SVG加载(loading)动画实例代码
作者:admin 时间:2021-10-28 10:42:32 浏览:这是一个带有 8 个加载图像的 SVG 动画实例，这个例子非常适合用作加载(loading)动画。
实例介绍
这几个加载动画都是使用 HTML + CSS + SVG 实现的。
这几个加载动画的CSS代码是一样的，不同的只是各自的SVG代码。
下面通过其中一个动画来介绍其实现方法。
CSS
.loader {
margin: 0 0 2em;
height: 100px;
width: 20%;
text-align: center;
padding: 1em;
margin: 0 auto 1em;
display: inline-block;
vertical-align: top;
}
/*
Set the color of the icon
*/
svg path,
svg rect {
fill: #FF6700;
}CSS主要是设置动画颜色，fill: #FF6700; 。
HTML + SVG
<div class="loader loader--style1" title="0">
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
<path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
C22.32,8.481,24.301,9.057,26.013,10.047z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 20 20"
to="360 20 20"
dur="0.5s"
repeatCount="indefinite"/>
</path>
</svg>
</div>
div 是定位作用，使用CSS类 loader 。
SVG定义动画大小：width="40px" height="40px"
animateTransform 元素是控制动画旋转。
type 有五种类型：分别是rotate（旋转）、scale（缩放）、translate（位移）、skewX（X轴方向偏移）、skewY（Y轴方向偏移）。
from 第一个参数代表开始角度，第二个参数代表X轴开始坐标，第三个参数代表Y轴开始坐标。
to 第一个参数代表结束角度，第二个参数代表X轴结束坐标，第三个参数代表Y轴结束坐标。
dur 是设置动画的速度，我们可以改变该属性值来设置动画的速度。
repeatCount 代表执行次数，默认为一次；indefinite 表示无限次。
以上代码得到的动画图像如下
总结
本文介绍的SVG动画实例， 都是使用 HTML + CSS + SVG 实现的，代码少，使用简单，自定义容易，非常适合网页某个应用的加载进程使用。
您可能对以下文章也感兴趣
标签: 加载动画
相关文章
x
- 站长推荐
