vue常用组件之loading

有的页面请求数据或者第一次加载的话会需要一定时间，这时候为了避免用户等待枯燥，可以适当加些loading之类的动态效果，下面是vue的一个动态loading组件，效果如下图：代码如下：<!--** loadingGif组件--"数据请求中"** 使用方法：* <loading-gif :show-loading="showLoaddingG

wh_xmy

7049人浏览 · 2018-07-24 16:08:38

wh_xmy · 2018-07-24 16:08:38 发布

有的页面请求数据或者第一次加载的话会需要一定时间，这时候为了避免用户等待枯燥，可以适当加些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>

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^