在一些特别生的网站上，用户需要一个可视化的是示，以表明网站资源仍然在加载。从Spinner到Skeleton屏幕有不同的方法来解决这类的用户体验效果。如果我们使用的是开箱即用的解决方案，它为我们提供了当前的进度，比如Jam3所提供的预加载程序包，那么构建一个加载指示器就变得更容易了。为此，我们将制作一个带有动画的环形（圆形）的进度条，然后将其包装成一个组件，再提供给用户使用。

你是否还记得小时候剪过杂志上的照片，把它们粘在纸上，用来制作自己的拼贴画？这篇文章是关于使用CSS的clip-path属性，用来实现Web上裁剪图片的效果。将讨论如何进行切割，以及如何使用这些镂空部件来制作一些有趣的效果。

在上一节中，学习了怎么利用SVG的stroke-dasharray和stroke-dashoffset来制作进度条。记得在文章末尾留了一个悬念，说这一节中，要聊聊怎么用Vue来把这个SVG的进度封装成组件。咱们先不聊Vue怎么把这个封装成组件（我搜索了一下，有现在所这方面组件，而且做得蛮好的，接下来先学习一下）。今天接着聊上一节中的进度条怎么来实现。不过略有不同。不同点来自于网上一位朋友向我提的一个问题。

在我写的这篇文章中, 讲述了如何用Vanilla JavaScript使动画顺滑的从一种状态过渡到另一种。最好先看下那篇文章，因为在这篇文章中我们要用到一些那篇文章中讲过的内容。例如例子的演示、各种时间函数的公式、当从结束状态过渡到初始状态时不使时间函数倒转过来。都在那篇文章中做了详细讲解。

进度条是我们在Web中经常看到的一种效果，常见的进度条有水平横条和径向圆形的进度条。今天我们来看看怎么使用SVG来实现进度条的效果。使用SVG可以很容易的实现，也易于理解，最主要是使用SVG实现的进度条具有良好的跨浏览器，并且能根据浏览器屏幕尺寸很好的显示。

在上一节的《SVG线条动画实现原理》一文中，了解了SVG中线动画是怎么做的。在这篇文章中，了解了怎么借助Sketch这样的制作软件绘制SVG的路径，然后借助于SVG的stroke-dasharray和stroke-dashoffset值设置为路径的长度（最好是大于其长度，可以通过.getTotalLength()获取到路径的长度），在@keframes中的100%处设置stroke-dashoffset的值为0就可以实现线条自画的一个动画效果。原理很简单，但在上一篇文章中，看到的仅是一条路径（也就是一条线的自画效果），如果我们想对一图形进行依次自动动效呢？其实也是可以实现的。今天我们在这篇文章中就来学习一下，怎么实现。

今天我们来探索一下Carl Philipe Brenner的网站上一个微妙而有趣的动画效果。当鼠标经过网格元素时，会有一个微妙的动画发生 —— 网格元素变得透明，每条边有个顺时针的动画，创造了非常好的效果。这种效果是通过JS给span标签的宽或者高做了动画。我们待会会用SVG和CSS的transition来完成。注意，这个技术还是实验性的。

对于SVG路径动画，我相信大家都看到过这样的动效：一条线就像它自己画自己。非常的酷。@Jake Archibald是这项技巧的先驱，他在自己的博客写了一篇非常好的文章来介绍SVG的线条动画是如何实现的。@Brian Suda也在24 Ways网站上讨论过这种技术。Polygon使用它在一篇设计方面的文章里创建出了非常神奇的效果。Codrops也有很多非常酷的案例。在这篇文章中，我并没有什么要补充的，只是想把这种技术阐述的更简易些。所以，在这里我用我的方式把这种技术再次向大家阐述一遍。

任何有开发经验的前端工程师都会考虑到不成体系的设备生态所带来的挑战。设备间不同的屏幕尺寸、分辨率和比例使得产品难以提供一致的体验，对于那些对产品有着像素级完美追求的人这种体验差异尤其显著！SVG（可缩放的矢量图形）完美地解决了上文中提到的部分问题。尽管 SVG 有它的局限性，但是在某些场景下是非常有用的，如果你有一个好的设计团队，你也可以基于SVG创建一些震撼的视觉体验，而不必担心给浏览器带来过重的渲染负担或阻碍页面的加载时间。

在上一节介绍SVG填充特性中，提到了SVG中另一个特性描边特性（stroke）。SVG的描边特性主要包括stroke、stroke-width、stroke-opacity、stroke-dasharray、stroke-linecap、stroke-linejoin和stroke-miterlimit等属性。在这一节中，主要围绕这几个SVG属性进行展开。在SVG中咱们通过stroke来对绘制的图形边框进行设置，我们可以对图形边框的颜色、粗细、透明度，连接端，线帽和虚线等进行设置。为了更好的理解SVG中的描边特性，我们采用一个葡萄的轮廓图来展开介绍。