Sass编写实现loading图标

Sass编写实现loading图标

前言

今天有空看了看微信官方设计团队弄的WeUI中的loading图标，研究下了它的loading小图标的实现，但是看完后发现写地太水，那Less写得也很一般（虽然我不用Less），于是就自己编写实现了一个。

实现方式

微信用的是Less实现，而我用的是Sass来实现（追随大漠大神）。

不说废话，Sass代码如下：

.loading {
    $centerRadius: 1em;
    $itemWidth: .5em;
    $itemHeight: .2em;
    $width: $centerRadius + $itemWidth * 2;
    $height: $width;
    width: $width;
    height: $height;
    position: relative;
    .loading-item {
        width: $itemWidth;
        height: $itemHeight;
        margin-top: $itemHeight / 2 * -1;
        margin-left: $centerRadius / 2;
        top: 50%;
        left: 50%;
        position: absolute;
        background-color: #d1d1d5;
        transform-origin: ($centerRadius / 2 * -1) ($itemHeight / 2);
        border-radius: 1px;
        @for $i from 1 through 12 {
            &:nth-child(#{$i}) {
                transform: rotate(($i - 1) * 30deg);
                animation: loading-item 1s linear infinite #{-1 + $i / 12}s;
            }
        }
        @at-root {
            @keyframes loading-item{
                0% {
                    opacity: 1;
                }
                @for $i from 1 through 11 {
                    #{$i / 12 * 100}% {
                        opacity: 1 - $i / 12;
                    }
                }
                100% {
                    opacity: 1;
                }
            }
        }
    }
}

loading的html结构代码：

<div class="loading">
    <div class="loading-item"></div>
    <div class="loading-item"></div>
    <div class="loading-item"></div>
    <div class="loading-item"></div>
    <div class="loading-item"></div>
    <div class="loading-item"></div>
    <div class="loading-item"></div>
    <div class="loading-item"></div>
    <div class="loading-item"></div>
    <div class="loading-item"></div>
    <div class="loading-item"></div>
    <div class="loading-item"></div>
</div>