@mixin cycle($secs){
    animation:spin $secs infinite;
    -webkit-animation:spin $secs infinite;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
}

@keyframes spin{
    from{-webkit-transform: rotate(0deg);}
    to{-webkit-transform: rotate(360deg);}
}

@-webkit-keyframes spin{
    from{-webkit-transform: rotate(0deg);}
    to{-webkit-transform: rotate(360deg);}
}


#loadIcon{
  border:1px solid red;
  border-radius:50%;
    margin: 60px auto;
    height:120px;
    width:120px;
    position:relative;

    div{
        position:absolute;
    
        &:first-child{
            height:120px;
            width:120px;
            border-radius:60px;
            border-top:solid 10px blue;
            @include cycle(2s);
        }
    

        &:nth-child(2){
            height:90px;
            width:90px;
            border-radius:45px;
            border-top:solid 10px red;
            top: 15px;
            left:15px;
            @include cycle(1.5s);
        }

        &:nth-child(3){
            height:60px;
            width:60px;
            border-radius:30px;
            border-top:solid 10px yellow;
            top: 30px;
            left:30px;
            @include cycle(1s);
        }
        &:nth-child(4){
            height:60px;
            width:60px;
            border-radius:15px;
            border-top:solid 10px red;
            top: 45px;
            left:45px;
            @include cycle(.5s);
        }
    }
}