loading

最新推荐文章于 2021-11-03 15:26:49 发布
最新推荐文章于 2021-11-03 15:26:49 发布
阅读量132 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36801493/article/details/102974596
版权 
<template>
  <div id="local-loading" v-show="show">
    <div class="loader">
      <div class="loadtext">加载中•••</div>
    </div>
  </div>
</template>

<script>
/**
   * 局部加载动画
 * @author 万奕舟
   * @module component-loading
   * @example 点击下方链接查看demo：{@link components/loading/demo.vue}
   * 页面效果：'/demo.html/#/LoadingDemo'
  */
export default {
  name: 'local-loading',
  /**
     * @prop {Boolean} [showLoading = false] - 是否显示动画
     */
  props: {
    show: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss" scoped>
  #local-loading{
    position: absolute;
    width: 100%;
    height: 100%;
  }
  #local-loading {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	// background: linear-gradient(to left top, #f27342, #f0c600);
  
	z-index: 99999;
}

.loader {
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}

.loader {
	font-size: 20px;
	width: 1em;
	height: 1em;
	border-radius: 50% !important;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -1em 0 0 -1em;
	-webkit-animation: loadpage 1.1s infinite ease;
	animation: loadpage 1.1s infinite ease;
	position: relative;
}

.loadtext {
	font-size: 12px;
	color: #fff;
	position: absolute;
	top: 0;
	left: -11px;
	width: 60px;
}

@-webkit-keyframes loadpage {
	0%,
	100% {
		box-shadow: 0em -2.6em 0em 0em black, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
	}
	12.5% {
		box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em black, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
	}
	25% {
		box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em black, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
	}
	37.5% {
		box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
	}
	50% {
		box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em black, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
	}
	62.5% {
		box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em black, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
	}
	75% {
		box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em black, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
	}
	87.5% {
		box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em black;
	}
}

@keyframes loadpage {
	0%,
	100% {
		box-shadow: 0em -2.6em 0em 0em black, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
	}
	12.5% {
		box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em black, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
	}
	25% {
		box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em black, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
	}
	37.5% {
		box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
	}
	50% {
		box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em black, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
	}
	62.5% {
		box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em black, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
	}
	75% {
		box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em black, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
	}
	87.5% {
		box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em black;
	}
}
  
