Vue配置公共loading加载

最新推荐文章于 2025-03-26 01:54:48 发布

路光.

最新推荐文章于 2025-03-26 01:54:48 发布

阅读量928

点赞数 10

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_41429765/article/details/113939479

版权

Vue 专栏收录该内容

62 篇文章

订阅专栏

本文介绍了如何在Vue中创建一个简单的Loading组件，使用CSS3动画（双摆动效果）来显示加载状态。组件包含一个可控制的显示开关和基于SCSS编写的动画样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//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>