Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >vue2.0实现一个等待加载的动画效果

vue2.0实现一个等待加载的动画效果

作者头像
王小婷
发布于 2023-09-28 01:28:49
发布于 2023-09-28 01:28:49
1.6K014
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:14
代码可运行

1:创建一个Vue组件:在Vue项目中创建一个等待加载动画的组件。可以使用命令行工具或手动创建一个.vue文件,命名为Loading.vue

2:编写组件模板:在Loading.vue文件中,编写组件的模板。这个模板定义了等待加载动画的结构和样式。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <div class="loading-container">
    <!-- 等待加载动画的内容 -->
  </div>
</template>

3:添加样式:在组件的<style>部分,添加CSS样式来定义加载动画的外观和动画效果。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style>
.loading-container {
  /* 等待加载容器的样式 */
}
</style>

4:添加动画效果:在CSS样式中,使用@keyframes规则定义加载动画的动画效果。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style>
@keyframes spin {
  /* 定义加载动画的动画效果 */
}
</style>

5:添加组件逻辑:在组件的<script>部分,可以添加一些组件的逻辑代码。例如,定义组件的属性和方法。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>
export default {
  name: 'Loading',
  /* 组件的属性和方法 */
};
</script>

6:在应用中使用组件:在需要显示等待加载动画的地方,使用<loading></loading>标签来引入并使用Loading组件。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <div>
    <!-- 其他应用内容 -->
    <loading v-if="isLoading"></loading>
  </div>
</template>

使用了一个名为isLoading的变量来控制等待加载动画的显示和隐藏。可以根据实际需要使用适当的条件来显示加载动画。

以下是一个简单的示例demo

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <div class="loading-container">
    <div class="loading-spinner"></div>
    <div class="loading-text">{{ message }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '加载中...', // 自定义加载中文本
    };
  },
};
</script>

<style>
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  animation: spin 1s linear infinite;
}

