clip-path + SVG 实现字体进度

有点意思的DEMO，本来想给我司产品做点页面加载的动画，后来想想终极解决方案还是优化首屏的资源大小、采用骨架屏的方式去做。鉴于目前还没有骨架屏的具体实施，就先做个有意思的字体进度条来替代生硬的loading icon 吧。

实际上就是 css 的clip-path 属性搭配一个作为clip region 的SVG 资源。

logo_progress.gif

// 一个宽度逐渐变长的 div，是进度条的主体
  .progress {
          background: linear-gradient(to right, rgba(240, 117, 60, 0.4), rgb(227, 100, 43), rgba(240, 117, 60, 0.5));
            animation: progress 5s infinite;
            height: 40px;
            margin-left: 5px;
            /* clip-path: circle(20%); */
            clip-path: url('#myClip');
        }
        @keyframes progress {
            from {
                width: 0
            } to {
                width: 230px;
            }
        }

进度条主体是个div，宽度逐渐变长，但是需要一个svg 资源作为mask 去clip 这个div背景，在svg mask 内部的div 内容就渲染出来，在mask 外部的都被裁剪掉。

就像用一个望眼镜去看景物，镜头范围内的就显示出来，之外的自然看不见。

关键的，在div 的CSS 属性clip-path 中制定哪个 svg 资源作为mask。在HTML 中对应要放入一个svg，并且用clipPath 标签去包含svg 的具体path 内容。

<div class="progress">
           <svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
               <clipPath id="myClip" >
                   <path _ngcontent-c3="" d="m33.9 2.5c-1.8 0-3.4 0.5-5 1..>
               </clipPath>
           </svg>
       </div>

完。。