vue常用组件之loading

最新推荐文章于 2024-06-03 16:39:14 发布
最新推荐文章于 2024-06-03 16:39:14 发布
阅读量6.9k 收藏 6
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wh_xmy/article/details/81186574
版权

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

 

wh_xmy
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个不一定好用但是挺好看的vueloading
08-12
一个不一定好用但是挺好看的vue loading
vue 封装 loading 组件
lllsj的博客
11-22 636
这是页面 loading 封装,不是table loading封装. main.js import 'element-ui/lib/theme-chalk/index.css' loading.js import { Loading } from 'element-ui'; let loadingCount = 0; let loading; const startLoading = ()...
【踩坑日记】vue项目实现弹框整体loading效果（包括标题）
最新发布
lFFFFFFl的博客
06-03 678
使用elementUI的Loading.service实现弹框全覆盖效果的loading遮罩，并把它写成vue插件，在页面直接使用v-dialogLoading指令去显示与隐藏遮罩。
vue封装一些常用组件loading、switch、progress
weixin_30905981的博客
03-01 713
vue封装一些常用组件loading、switch、progress github文档https://github.com/zengjielin/vue-component-library loading组件 条形进度条 圆形进度条 switch组件 转载于:https://www.cnblogs.com/zengjielin/p/10454970.html...
vue中加载loading
每天学习一点点
05-14 3万+
首先在components文件夹中新建一个loading.vue组件: 1.loading.vue组件内容如下： <template> <div class="markbox" v-show="loading" style="background-color: rgba(0, 0, 0, 0.5);"> <div class="sun-lo...
Vue 封装的loading组件
weixin_30547797的博客
10-15 118
<template> <div class="loadEffect"> <span></span> <span></span> <span></span> <span></span> ...
VueTemplate：vue模板，集成常用组件
02-05
loading组件 加载微调器组件 模态组件 popup组件 模拟滚动组件 模拟滚动条组件 路由切换动画组件 常用库 前端下载库 总体加载库 浮点数转中文库 localStorage库 倒计时库 localStorage，sessionStorage封装库 post...
vue loadmore组件上拉加载更多功能示例代码
08-29
Vue Loadmore 组件是一个常用的上拉加载更多功能组件，在移动端 H5 页面中非常实用。下面是该组件的实现示例代码和详细解释。 组件模板 首先，我们需要编写组件的模板部分的 HTML 代码。该模板非常简单，清晰的...
vue+elementUi图片上传组件使用详解
10-16
Vue.js和ElementUI是开发Web应用的常用框架和组件库，它们结合使用能极大地提高开发效率。在本文中，我们将详细探讨如何在Vue项目中利用ElementUI的图片上传组件实现图片上传功能。 首先，让我们了解图片上传组件的...
vue高度定制化常用的一些组件progressswitchloading
08-13
本话题主要探讨了三个常用的可定制组件：进度条（Progress）、开关（Switch）和加载指示器（Loading）。这些组件在Web应用中起着至关重要的作用，为用户提供实时反馈，提升用户体验。 1. **进度条组件（Progress）*...
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
10-17
创建一个名为`loading.vue`的组件，用于显示和隐藏loading效果。在Vuex中，我们需要设置一个状态（state）来控制loading的显示与隐藏： ```javascript export const store = new Vuex.Store({ state: { isShow: ...
vue项目 - 封装loding组件
weixin_55042716的博客
06-16 735
一、需求问题 在vue项目中，当在页面内容进行加载的时候，会进行请求数据，然后显示页面。在这个等待的过程中，会出现一段时间的白屏，我们可以通过加一个loading的效果，进行过渡，然后显示页面。 <template> <div> <!--没数据则 加载动画 --> <comloading v-if="watchflag"></comloading> <!--有数据则显示 设置样式 --> <div v-if="!wa
vue中使用loading
weixin_43675173的博客
11-13 3982
因为有很多组件需要loading,所以我们把loading写为组件，在全局中都可以使用 而选择的loading ,最好是css3动画写的，如果用图片，图片本身就是需要请求的 在网上找了一个css3动画，如下： loading中的代码： <template> <div class="loader"></div> </template> <s...
封装vue loading组件
mengfanyue123的博客
06-18 1092
上代码 <template> <div class="loader"></div> </template> <script> export default { name: 'Loading' } </script> <style lang="scss" scoped> $colors: hsla(337, 84, 48, 0.75) hsla(160, 50, 48, 0.75) hsla(.
vue 项目中使用 Loading 组件
热门推荐
starleejay的博客
06-19 8万+
当在vue项目中请求后台接口时，常常会使用 loding 过渡数据的加载时间。 如果 loading 作为一个全局的加载状态，应该写在项目中的App.vue中 &lt;template&gt; &lt;div id="app"&gt; &lt;router-view&gt;&lt;/router-view&gt; &lt;loading v-if='LO...
Vue —— loading效果
weixin_54966486的博客
05-02 1250
看文档 发请求前 this.loading = true; 发请求获取到数据后 this.loading = false;
vue之封装loading组件
WuqibuHuan的博客
05-26 555
直接上代码： <!-- 用法: this.$store.commit('showLoading', true);展示 this.$store.commit('showLoading', false);不展示 <div class="main"> <Loading v-show="isLoading" /> </div> .main{ position: relative;/
vue之loading组件
weixin_47409897的博客
12-03 331
目录vue之loading组件组件1组件2 vue之loading组件 转载于：链接: link. 转载于：链接: link. 组件1 //loading效果组件 <template> <div class="loadEffect" :style="{marginTop: marginTop? marginTop : '50%'}"> <span class="ld-span"></span> <span class="ld-spa
vue使用loading加载
weixin_39246975的博客
04-13 9037
1、效果: 1649832674984 2、前言： 在vue中提供v-loading命令，用于div的loading加载，因为v-loading需要绑定一个双向绑定的变量，因此会产生如果页面需要多个loading，则需要很多个变量，在此不必要的情况下，作者自己写了一个vue的插件。 1、引入依赖 #如果你的vue项目版本为3.0+,使用该命令 npm i loading-viewer-v
vue异步加载组件loading
08-18
在Vue中，可以通过在异步加载组件时添加loading状态来提供用户反馈。以下是一种常用的方式： 1. 创建一个Loading组件，用于显示加载状态的UI。例如，可以创建一个`Loading.vue`组件： ```vue <template> <div class="loading"> <span>Loading...</span> </div> </template> <script> export default { name: 'Loading', }; </script> <style scoped> .loading { display: flex; justify-content: center; align-items: center; height: 100px; } </style> ``` 2. 在异步加载组件时，可以添加一个loading标志位来表示加载状态。例如，在使用`import()`函数动态导入组件时： ```javascript data() { return { isLoading: true, // 初始加载状态为true component: null, // 初始化组件为null }; }, mounted() { import('./AsyncComponent.vue') .then((component) => { this.component = component.default; // 导入组件 this.isLoading = false; // 加载完成，loading状态为false }) .catch((error) => { console.error('Failed to load component:', error); this.isLoading = false; // 加载失败，loading状态为false }); }, ``` 3. 在模板中根据loading状态显示相应的内容。例如： ```vue <template> <div> <!-- 根据loading状态显示不同内容 --> <div v-if="isLoading"> <Loading /> </div> <div v-else> <component :is="component" /> </div> </div> </template> <script> import Loading from './Loading.vue'; export default { components: { Loading, }, // ... }; </script> ``` 在上述代码中，根据`isLoading`的值显示不同内容，当`isLoading`为`true`时，显示`Loading`组件；当`isLoading`为`false`时，显示异步加载的组件。 通过以上方式，您可以在异步加载组件时提供加载状态的反馈。希望能对您有所帮助！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值