.radial-progress {

@circle-size: 90px;
@circle-background: transparent;
@circle-color: #FFC401;
@inset-size: 88px;
@inset-color: #f7f7f7;
@transition-length: 0.7s;
@shadow: 0px 0px 0px rgba(0,0,0,0);

    margin: 120px 0px 120px 150px;
    width:  @circle-size/4;
    height: @circle-size/4;

    background-color: @circle-background;
    border-radius: 50%;
.circle {
.mask, .fill {
    width:    @circle-size;
    height:   @circle-size;
    position: absolute;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    transition: -webkit-transform @transition-length;
    transition: -ms-transform @transition-length;
    transition: transform @transition-length;
    border-radius: 50%;
}
.mask {
    clip: rect(0px, @circle-size, @circle-size, @circle-size/2);
.fill {
    clip: rect(0px, @circle-size/2, @circle-size, 0px);
    background-color: @circle-color;
}
}
}
.inset {
    width:       @inset-size;
    height:      @inset-size;
    position:    absolute;
    margin-left: (@circle-size - @inset-size)/2;
    margin-top:  (@circle-size - @inset-size)/2;
    background-color: @inset-color;
    border-radius: 50%;
    box-shadow: @shadow;
}

@i: 0;
@increment: 180deg / 100;
.loop (@i) when (@i <= 100) {
&[data-progress="@{i}"] {
    .circle {
    .mask.full, .fill {
        -webkit-transform: rotate(@increment * @i);
        -ms-transform: rotate(@increment * @i);
        transform: rotate(@increment * @i);
    }
}
}
.loop(@i + 1);
}
.loop(@i);
}