svg画loading

成品效果

loading.gif

相关代码

文本
创建一个空的svg，写入文本<text>

<text x="0" y="55" dx="68" dy="0" fill="#e1e5ed">Loading</text>

参数	描述	默认值
x	文本绘制x轴位置	0
y	文本绘制y轴位置	0
dx	每个字符相对前一个字符的偏移距离	0
dy	每个字符相对前一个字符的偏移距离	0
fill	文字的颜色	black
stroke	如果设置了stroke，字的边缘会再“描一层边”。如果设置了stroke并将fill设为none，呈现为空心字。	none

css中影响字体样式的属性同样可以作用在<text>上。

.svg text{font-size:24px;text-align:center;font-family:"Arial Black";font-bold:bold;text-shadow:0 0 7px #fff;}

text-shadow设置文字有一圈边缘阴影

点
其实就是一个个的圆

<circle id="1" transform="translate(135, 70) rotate(-120) translate(-135, -70) " cx="135" cy="70" r="5"></circle>

· 半径 r 等于5；
· cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)；
· transform属性同CSS3的含义，可参考学习下：
SVG之transform
理解SVG坐标系统和变换： transform属性

接下来就是利用CSS3形成点的动画效果：
(1) 透明度的变化

@keyframes opacity {
  3% {
    fill-opacity: 1;
  }

  75% {
    fill-opacity: 0;
  }
}

(2) 颜色的变化

@keyframes colors {
  0% {
    fill: yellowgreen;
  }

  10% {
    fill: gold;
  }

  75% {
    fill: crimson;
  }
}

(3) 时间的变化
需要多个小圆点组成动画的效果，那么就需要每个点颜色、透明度变化的不在同一个时间点

circle {
  fill: dodgerblue;
  fill-opacity: 0;
  -webkit-animation: opacity 1.2s linear infinite;
  animation: opacity 1.2s linear infinite;
}

完整代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>loading</title>
  <style>
    svg {
      margin:0;padding:0;height: 90px;
      width: 150px;
      overflow: visible;
    }
    svg text{text-anchor: middle;font-size:24px;text-align:center;font-family:"Arial Black";font-bold:bold;text-shadow:0 0 7px #fff;}
    .g-circles {
      -webkit-transform: scale(0.9) translate(7px, 7px);
      -ms-transform: scale(0.9) translate(7px, 7px);
      transform: scale(0.9) translate(7px, 7px);
    }
    circle {
      fill: dodgerblue;
      fill-opacity: 0;
      -webkit-animation: opacity 1.2s linear infinite;
      animation: opacity 1.2s linear infinite;
    }
    circle:nth-child(12n + 1) {
      -webkit-animation-delay: -0.1s;
      animation-delay: -0.1s;
    }
    circle:nth-child(12n + 2) {
      -webkit-animation-delay: -0.2s;
      animation-delay: -0.2s;
    }
    circle:nth-child(12n + 3) {
      -webkit-animation-delay: -0.3s;
      animation-delay: -0.3s;
    }
    circle:nth-child(12n + 4) {
      -webkit-animation-delay: -0.4s;
      animation-delay: -0.4s;
    }
    circle:nth-child(12n + 5) {
      -webkit-animation-delay: -0.5s;
      animation-delay: -0.5s;
    }
    circle:nth-child(12n + 6) {
      -webkit-animation-delay: -0.6s;
      animation-delay: -0.6s;
    }
    circle:nth-child(12n + 7) {
      -webkit-animation-delay: -0.7s;
      animation-delay: -0.7s;
    }
    circle:nth-child(12n + 8) {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }
    circle:nth-child(12n + 9) {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }
    circle:nth-child(12n + 10) {
      -webkit-animation-delay: -1s;
      animation-delay: -1s;
    }
    circle:nth-child(12n + 11) {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }
    circle:nth-child(12n + 12) {
      -webkit-animation-delay: -1.2s;
      animation-delay: -1.2s;
    }
    .g-circles--v3 circle {
      fill-opacity: 1;
      -webkit-animation-name: opacity, colors;
      animation-name: opacity, colors;
    }
        /***透明度***/
    @-webkit-keyframes opacity {
      3% {
        fill-opacity: 1;
      }

      75% {
        fill-opacity: 0;
      }
    }

    @keyframes opacity {
      3% {
        fill-opacity: 1;
      }

      75% {
        fill-opacity: 0;
      }
    }
        /***颜色变化***/
    @-webkit-keyframes colors {
      0% {
        fill: yellowgreen;
      }

      10% {
        fill: gold;
      }

      75% {
        fill: crimson;
      }
    }
    @keyframes colors {
      0% {
        fill: yellowgreen;
      }

      10% {
        fill: gold;
      }

      75% {
        fill: crimson;
      }
    }

  </style>
</head>

<body>
    <svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <text x="0" y="55" dx="68" dy="0" fill="#e1e5ed">Loading</text>
      <g id="circle" class="g-circles g-circles--v3">
          <circle id="1" transform="translate(135, 70) rotate(-120) translate(-135, -70) " cx="135" cy="70" r="5"></circle>
          <circle id="2" transform="translate(120, 70) rotate(-90) translate(-120, -70) " cx="120" cy="70" r="5"></circle>
          <circle id="3" transform="translate(105, 70) rotate(-60) translate(-105, -70) " cx="105" cy="70" r="5"></circle>
          <circle id="4" transform="translate(90, 70) rotate(-30) translate(-90, -70) " cx="90" cy="70" r="5"></circle>
          <circle id="5" transform="translate(75, 70) rotate(-60) translate(-75, -70) " cx="75" cy="70" r="5"></circle>
          <circle id="6" transform="translate(60, 70) rotate(-120) translate(-60, -70) " cx="60" cy="70" r="5"></circle>
          <circle id="7" transform="translate(45, 70) rotate(-90) translate(-45, -70) " cx="45" cy="70" r="5"></circle>
          <circle id="8" transform="translate(30, 70) rotate(-60) translate(-30, -70) " cx="30" cy="70" r="5"></circle>
          <circle id="9" transform="translate(15, 70) rotate(-30) translate(-15, -70) " cx="15" cy="70" r="5"></circle>
          <circle id="10" transform="translate(0, 70) rotate(-30) translate(0, -70) " cx="0" cy="70" r="5"></circle>
      </g>
  </svg>

</body>
</html>

svg画loading

成品效果

相关代码

推荐阅读更多精彩内容