jdvue/src/components/loading/index.less

A Vue.js 2.0 Mobile UI components at JinDanLiCai

.v-loading {
    z-index: 1;
    font-size: 0;
    line-height: 0;
    position: relative;
    vertical-align: middle;
    display: inline-block;

    &-circle {
        width: 16px;
        height: 16px;
    }
    &-spinner {
        z-index: -1;
        width: 100%;
        height: 100%;
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        animation: v-rotate 0.8s linear infinite;

        &-circle {
            border-radius: 100%;
            border: 3px solid transparent;
        }

        &-gradient-circle {
            background-size: contain;
        }

        &-spinner {
            animation-timing-function: steps(12);

            i {
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                position: absolute;

                &::before {
                    width: 2px;
                    height: 25%;
                    content: ' ';
                    display: block;
                    margin: 0 auto;
                    border-radius: 40%;
                    background-color: currentColor;
                }
            }
        }

        &-circular {
            animation-duration: 2s;
        }
    }

    &-circular {
        width: 100%;
        height: 100%;

        circle {
            stroke-width: 3;
            stroke-linecap: round;
            animation: v-circular 1.5s ease-in-out infinite;
        }
    }

    &-egg {
        background: url('./loading.png') center no-repeat;
        background-size: auto 13px;
    }

    &-black {
        .v-loading-spinner-circle {
            border-color: @gray;
            border-top-color: @master;
        }

        .v-loading-spinner-gradient-circle {
            background-image: url('./gradient-circle-black.png');
        }

        .v-loading-spinner-spinner {
            color: @gray;
        }

        circle {
            stroke: @gray;
        }
    }

    &-white {
        .v-loading-spinner-circle {
            border-color: rgba(0, 0, 0, .1);
            border-top-color: rgba(255, 255, 255, .6);
        }

        .v-loading-spinner-gradient-circle {
            background-image: url('./gradient-circle-white.png');
        }

        .v-loading-spinner-spinner {
            color: #fff;
        }

        circle {
            stroke: #fff;
        }
    }
}

@keyframes v-circular {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -40;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -120;
    }
}

.for(@i) when (@i < 12) {
    .v-loading-spinner-spinner i:nth-of-type(@{i}) {
        opacity: calc(1 - (0.75 / 12) * (@i - 1));
        transform: rotate(calc(@i * 30deg));
    }
    .for((@i + 1))
}

.for(1);


@keyframes v-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}