美文网首页
在vue中使用loading组件 CSS3实现loading效果

在vue中使用loading组件 CSS3实现loading效果

作者: Mihansy | 来源:发表于2019-05-15 17:24 被阅读0次

    1、创建一个Loading.vue

    html

    JS

    CSS

    <style scoped>

    .loading {

    text-align: center;

    }

    .loading-icon {

        position: relative;

        width: 50px;

        height: 50px;

    margin: 0 auto;

    }

    .demo {

    width: 4px;

    height: 4px;

    border-radius: 2px;

    background: #d4ba6a;

    position: absolute;

    animation: demo linear 0.8s infinite;

    -webkit-animation: demo linear 0.8s infinite;

    }

    .demo:nth-child(1){

    left: 24px;

    top: 2px;

    animation-delay:0s;

    }

    .demo:nth-child(2){

    left: 40px;

    top: 8px;

    animation-delay:0.1s;

    }

    .demo:nth-child(3){

    left: 47px;

    top: 24px;

    animation-delay:0.1s;

    }

    .demo:nth-child(4){

    left: 40px;

    top: 40px;

    animation-delay:0.2s;

    }

    .demo:nth-child(5){

    left: 24px;

    top: 47px;

    animation-delay:0.4s;

    }

    .demo:nth-child(6){

    left: 8px;

    top: 40px;

    animation-delay:0.5s;

    }

    .demo:nth-child(7){

    left: 2px;

    top: 24px;

    animation-delay:0.6s;

    }

    .demo:nth-child(8){

    left: 8px;

    top: 8px;

    animation-delay:0.7s;

    }

    @keyframes demo {

    0%,40%,100% {transform: scale(1);}

    20% {transform: scale(3);}

    }

    @-webkit-keyframes demo {

    0%,40%,100% {transform: scale(1);}

    20% {transform: scale(3);}

    }

    .text {

    color: #999;

    margin-top: 12px;

    font-size: 14px;

    }

    </style>

    2、在父组件中使用Loading组件

    其中使用  v-if="!playList.length" ,是数据playList没加载之前,表示这块数据没有加载前,显示Loading;数据加载之后,不显示。

    相关文章

      网友评论

          本文标题:在vue中使用loading组件 CSS3实现loading效果

          本文链接:https://www.haomeiwen.com/subject/oylmaqtx.html