SOURCE

<div class="trangleLoading">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

.trangleLoading{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position:relative;
    overflow:hidden;
    -webkit-transform: rotate(22deg) scale(0.3);
    .item{
        position:absolute;
        top:50%;
        left:50%;
        margin: -12px 0 0 -25px;
        height: 0px;
        width: 0px;
        border-top:solid 12px transparent;
        border-right: solid 30px #ccc;
        border-bottom:solid 12px transparent;
        border-left:solid 20px transparent;
        background:transparent;
        animation-name: blink;
        animation-duration: 1s;
        animation-iteration-count:infinite;
        $translate: translate(20px, 0px);
        $rotateDeg: 45deg;
        $animationDelay: 125ms;
        &:nth-child(1){
            -webkit-transform: rotate(0 * $rotateDeg) $translate;
            animation-delay:0*$animationDelay;
        }
        &:nth-child(2){
            -webkit-transform: rotate(1 * $rotateDeg) $translate;
            animation-delay:1*$animationDelay;
        }
        &:nth-child(3){
            -webkit-transform: rotate(2 * $rotateDeg) $translate;
            animation-delay:2*$animationDelay;
        }
        &:nth-child(4){
            -webkit-transform: rotate(3 * $rotateDeg) $translate;
            animation-delay:3*$animationDelay;
        }
        &:nth-child(5){
            -webkit-transform: rotate(4 * $rotateDeg) $translate;
            animation-delay:4*$animationDelay;
        }
        &:nth-child(6){
            -webkit-transform: rotate(5 * $rotateDeg) $translate;
            animation-delay:5*$animationDelay;
        }
        &:nth-child(7){
            -webkit-transform: rotate(6 * $rotateDeg) $translate;
            animation-delay:6*$animationDelay;
        }
        &:nth-child(8){
            -webkit-transform: rotate(7 * $rotateDeg) $translate;
            animation-delay:7*$animationDelay;
        }
    }
}

@keyframes blink{
    0% {
        opacity:1;
    }
    25% {
        opacity:0;
    }
    50% {
        opacity:1;
    }
    100%{
        opacity:1;
    }
}