需要明确的是，遮罩和剪切是通过 CSS 来处理图像的两种不同的方法，让我们从剪切开始吧！
剪切基础
如果你曾经使用过 Photoshop , 你大概已经很熟悉剪切遮罩了。 他们有一些共同点，剪切通过放置矢量图形来使用,比如圆和三角形, 在图像和元素的上面矢量图形外面的任何部分都会显示，所有矢量图形边界的外面都将被隐藏。
举个例子，如果一个三角形的剪切遮罩覆盖上树林图像上的话, 你可以看到三角形里面的森林图像。图形的边界被称做剪切路径, 不要和已经废弃掉的 clip 属性混淆，你可以使用 clip-path 去创建一个剪切路径。
遮罩基础
在网页上，遮罩是使用 PNG 图片、CSS 渐变、或一个 SVG 元素来隐藏图片或其它元素的部分。我们将集中注意力在 SVG 图像上，不过请注意遮罩可以使用其他类型的图片或者样式的。
遮罩属性和遮罩元素
仅仅是为了帮助理解, 请记住被遮罩的元素是“原始”（还没有应用遮罩的）图片， 你可能不想看到全部的图片,所以使用 CSS mask 属性来完成隐藏部分图片的工作。 mask 是 CSS 一组独立属性的简写 , 我们将接下来会介绍它。SVG 元素被用来给 SVG 内部的图像添加遮罩效果。在接下来的示例中, 遮罩是添加了渐变效果的圆形。
在 SVG 图像上应用 SVG 遮罩元素
为了使用 SVG mask 得到一种感觉，我们将在 SVG 图像上使用遮罩。
这给人的第一印象可能会比较复杂, 但是它可以很好遮罩下面的图像。我们有一张真实的图片作为背景，那么 SVG 在哪里起作用呢？和剪切不同, 这张背景图片技术上来说是在 SVG 元素内部的。我们将使用 CSS 来给图片应用遮罩，属性将来自于 SVG 遮罩元素，在我们的 CSS 中指定一个 mask-element id。
在生活中比较常见的是直线进度条，但是圆形进度条的实现相对有意思，我个人总结了两种圆形进度条的实现方式。
首先我们得了解什么是svg，它是使用 XML 来描述二维图形和绘图程序的语言。可以直接在html中使用svg标签实现。实现圆形进度条前先讲下svg里面stroke属性。
实现圆形进度条主要用到 stroke-dasharray 和 stroke-dashoffset 。
stroke-dasharray="2*50*3.14" ,代表虚线长314，空白间隔长314
stroke-dashoffset="2*50*3.14" ，代表虚线偏移是314，这样展示出来的部分就是空白间隔。
将圆的周长展开来表示就是这样：
用css实现主要通过用两个div分别画半圆，并结合 overflow:hidden 实现。
这是从100->0，如果是从0->100的话，只需要修改动画旋转角度即可。
以上就是我总结的两种画原型进度条的方法，挺有意思的吧？
<div class="el-loading-mask is-fullscreen">
<div class="el-loading-spinner">
<svg viewBox="25 25 50 50" class="circular">
<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
</svg>
<p class="el-loading-text">Loading…</p>
</div>
</div>
/* ******************* 加载动画 **************************** */
.el-loading-mask.is-fullscreen { position: fixed}
.el-loading-mask { background-color: hsla(0,0%,100%,.4)!important}
.el-loading-mask { position: absolutez-index: 10000background-color: hsla(0,0%,100%,.9)margin: 0top: 0right: 0bottom: 0left: 0transition: opacity .3s}
.el-loading-mask.is-fullscreen .el-loading-spinner { margin-top: -25px}
.el-loading-spinner { top: 50%margin-top: -21pxwidth: 100%text-align: centerposition: absolute}
.el-loading-mask.is-fullscreen .el-loading-spinner .circular { width: 50pxheight: 50px}
.el-loading-spinner .circular { width: 42pxheight: 42pxanimation: loading-rotate 2s linear infinite}
svg:not(:root) { overflow: hidden}
.el-loading-spinner .el-loading-text { color: #ff495e !important}
.el-loading-spinner .el-loading-text { color: #20a0ffmargin: 3px 0font-size: 14px}
.el-loading-spinner .path { stroke: #ff495e !important}
.el-loading-spinner .path {
animation: loading-dash 1.5s ease-in-out infinite
stroke-dasharray: 90,150
stroke-dashoffset: 0
stroke-width: 2
stroke: #20a0ff
stroke-linecap: round
}
@keyframes loading-rotate {
to {
transform:rotate(1turn)
}
}@keyframes loading-dash {
0% {
stroke-dasharray:1,200
stroke-dashoffset:0
}
50% {
stroke-dasharray:90,150
stroke-dashoffset:-40px
}
to {
stroke-dasharray:90,150
stroke-dashoffset:-120px
}
/* ********************** 加载动画end ***************************************************** */