</style>
奕舟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[nltk_data] Error loading punkt: ＜urlopen error [Errno 111] Connection refused＞解决方案
weixin_43178406的博客
08-04 5万+
本文主要介绍了[nltk_data] Error loading punkt: 解决方案，需要特别说明的是本方法不需要下载完整的nltk包，也不需要设置网络，希望能对使用python nltk的同学们有所帮助。 文章目录 1. 问题描述 2. 解决方案
谈谈加载(Loading)的那点事
weixin_33964094的博客
10-23 167
谈谈加载(Loading)的那点事 2013/10/12 | 分类：设计|0 条评论| 标签：交互设计,加载 分享到：33 原文出处：搜狐焦点 对于加载(loading)，想必大家都不陌生。每当看到加载页中那个不停转啊转的圈圈，或者是 “Loading…”后面不停闪动的三个点点，心里都会涌起各种焦躁反感。 根据一份调查得出，用户能够忍受加载的最长时间...
Advanced Dissolve V2018.14.unitypackage
07-02
Advanced Dissolve Unity高级溶解插件 核心特征：（支持：5.6.4及以上版本，使用2018.2.5版本可以提高兼容性） 使用动态掩模对象溶解：球体、盒子、圆柱体、圆锥、平面、每轴(X、Y、Z)。同时可以使用4个对象。 多纹理混合用于α断口边缘噪声控制。 紫外、三平面和屏幕-空间溶解投影。 各种边缘颜色控制器，包括简单的颜色、梯度和斜坡纹理。 实心、光滑和嘈杂的边缘。 颜色发射在全球照明系统中是可见的。 与团结后处理和图像效果完全兼容。 包括标准，物理基础，遗产，单向光，顶点列表，未亮，粒子，统一自然和速度树着色器。 与TextMeshPro兼容。
给页面加上loading加载效果
热门推荐
HELLO WORLD
06-20 3万+
在页面中载入进度条，是一种常见的特效。它比较实用，当页面的元素比较多的时候，使用它可以让网友不至于等的着急。其原理很简单：在网页的头部放置一个文字或者图片的 loading 状态，然后页尾载入一段 JS 隐藏掉，即根据浏览器的载入顺序来实现的简易 Loading 状态条。 此效果也有插件可实现，不过此次分享的是自定义方法。 效果 demo http://build.gzwhir.com...
loading加载
yzyblog的博客
06-27 1万+
页面加载时需要加载，请求接口也需要loading。在前端loading的需求无处不在，就是为了让用户体验更好。做loading的方式也有很多：下面我处理loading的用一张小的png图，yong            .wgui-message{     position: fixed;     top: 50%;     left: 50%;     z-index: 11010; ...
CSS3实现18种Loading效果
zcc的博客
03-03 2783
在网上看到一篇文章，css实现loading的效果，特此整理代码方便以后使用。 第1种效果： <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </.
Flutter loading
zhutao_java的专栏
02-18 2516
在加载数据或者向后台发送请求后，需要有一个正在加载的过渡效果。可以用showDialog和插件flutter_spinkit解决。 最终效果图 抽出一个名为LoadingPage的class表达loading效果，如下： import 'package:flutter/material.dart'; import 'package:flutter_spinkit/flutter_spi...
css实现loading,CSS3实现18种Loading效果
weixin_42102220的博客
08-03 3149
昨晚用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记……第1种效果：代码如下：.loading{width: 80px;height: 40px;margin: 0 auto;margin-top:100px;}.loading span{display: inline-block;width: 8px;height: 100%;border-radiu...
layui loading
qq_52140056的博客
11-03 6106
1.首先确定layui 1-1.引入layui.js等所需，或者在项目里layui.use(['layui','jquery'],function(){})等，先排除粗心大意造成的问题 2.直接上代码 layui.use(['layer', 'form', 'table', 'admin', 'ax', 'func','jquery'], function () { var $ = layui.jquery; var table=layui.table; va...
叶子飞旋loading效果 源码程序
03-23
在IT行业中，用户体验是至关重要的，而加载动画（loading animation）正是提升用户体验的一种方式。"叶子飞旋loading效果 源码程序"提供了一个独特且吸引人的加载动效设计，旨在抓住用户注意力并减少他们在等待内容...
LoadingDialog
07-06
"LoadingDialog"是一种在Android应用开发中常见的用户界面元素，用于在执行耗时操作（如数据加载、网络请求等）时向用户提供反馈，通常显示一个旋转的菊花图标和简短的文字提示，告知用户系统正在处理任务。...
页面loading插件
09-04
页面加载（loading）插件是Web开发中提升用户体验的重要工具，尤其在使用AJAX进行异步数据传输时显得尤为重要。AJAX（Asynchronous JavaScript and XML）允许网页在不重新加载整个页面的情况下，与服务器交换数据并...
loading加载gif动画
01-02
让我们深入探讨一下“loading加载gif动画”的相关知识点。 1. **GIF格式**：GIF（Graphics Interchange Format）是一种流行的图像文件格式，支持透明度和动画功能。由于其体积小、跨平台兼容性好，常用于网页设计中...
Android 自定义全局Loading页面
06-20
在Android应用开发中，为了提供良好的用户体验，我们经常需要在数据加载、网络请求或其它耗时操作时显示全局Loading页面，以告知用户程序正在进行后台处理并提示他们稍等片刻。本篇文章将深入探讨如何在Android中...
css实现loading,CSS3实现10种Loading效果
weixin_42115074的博客
08-03 3349
很适合菜鸟，果断搬过来了。第1种效果：代码如下：htmlcss.loading{width: 80px;height: 40px;margin: 0 auto;margin-top:100px;}.loading span{display: inline-block;width: 8px;height: 100%;border-radius: 4px;background: lightgreen;...
(vue) 适合初学 火影对打小游戏 有注释 代码短
qq_36801493的博客
02-07 279
忙里偷闲花了3天摸鱼的时间用 vue 做了一个火影的对打小游戏(有点小bug) 手机主流浏览器复制如下地址或者谷歌浏览器复制如下地址转换成手机模式直接开玩: https://wyz5677.github.io/Naruto-Games/ 有兴趣的代码自取: github账号: wyz5677 项目名: Naruto-Games github加我好友后找到项目下载源代码哦 或者网址输入直接下载 https://github.com/wyz5677/Naruto-Games ...
基于Springboot和Vue的图书借还管理系统源码 图书借还管理系统代码（高分毕设）
最新发布
07-28
图书借还管理系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
pinia loading
09-14
对于Pinia，loading的功能是通过设置loading属性来实现的。根据引用，可以看出Pinia的loading功能可以通过定义loading属性并手动改变其值来实现。在使用Pinia时，可以按照以下方法进行操作： 1. 首先，在项目中导入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值