css如何实现动态loading效果？

Question

目的：这条线有动态效果，
比如：一格一格动态出现，
比如：先出现整条线，然后一格一格高亮，
...
大佬们，纯css如何实现，要用哪些东西？

Answer 1

首先必须要肯定的一点是，你要先绘制出这个完整的线条。

接着再用一个 div 结合 mask CSS 属性实现遮罩，这个遮罩的 width 是会变化的，至于怎么变化就是看你 loading 加载的情况。这个情况，反正 CSS 监控不了，还是需要通过 JS 或者其他方式，结合 style 属性写进来。

---

或者干脆你直接通过 canvas 或者 svg 的方式直接绘制。