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>