zoukankan      html  css  js  c++  java
  • vue数据加载等待组件

    关于loading组件的。

    loading.vue

    <template>
        <div class="loading">
            <div class="mock">数据加载中</div>
            <div class="loader-inner ball-pulse">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </template>
    <script>
        export default {
            data(){
                return{
    
                }
            }
        };
    </script>
    
    <style scoped>
      .loading{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index:30;
         100%;
        height: 100%;
        background-color: #ffffff;
        opacity: 0.6;
      }
      .loading .mock{
        height: 30px;
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 25px;/*px*/
        color: #03a9f4;
        /*text-align: center;*/
        line-height: 30px;
      }
      .ball-pulse{
        position: absolute;
        top: 50%;
        left: 45%;
        transform: translateX(-22%);
      }
      .loading .ball-pulse div{
        background-color: #03a9f4;
         30px;
        height: 30px;
        border-radius: 100%;
        margin: 2px;
        animation-fill-mode: both;
        display: inline-block;
      }
      .loading .ball-pulse div:nth-child(1){
        animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
      }
      .loading .ball-pulse div:nth-child(2){
        animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
      }
      .loading .ball-pulse div:nth-child(3){
        animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)
      }
    
    
    @-webkit-keyframes scale {
      0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
      }
      45% {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
        opacity: 0.7;
      }
      80% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
      }
    }
    @keyframes scale {
      0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
      }
      45% {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
        opacity: 0.7;
      }
      80% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
      }
    }
    </style>
  • 相关阅读:
    原创:【微信小程序】发送消息模板教程(后台以PHP示例)
    【微信小程序】详解wx:if elif else的用法(搭配view、block)
    原创:微信小程序+WEB使用JS实现注册【60s】倒计时功能
    微信小程序的POST和GET请求方式的header区别
    什么是单例模式
    Spring bean的生命周期
    对Spring Bean了解一二
    匿名内部类了解一二
    Eclipse中如何查看使用的JDK版本
    什么是语法糖
  • 原文地址:https://www.cnblogs.com/WangXinPeng/p/9415448.html
Copyright © 2011-2022 走看看