8个SVG加载(loading)动画实例代码

这是一个带有 8 个加载图像的 SVG 动画实例,这个例子非常适合用作加载(loading)动画。

demodownload

实例介绍

这几个加载动画都是使用 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 实现的,代码少,使用简单,自定义容易,非常适合网页某个应用的加载进程使用。

您可能对以下文章也感兴趣

  • 4个漂亮的CSS3 Loading预加载动画实例
  • CSS3 Loading 旋转圆盘加载动画
  • CSS3 loading音波效果预加载动画
  • CSS3 Loading预加载动画8个常见实例
  • CSS Loading 左右滚动加载动画等5实例【源码下载】