效果

代码

全局变量

@ball-size:40px; //球大小
@indi-length:8px; //红线长度
@indi-width:2px;  //红线宽度
@divs-nums:5;  //几根红线（注意是两头都有，所以5根）
@circle-time:2s; //转圈速度

.gsAjaxIndi {
    position: relative;
    display: inline-block;
    width: @ball-size;height: @ball-size;
    -webkit-animation: gs_spin @circle-time linear infinite;
    -o-animation: gs_spin @circle-time linear infinite;
    animation: gs_spin @circle-time linear infinite;
    div {
        position: absolute;
        left:50%;margin-left: -1 * @indi-width / 2;
        border:solid @indi-length red;
        height: @ball-size - (@indi-length *2);
        width: @indi-width;
        box-sizing:content-box;
        display: inline-block;
        border-left: 0;
        border-right: 0;
    }

    .rotateDiv(@index) when (@index =< @divs-nums){
        & :nth-child(@{index}) {
            -webkit-transform:rotate(180/@divs-nums*@index*1deg);
            transform:rotate(180/@divs-nums*@index*1deg);
        }
        .rotateDiv(@index+1);
    }

    .rotateDiv(1);
}

@-webkit-keyframes gs_spin {
    100% {
        -webkit-transform:rotate(360deg);
    }
}

@keyframes gs_spin {
    100% {
        transform:rotate(360deg);
    }
}

注意：.rotateDiv(@index) when (@index =< @divs-nums){…} 产生循环，生成

js 不一定需要，也可以手工 div 嵌套。