問題描述

純css無法實現(xiàn)的話說說其他方法

問題解答

自問自答吧，上面幾個答案沒懂我的意思，動畫效果的那個比較接近我想要的，最后還是codepen上搜找到了差不多的demo，一個臺灣人寫的：鏈接描述

思路很簡單，寫6個p，每個代表一段漸變，通過linear-gradient的角度和css3的skew把6個p拼成如下樣子：

然后裁出一個圓環(huán)就行了.唯一不太清楚的是漸變的透明度為什么是12%到88%，不知道有什么特別用意，知道的各位還請指教一下。

還有個坑爹的東西，移動端使用漸變要注意兼容性，linear-gradient和帶瀏覽器前綴比如-webkit-的角度標準不一樣，一個是順時針一個是逆時針，我的安卓支持-webkit-linear-gradient，不支持linear-gradient。鏈接描述

用CSS可以實現(xiàn)：1、做一個空的正方形的p；2、將p的偽元素after和before設(shè)置為p的一半高和一樣寬，這樣就相當于在p里上下各有一個半高的塊元素；3、分別根據(jù)需要的顏色設(shè)置這after和before的漸變；4、通過這是border-radius將after和before設(shè)置成半圓；5、在p正中間放置一個小一點塊元素，通過border-radius設(shè)置成圓。

示例如下：HTML

<p class='loading'><p class=’loading-indicator’><i></i></p>

CSS

.loading { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #eee}.loading-indicator { position: absolute; top: 50%; left: 50%; margin-left: -25px; margin-top: -25px; width: 50px; height: 50px;}.loading-indicator:before { content: ''; display: block; width: 50px; height: 25px; padding-bottom: 0; box-sizing: border-box; border-top-left-radius: 25px; border-top-right-radius: 25px; background: -webkit-linear-gradient(0deg, #999, #bbb);}.loading-indicator:after { content: ''; display: block; width: 50px; height: 25px; padding-top: 0; box-sizing: border-box; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; background: -webkit-linear-gradient(0deg, #eee, #bbb);}.loading-indicator>i { display: block; position: absolute; width: 40px; height: 40px; background: #eee; top: 5px; left: 5px; border-radius: 20px;}

如果需要的話還可以再加上動畫。

PS：還有一種利用background-clip替代中間那個i元素的方法。但是這種方法在android的微信上有問題，中間不是圓的。

codepen源碼 鏈接描述效果如下，會有轉(zhuǎn)圈效果，顏色也是一直在變。

可以用CSS3和漸變慢慢調(diào)整顏色，看看能不能盡可能得還原

比較麻煩。

實現(xiàn)圓環(huán)還是簡單的，麻煩的是漸變。css3的漸變要么是沿著直線的方向的線性漸變，要么是從圓心向外一圈一圈的徑向漸變，還沒有沿著圓弧方向的漸變。

也許用svg可以實現(xiàn)，沒試過不知道了。

css3可以