这个外圈渐变效果能否用纯css实现？

用CSS可以实现：
1、做一个空的正方形的div；
2、将div的伪元素after和before设置为div的一半高和一样宽，这样就相当于在div里上下各有一个半高的块元素；
3、分别根据需要的颜色设置这after和before的渐变；
4、通过这是border-radius将after和before设置成半圆；
5、在div正中间放置一个小一点块元素，通过border-radius设置成圆。

示例如下：
HTML

<div class="loading"><div class='loading-indicator'><i></i></div>

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的微信上有问题，中间不是圆的。