思路

  1. 用svg画出一个圆
  2. stroke-dasharray和stroke-dashoffset配合使用

实现举例

  1. <svg viewBox="25 25 50 50">
  2.   <circle cx="50" cy="50" r="20"></circle>
  3. </svg>
  1. svg {
  2.   width: 3.75em;
  3.   transform-origin: center;
  4.   animation: rotate 2s linear infinite;
  5. }
  7. circle {
  8.   fill: none;
  9.   stroke: #fc2f70;
  10.   stroke-width: 2;
  11.   stroke-dasharray: 1, 200;
  12.   stroke-dashoffset: 0;
  13.   stroke-linecap: round;
  14.   animation: dash 1.5s ease-in-out infinite;
  15. }
  17. @keyframes rotate {
  18.   100% {
  19.     transform: rotate(360deg);
  20.   }
  21. }
  24. /* 精髓 */
  25. @keyframes dash {
  26.   0% {
  27.     stroke-dasharray: 1, 200;
  28.     stroke-dashoffset: 0;
  29.   }
  30.   50% {
  31.     stroke-dasharray: 90, 200;
  32.     stroke-dashoffset: -35px;
  33.   }
  34.   100% {
  35.     stroke-dashoffset: -125px;
  36.   }
  37. }

精髓部分实现逐帧讲解：

  1. 整个动画可以分解为两个部分，第一个是stroke-dasharray的第一个参数变大造成的描边线变长，描边线由一开始的初始小点，长度1（下图）

屏幕快照 2019-08-23 上午11.15.19.png

变成了很长的中间态2，但是因为整体的周长为Math.PI 2 20 = 125.66370614359172，所以并不是一个整圆。
屏幕快照 2019-08-23 上午11.18.56.png

  1. 接下来加上stroke-dashoffset的配合，就会让整个描边的起点左移，圆在中间点会变成

屏幕快照 2019-08-23 上午11.22.00.png

  1. 在达成这个状态之后，再减少stroke-dashoffset的值，就会看到线继续左移到看不见的空间，视觉表现会变成

进度条.gif
再配合上最外层的svg进行360度的旋转，就达成了很酷炫的进度条的效果。