vue常用组件之loading

有的页面请求数据或者第一次加载的话会需要一定时间，这时候为了避免用户等待枯燥，可以适当加些loading之类的动态效果，下面是vue的一个动态loading组件，效果如下图：

代码如下：

<!--
 *
 * loadingGif组件--"数据请求中"
 *
 * 使用方法：
 * <loading-gif :show-loading="showLoaddingGif"></loading-gif>
 *
 *  通过修改showLoaddingGif的true或者false 来控制loading的显示和隐藏!
 *
 -->
<template>
    <div class='uil-default-css' style='transform:scale(0.3);' v-show="showLoading">
        <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(0deg) translate(0,-60px);transform:rotate(0deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
        <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(30deg) translate(0,-60px);transform:rotate(30deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
        <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(60deg) translate(0,-60px);transform:rotate(60deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
        <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(90deg) translate(0,-60px);transform:rotate(90deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
        <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(120deg) translate(0,-60px);transform:rotate(120deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
        <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(150deg) translate(0,-60px);transform:rotate(150deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
        <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(180deg) translate(0,-60px);transform:rotate(180deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
        <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(210deg) translate(0,-60px);transform:rotate(210deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
        <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(240deg) translate(0,-60px);transform:rotate(240deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
        <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(270deg) translate(0,-60px);transform:rotate(270deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
        <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(300deg) translate(0,-60px);transform:rotate(300deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
        <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(330deg) translate(0,-60px);transform:rotate(330deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
    </div>
</template>

<script>
    export default {
        props: ["showLoading"]
    }
</script>

<style lang="sass" rel="stylesheet/scss">
    @-webkit-keyframes uil-default-anim {
        0% {
            opacity: 1
        }
        100% {
            opacity: 0
        }
    }

    @keyframes uil-default-anim {
        0% {
            opacity: 1
        }
        100% {
            opacity: 0
        }
    }

    .uil-default-css > div:nth-of-type(1) {
        -webkit-animation: uil-default-anim 1s linear infinite;
        animation: uil-default-anim 1s linear infinite;
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s;
    }

    .uil-default-css {
        position: relative;
        background: none;
        width: 200px;
        height: 200px;
    }

    .uil-default-css > div:nth-of-type(2) {
        -webkit-animation: uil-default-anim 1s linear infinite;
        animation: uil-default-anim 1s linear infinite;
        -webkit-animation-delay: -0.4166666666666667s;
        animation-delay: -0.4166666666666667s;
    }

    .uil-default-css {
        position: relative;
        background: none;
        width: 200px;
        height: 200px;
    }

    .uil-default-css > div:nth-of-type(3) {
        -webkit-animation: uil-default-anim 1s linear infinite;
        animation: uil-default-anim 1s linear infinite;
        -webkit-animation-delay: -0.33333333333333337s;
        animation-delay: -0.33333333333333337s;
    }

    .uil-default-css {
        position: relative;
        background: none;
        width: 200px;
        height: 200px;
    }

    .uil-default-css > div:nth-of-type(4) {
        -webkit-animation: uil-default-anim 1s linear infinite;
        animation: uil-default-anim 1s linear infinite;
        -webkit-animation-delay: -0.25s;
        animation-delay: -0.25s;
    }

    .uil-default-css {
        position: relative;
        background: none;
        width: 200px;
        height: 200px;
    }

    .uil-default-css > div:nth-of-type(5) {
        -webkit-animation: uil-default-anim 1s linear infinite;
        animation: uil-default-anim 1s linear infinite;
        -webkit-animation-delay: -0.16666666666666669s;
        animation-delay: -0.16666666666666669s;
    }

    .uil-default-css {
        position: relative;
        background: none;
        width: 200px;
        height: 200px;
    }

    .uil-default-css > div:nth-of-type(6) {
        -webkit-animation: uil-default-anim 1s linear infinite;
        animation: uil-default-anim 1s linear infinite;
        -webkit-animation-delay: -0.08333333333333331s;
        animation-delay: -0.08333333333333331s;
    }

    .uil-default-css {
        position: relative;
        background: none;
        width: 200px;
        height: 200px;
    }

    .uil-default-css > div:nth-of-type(7) {
        -webkit-animation: uil-default-anim 1s linear infinite;
        animation: uil-default-anim 1s linear infinite;
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
    }

    .uil-default-css {
        position: relative;
        background: none;
        width: 200px;
        height: 200px;
    }

    .uil-default-css > div:nth-of-type(8) {
        -webkit-animation: uil-default-anim 1s linear infinite;
        animation: uil-default-anim 1s linear infinite;
        -webkit-animation-delay: 0.08333333333333337s;
        animation-delay: 0.08333333333333337s;
    }

    .uil-default-css {
        position: relative;
        background: none;
        width: 200px;
        height: 200px;
    }

    .uil-default-css > div:nth-of-type(9) {
        -webkit-animation: uil-default-anim 1s linear infinite;
        animation: uil-default-anim 1s linear infinite;
        -webkit-animation-delay: 0.16666666666666663s;
        animation-delay: 0.16666666666666663s;
    }

    .uil-default-css {
        position: relative;
        background: none;
        width: 200px;
        height: 200px;
    }

    .uil-default-css > div:nth-of-type(10) {
        -webkit-animation: uil-default-anim 1s linear infinite;
        animation: uil-default-anim 1s linear infinite;
        -webkit-animation-delay: 0.25s;
        animation-delay: 0.25s;
    }

    .uil-default-css {
        position: relative;
        background: none;
        width: 200px;
        height: 200px;
    }

    .uil-default-css > div:nth-of-type(11) {
        -webkit-animation: uil-default-anim 1s linear infinite;
        animation: uil-default-anim 1s linear infinite;
        -webkit-animation-delay: 0.33333333333333337s;
        animation-delay: 0.33333333333333337s;
    }

    .uil-default-css {
        position: relative;
        background: none;
        width: 200px;
        height: 200px;
    }

    .uil-default-css > div:nth-of-type(12) {
        -webkit-animation: uil-default-anim 1s linear infinite;
        animation: uil-default-anim 1s linear infinite;
        -webkit-animation-delay: 0.41666666666666663s;
        animation-delay: 0.41666666666666663s;
    }

    .uil-default-css {
        position: relative;
        background: none;
        width: 200px;
        height: 200px;
    }
</style>