svg加载动画

[sollrei]

codepen

原文： https://glennmccomb.com/articles/building-a-pure-css-animated-svg-spinner/

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="45"/>
</svg>

css

// SVG 样式.
svg {
  max-width: 100px;
  animation: 2s linear infinite svg-animation;
}

// Circle 样式.
circle {
  animation: 1.4s ease-in-out infinite both circle-animation;
  display: block;
  fill: transparent;
  stroke: #2f3d4c;
  stroke-linecap: round;
  stroke-dasharray: 283; // 圆周长
  stroke-dashoffset: 280;
  stroke-width: 10px;
  transform-origin: 50% 50%;
}

包括三部分的动画

1. 利用css animation改变<circle>元素stroke-dasharray和 stroke-dashoffset属性的值，实现的划线伸长变短的效果

   @keyframes circle-animation {
   0%,
   25% {
   stroke-dashoffset: 280;
   }
   
   50%,
   75% {
   stroke-dashoffset: 75;
   }
   
   100% {
   stroke-dashoffset: 280;
   }
   }

2. circle元素自身的顺时针旋转

   75%到100%旋转的地方划线是逆时针向后收缩变短的效果，由于circle顺时针旋转的比较快，看起来整体还是顺时针旋转

   
   @keyframes circle-animation {
   0%,
   25% {
   // ...
   transform: rotate(0);
   }

   50%, 75% { // ... transform: rotate(45deg); }

   100% { // ... transform: rotate(360deg); } }

3. svg元素的旋转

   
   svg {
   animation: 2s linear infinite svg-animation;
   }

@keyframes svg-animation { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg) } }

[sollrei]

兼容性IE11及以下不支持