Vue配置公共loading加载

javascript 复制代码
//loading.vue
<template>
    <div v-if="show" class="lds-spinner">
        <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Loading',
        props: {
            show: Boolean
        },

    }
</script>
<style lang="scss" scoped>

    .spinner {
        width: 25px;
        height: 25px;
        position:absolute;
        top:50%;
        left:50%;
        transform: translate(-50%);
        .double-bounce1, .double-bounce2 {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: #ff2f2c;
            opacity: 0.6;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-animation: bounce 2.0s infinite ease-in-out;
            animation: bounce 2.0s infinite ease-in-out;
        }
        .double-bounce2 {
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
        }
    }
    @-webkit-keyframes bounce {
        0%, 100% { -webkit-transform: scale(0.0) }
        50% { -webkit-transform: scale(1.0) }
    }
    @keyframes bounce {
        0%, 100% {
            transform: scale(0.0);
            -webkit-transform: scale(0.0);
        } 50% {
              transform: scale(1.0);
              -webkit-transform: scale(1.0);
          }
    }
</style>
相关推荐
川石课堂软件测试3 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人11 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人12 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR17 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香19 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969322 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai27 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc32 分钟前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_91536 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