css - レスポンシブCSSサークルローダー

Question

CSS サークル ローダーを作成しようとしていますが、約 90% の作業が完了しています。

現在、.loader クラスのデータ属性 data-progress が進行状況を制御するようにしています。すべてが機能しますが、進行状況がアニメーション化されると、アニメーションのマスクが解除され、アニメーションが終了するとすぐに再びマスクされます。なぜこれが起こっているのか理解できないようです。

これまでに私が持っているものを見るためのJSビンへのリンクがあります。これに対する考えや解決策を聞きたいです。助けてくれてありがとう！

http://jsbin.com/sofiho/edit?html,css,js,output

コード スニペットを追加していないことをお詫びします。ここにあります：

HTML:

<div class="loader" data-progress="60">
    <div class="loader-progress"></div>
    <div class="loader-progress"></div>
</div>

SCSS:

    $mask-right-side : polygon(0 100%, 0 0, 50% 0%, 50% 100%);
    $mask-left-side  : polygon(50% 100%, 50% 0, 100% 0%, 100% 100%);

    .loader {
        position      : relative;
        width         : 200px;
        height        : 200px;
        background    : lightgray;
        border-radius : 50%;

        .loader-progress {
            position : absolute;
            top      : 0px;
            left     : 0px;
            width    : 100%;
            height   : 100%;
            &:before,&:after {
                transition : transform cubic-bezier(.19,1,.22,.97) 0.32s;
            }
            &:before,
            &:first-child:after {
                content       : "";
                position      : absolute;
                top           : 0px;
                left          : 0px;
                width         : 100%;
                height        : 100%;   
                border-radius : 50%;
            }
            &:first-child {
                z-index : 1;
                -webkit-clip-path: $mask-left-side;
                &:before,&:after {
                    background : green;
                    -webkit-clip-path: $mask-right-side;
                }
            }
            &:last-child {
                -webkit-clip-path: $mask-right-side;
                &:before {
                    transform  : rotate(180deg);
                    background : green;
                    -webkit-clip-path: $mask-right-side;
                }
            }
        }
    }

    $i         : 0;
    $increment : 180deg / 100;

    @while $i < 101 {
        .loader {
            &[data-progress="#{$i}"] {
                .loader-progress {
                    &:first-child {
                        &:after {
                            transform : rotate($increment * $i);
                        }
                    }
                    &:first-child:before {
                        transform : rotate($increment * $i * 2);
                    }
                    @if $i > 50 {
                        &:last-child:before {
                            transform : rotate($increment * $i * 2);
                        }
                    }
                }
            }
        }
        $i : $i + 1;
    }