前端 - 自己实现好看的loading，其实也简单

现代浏览器越来越标准化了，这样的好处就是很多好用的CSS可以跨浏览器运行，效果很不错。大家看下面两个loading样式，实现起来也非常简单。

首先看下右边那个，它其实只有三种颜色，你看到多余三种颜色，是因为当两种颜色重叠到一起的时候，它会叠加出第三种颜色，这是mix-blend-mode: overlay的结果。现在我们来详细说一下，

首先是HTML:

由于有三种颜色，所以HTML结构也非常简单。

每个spinner-sector代表一个颜色，现在我们加入一些基本样式：

现在显示结果如下：

加入红色背景，是为了让大家看清楚现在它长什么样。接下来，我们去掉红色背景，给每个spinner-sector的边框上颜色，如下，给每个div分别上了，上边框色和左右边框色。

现在看起来如下：

注意看那个mix-blend-mode:overlay：它就是当两个颜色叠加一起，它会生成第三种颜色。比如下面这个，我们让top和right合并起来，会合并出一个淡粉色，

显示如下：

如果需要这个CSS的详细说明，可以去看MDN。接着，我们就可以给它加上动画了。我们用到里CSS property, 这样每一个spinner-sector都会有不同的动画效果，并且有不同的速度，这样他们就会产生不同的重叠，出现不同的颜色。

最终效果如下，不错吧，简单么？

这种方式挺灵活的，如果需要增加一种颜色，只要增加一个spinner-sector div，并进行相应的CSS配置就行了。

如果你不需要那么多颜色，并且希望HTML简单点，那可以使用CSS伪类实现，它只可以实现两种颜色，因为只有::before, ::after可以使用，其实::before, ::after就是上面的spinner-sector, 它们的代码实现基本上是一样的

超简单的HTML：

伪类CSS：

效果如下：

虽然只有两种颜色，但它也可以mix出来第三种颜色。效果也还行