responsive css circle loader

Question

I'm trying to make a css circle loader and I'm about 90 percent of the way there.

Currently I have it so that the data attribute data-progress on the .loader class controls the progress. Everything works, but when the progress is animating it becomes unmasked for the animation, and then masked again as soon as the animation ends. I can't seem to figure out why this is happening.

Here is a link to the JS bin for a look at what I have so far, I'd love to hear any thoughts or solutions to this. Thanks in advance for any help!

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

Sorry for not adding a code snippet! Here it is:

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