.loading-text {
  margin-top: 10px;
  font-size: 16px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

在这个示例中,创建了一个名为 Loading 的Vue组件。组件包含一个加载容器(loading-container)和一个旋转的加载动画(loading-spinner),以及一个显示加载文本的元素(loading-text)。

通过CSS的@keyframes规则,定义了一个旋转动画,将其应用于加载动画元素。

要在应用中使用这个等待动画组件,可以在Vue实例中引入和注册该组件,然后在需要显示等待动画的地方使用<loading></loading>标签。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
vue 多种加载动画详解
在现代 Web 应用中,加载动画是一种常用的 UI 反馈,能够有效提示用户等待进程的状态,从而提升用户体验。本文将详细介绍几种常见的加载动画实现方式,并探讨其原理。此外,还会介绍一些现成的 CSS 动画库,帮助你快速实现更多样化的加载效果。
繁依Fanyi
2024/10/04
5290
纯css实现117个Loading效果(中)
这是我这几十年间从世界各地寻觅到的 Loading特效,合计117个(本文贴出第40-78个),而且是 纯CSS 制作的。
德育处主任
2022/04/17
1.5K0
纯css实现117个Loading效果(中)
每日分享html特效篇1个侧边栏菜单+2个导航栏+1个登录页面+6个加载
1.前端工程师主要利用HMTL与CSS建构页面(其中html构建骨架,css构建样式),用JavaScript获取后端数据以及完善交互以及用户体验。 2.通俗来讲,前端在一个项目里,拿到UI设计师设计的设计稿,然后实现UI设计师设计稿,调用后端程序员给的数据接口以获取数据,然后测试,最后部署上线。 3.前端可以对设计图负责,大部分情况下,不需要特别的去理解业务逻辑,因为我们90后都是玩着十几年手机电脑长大的,十几年的经验足够我们在潜意识里想明白应该怎么做,怎么去一步步实现,会有什么意外情况。 4.我感觉前端发展有个很大的缺陷----晋升问题. 正如第三点所言,作为领导必须对项目有足够的了解,显然是要重点包括业务逻辑,这点上,后端开发者需要涉及数据库逻辑,是必须要跟业务逻辑打交道的(重中之重),因此,大部分的领导岗位都是后端开发者更有晋升的机会。当然,个别公司有专门的前端组长(这也不算什么),如果说前端开发者在自己工作范围之外还要腾出时间去研究业务逻辑,属实是觉得出力不讨好(因为这样的操作需要持续很久才能看出效果),而且再怎么研究业务逻辑也不会比每时每刻跟业务逻辑打交道的后端开发者了解更多。说实在的,大部分情况下,前端在配合后端进行开发.后端需要了解业务逻辑,要跟领导和客户商量细节,露脸机会很大,在老板面前刷脸次数众多。这些都是拉开前后端程序员晋升机会差距的因素。
淼学派对
2022/11/20
3.7K0
每日分享html特效篇1个侧边栏菜单+2个导航栏+1个登录页面+6个加载
10 行代码!Vue 实现炫酷的 TodoList 动画效果
200行纯前端Vue代码!教你写一个专属TodoList【零基础友好】 文章中分享了如何使用纯 Vue 代码来实现一个动态效果的 TodoList,今天的分享是基于 TodoList 已有功能,在添加 todo 和删除 todo 时的样式上增加动画效果的优化。
Wu_Candy
2022/12/06
1.6K0
10 行代码!Vue 实现炫酷的 TodoList 动画效果
108种超轻量的加载动画
今天大师兄要分享的不是 Animate.js,也不是 Move.js,而是能提供108种加载动画的库:Whirl.
程序员老鱼
2022/12/22
8760
108种超轻量的加载动画
vue3制作一个初级血轮眼
1. 美国普渡大学的研究发现,OpenAI 开发的人工智能聊天机器人 ChatGPT 在回答软件编程问题时,错误率超过一半,但仍能骗过三分之一的提问者。
希里安
2023/10/30
2150
vue3制作一个初级血轮眼
Butterfly主题美化
在butterfly/source/css/创建一个universe.css文件。
ymktchic
2022/01/18
1.6K0
Butterfly主题美化
Vue2.0 scroll 组件的抽象和应用
本次的系列博文的知识点讲解和代码,主要是来自于Vue 2.0 高级实战-开发移动端音乐WebApp课程,由个人总结并编写,其代码及知识点部分,均有所更改和删减,关于更多 Vue 2.0 的知识和实际应用,还请大家购买课程进行学习实践,该系列博文的发布已得到黄轶老师的授权许可
Nian糕
2018/08/21
6670
Vue2.0 scroll 组件的抽象和应用
Vue实现一个全屏加载插件并发布至npm仓库
谁经历的苦难多,谁懂得的东西也就多。 前言 在做头像上传功能时,为了防止用户多次点击,通常会在上传时添加一个遮罩,提示用户:图片正在上传中,上传完毕后,关闭这个遮罩层,本来想找个UI框架引入进来,使用框架提供的弹层,找了很多没找到满意的,干脆自己做一个吧😂。接下来就跟大家分享下如何制作一个插件,先跟大家展示下最终实现的效果: 实现思路 涉及到的知识点:Vue 构造器、实例挂载 编写加载层业务代码,实现全局加载层的相关效果 在插件包的index.js中进行相关封装 定义插件对象,实现install方法 使
神奇的程序员
2022/04/10
7200
Vue实现一个全屏加载插件并发布至npm仓库
构建加载状态与流畅交互的精妙艺术
今日推荐:Spring AI再更新:如何借助全局参数实现智能数据库操作与个性化待办管理
繁依Fanyi
2024/11/24
3100
用 CodeBuddy 打造创意 Loading 动画生成器:只需三个词,就能玩出花来!
说出来你可能不信,我最近做了一个“Loading 动画生成器”,但过程完全没有动手写 CSS ——我只说了三个词:
不惑
2025/07/04
1770
用 CodeBuddy 打造创意 Loading 动画生成器:只需三个词,就能玩出花来!
为 Vue 的惰性加载加一个进度条
通常用 Vue.js 编写单页应用(SPA)时,当加载页面时,所有必需的资源(如 JavaScript 和 CSS 文件)都会被一起加载。在处理大文件时,这可能会导致用户体验不佳。
疯狂的技术宅
2020/10/22
3.5K0
为 Vue 的惰性加载加一个进度条
5分钟实现漂亮的CSS加载动画,纯CSS实现加载动画
视频地址:https://www.bilibili.com/video/BV1D5411H7Tc
AlbertYang
2020/12/31
2.6K0
加载动画(吃豆豆)
Loading吃豆豆动画 新建loading.ejs文件 在_partial 文件夹下新建loading.ejs 添加以下代码 <style type="text/css"> #loading-container{ position: fixed; top: 0; left: 0; min-height: 100vh; width: 100vw; z-index: 9999; display: flex; flex-direction:
闲花手札
2021/08/24
7160
vue2基础组件通信案例练习:把案例Todo-list改成使用动画与过度
注意点:让每一个添加和删除的操作有一个柔和的动画效果,有两种方式。方式1:在MyItem添加动画效果使用\<transition>标签;方式2:在MyList中添加效果使用\<transition-group>标签。下面案例代码使用方式2。
刘大猫
2024/10/24
1290
每日分享html特效篇之五个加载页面特效和五个导航按钮特效
1.前端工程师主要利用HMTL与CSS建构页面(其中html构建骨架,css构建样式),用JavaScript获取后端数据以及完善交互以及用户体验。 2.通俗来讲,前端在一个项目里,拿到UI设计师设计的设计稿,然后实现UI设计师设计稿,调用后端程序员给的数据接口以获取数据,然后测试,最后部署上线。 3.前端可以对设计图负责,大部分情况下,不需要特别的去理解业务逻辑,因为我们90后都是玩着十几年手机电脑长大的,十几年的经验足够我们在潜意识里想明白应该怎么做,怎么去一步步实现,会有什么意外情况。 4.我感觉前端发展有个很大的缺陷----晋升问题. 正如第三点所言,作为领导必须对项目有足够的了解,显然是要重点包括业务逻辑,这点上,后端开发者需要涉及数据库逻辑,是必须要跟业务逻辑打交道的(重中之重),因此,大部分的领导岗位都是后端开发者更有晋升的机会。当然,个别公司有专门的前端组长(这也不算什么),如果说前端开发者在自己工作范围之外还要腾出时间去研究业务逻辑,属实是觉得出力不讨好(因为这样的操作需要持续很久才能看出效果),而且再怎么研究业务逻辑也不会比每时每刻跟业务逻辑打交道的后端开发者了解更多。说实在的,大部分情况下,前端在配合后端进行开发.后端需要了解业务逻辑,要跟领导和客户商量细节,露脸机会很大,在老板面前刷脸次数众多。这些都是拉开前后端程序员晋升机会差距的因素。
淼学派对
2022/11/20
8.6K0
每日分享html特效篇之五个加载页面特效和五个导航按钮特效
【动画消消乐 】仿ios、android中常见的一个loading动画 074
文章仅作为学习笔记,记录从0到1的一个过程。希望对您有所帮助,如有错误欢迎小伙伴指正~
海轰Pro
2021/08/05
5650
7种最棒的Vue Loading加载动画组件测评与推荐-穷尽市面上所有加载动画效果类型
Vue Loading 加载动画组件 (Vue-loader) 看起来很简单不重要,实际上它是保证用户留存的关键一环。选择好 Loading 加载动画,用户留存率翻倍。
蒋川
2022/03/16
9K0
7种最棒的Vue Loading加载动画组件测评与推荐-穷尽市面上所有加载动画效果类型
H5 App实战十二:H5 App的实战项目总结与进阶
这篇文章系统地介绍了网络故障排查的步骤和技巧,从初步排查到深入排查,内容全面且实用。文章详细阐述了检查物理连接、验证网络配置、测试基本网络连接等初步排查方法,以及检查路由器与交换机、网络流量、防火墙配置等深入排查步骤。同时,还提供了常见网络故障的解决方法,如IP地址冲突、DNS解析失败等。整体而言,该文对于网络管理员来说是一篇不可多得的实用指南,有助于提升网络管理的效率和技能水平。
china马斯克
2024/12/02
2630
WordPress纯代码外链跳转效果的3款样式免费分享
前面给大家讲了WordPress怎么利用纯代码实现WordPress的外链跳转效果,今天给大家分享几款跳转样式。
于飞云计算
2019/06/26
1.7K0
WordPress纯代码外链跳转效果的3款样式免费分享
推荐阅读
相关推荐
vue 多种加载动画详解
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验