0

我正在尝试制作一个 css 圆形加载器，我已经完成了大约 90% 的工作。

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

这是 JS bin 的链接，可以查看我到目前为止所拥有的内容，我很想听听对此的任何想法或解决方案。提前感谢您的帮助！

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

抱歉没有添加代码片段！这里是：

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

0 回答 0