只用html CSS3 畫一個 circle spinner

效果以下：

這裏只是介紹個人一個實現方案， 順便留下一個沒能解決的問題（重點）， 求大神支招解決

---

HTML 結構

<div class="spinner">
    <div class="top"></div>
    <div class="bottom"></div>
  </div>

解釋：
0. 圓圈使用border和border-radius實現， 扇形經過rotate和overflow:hidden的方式來實現。
1. spinner 做爲容器， top負責上半個圓， bottom負責下半個圓。

css frame

.spinner {
        width: 70px;
        height: 70px;
        position: relative;
        left: 100px;
        top: 100px;
        color: white;
 }
 .spinner .top, .spinner .bottom{
        width: 70px;
        height: 35px;
        position: relative;
        overflow: hidden;
}

.spinner::before, .spinner .top::before, .spinner .bottom::before{
        content: '';
        width: 70px;
        height: 70px;
        display: inline-block;
        border-style: solid;
        border-top-color: #FFF;
        border-right-color: #FFF;
        border-left-color: transparent;
        border-bottom-color: transparent;
        border-radius: 50%;
        border-width: 5px;
        box-sizing: border-box;
}

動畫部分css

/* 使用spinner::before來覆蓋空隙*/
    .spinner::before {
        position: absolute;
        border-right-color: transparent;
        border-top-color: transparent;
        transform: rotateZ(47deg);
        -webkit-animation: fix-gap 2s ease-in infinite;
    }

    .spinner .top::before {
        transform: rotateZ(-225deg);
        -webkit-animation: rotate-top 2s ease-in infinite;
        /*-webkit-animation-delay: 0.3s;*/
    }

    .spinner .bottom::before {
        border-bottom-color: #fff;
        border-top-color: transparent;
        position: relative;
        bottom: 35px;
        transform: rotateZ(-135deg);
        -webkit-animation: rotate-bottom 2s  ease-out infinite;
        /*-webkit-animation-delay: 0.3s;*/
    }

    @-webkit-keyframes fix-gap {
        49%  {
            border-top-color: transparent;
        }
        50% { 
            border-top-color: white;
        }

        100% { 
            border-top-color: white; 
        }
    }

    @-webkit-keyframes rotate-top {
        50% { 
            transform: rotateZ(-45deg); 
        }

        100% {  
            transform: rotateZ(-45deg); 
        }
    }

    @-webkit-keyframes rotate-bottom {
        50% { 
            transform: rotateZ(-135deg);
        }

        100% {  
            transform: rotateZ(45deg); 
        }
    }

解釋:
這裏用到了3個before僞元素，爲何會使用3個，不是隻有上半個和下半個圓嗎？ 對， 這就是我要提出來的問題， 見下圖：

可能沒有發現問題， 若是你仔細些能夠看到上半圓和下半圓中間有一條空隙， 不能忍啊！
見大圖：

爲了fix這條空隙， 個人解決方法是經過旋轉spinner::before ，在動畫過程當中添加border的來覆蓋空隙。

全部代碼

<div class="spinner">
    <div class="top"></div>
    <div class="bottom"></div>
</div>






<h4>Circle Spinner  -by 橫天</h4>



<style>
    .spinner {
        width: 70px;
        height: 70px;
        position: relative;
        left: 100px;
        top: 100px;
        color: white;
    }

    .spinner .top, .spinner .bottom{
        width: 70px;
        height: 35px;
        position: relative;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translateZ(0) scale(1.0, 1.0);
        overflow: hidden;
    }

    .spinner::before, .spinner .top::before, .spinner .bottom::before{
        content: '';
        width: 70px;
        height: 70px;
        display: inline-block;
        border-style: solid;
        border-top-color: #FFF;
        border-right-color: #FFF;
        border-left-color: transparent;
        border-bottom-color: transparent;
        border-radius: 50%;
        border-width: 5px;
        box-sizing: border-box;
    }

    /* 使用spinner::before來覆蓋空隙*/
    .spinner::before {
        position: absolute;
        border-right-color: transparent;
        border-top-color: transparent;
        transform: rotateZ(47deg);
        -webkit-animation: fix-gap 2s ease-in infinite;
    }

    .spinner .top::before {
        transform: rotateZ(-225deg);
        -webkit-animation: rotate-top 2s ease-in infinite;
        /*-webkit-animation-delay: 0.3s;*/
    }

    .spinner .bottom::before {
        border-bottom-color: #fff;
        border-top-color: transparent;
        position: relative;
        bottom: 35px;
        transform: rotateZ(-135deg);
        -webkit-animation: rotate-bottom 2s  ease-out infinite;
        /*-webkit-animation-delay: 0.3s;*/
    }

    @-webkit-keyframes fix-gap {
        49%  {
            border-top-color: transparent;
        }
        50% { 
            border-top-color: white;
        }

        100% { 
            border-top-color: white; 
        }
    }

    @-webkit-keyframes rotate-top {
        50% { 
            transform: rotateZ(-45deg); 
        }

        100% {  
            transform: rotateZ(-45deg); 
        }
    }

    @-webkit-keyframes rotate-bottom {
        50% { 
            transform: rotateZ(-135deg);
        }

        100% {  
            transform: rotateZ(45deg); 
        }
    }

    body {
      background: rgb(235, 205, 86);
    }
    h4 {
      position: absolute;
      bottom: 20px;
      left: 20px;
      margin: 0;
      font-weight: 200;
      opacity: .5;
        font-family: sans-serif;
      color: #fff;
    }
</style>

最後

1. 跪求更好的解決方法?
2. 我已經試過了-webkit-backface-visibility: hidden; 或者 -webkit-transform: translateZ(0) scale(1.0, 1.0); 沒有達到想要的效果， 求fix！！！！！
3. 其實用svg + css3實現很簡單， 可是svg在mobile 兼容性差， 因此只能用div + css3， 或者canvas。

補充

若是隻是要畫一個圓形， 能夠用linear-gradient. 可是不支持transition

<div class="circle"> </div>
   <style>
      .circle{
         background-image: linear-gradient(18deg, #57ad68 50%, transparent 50%, transparent), linear-gradient(270deg, #57ad68 50%, #b7b7b7 50%, #b7b7b7);
         width: 100px; 
         height: 100px;
         border-radius: 50%;
       }
   </style>