1/3 and 2/3 borders of a circle

one-two-third-borders.scss

$width: 70px;

.circle {
    display: inline-block;
    position: relative;
    text-align: center;
    width: $width;
    height: $width;
    margin-right: 20px;


    @mixin colored-borders {
        content: '';
        display: inline-block;
        width: $width;
        height: $width;
        border-radius: 50%;
        border: solid 5px $lighter-grey;
        position: absolute;
        top: 0;
        left: 0;
        transform: rotate(45deg);
    }

    &.one-third:before {
        @include colored-borders;
        border: solid 5px transparent;
        border-top-color: $blue;
        z-index: 2;
    }

    &.one-third:after {
        @include colored-borders;
        border-top-color: $blue;
        transform: rotate(78deg);
    }

    &.two-third:before {
        @include colored-borders;
        border: solid 5px transparent;
        border-top-color: $blue;
        z-index: 2;
    }

    &.two-third:after {
        @include colored-borders;
        border-top-color: $blue;
        border-right-color: $blue;
        transform: rotate(102deg);
    }

}