响应css圈装载机

Question

我试图制作一个css圈装载机，我大约90％都在那里。

目前我拥有它，以便.loader类的数据属性data-progress控制进度。一切正常，但是当进展动画时，它会变为动画的未屏蔽，然后在动画结束后再次屏蔽。我似乎无法弄清楚为什么会这样。

这是一个链接到JS bin，看看我到目前为止，我很想听到任何想法或解决方案。在此先感谢您的帮助！

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;
    }