現代瀏覽器越來越標準化了，這樣的好處就是很多好用的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出來第三種顏色。效果也還行
