CSS loading 正在加载画面

最新推荐文章于 2024-07-24 10:22:02 发布

非梦nj

最新推荐文章于 2024-07-24 10:22:02 发布

阅读量3.8k

点赞数

分类专栏：电脑

本文链接：https://blog.csdn.net/kevin_qq/article/details/53018727

版权

在后台ajax加载期间，通过CSS和HTML创建动态加载提示，例如旋转小球动画，提高用户体验。提供Vue.js和jQuery的实现示例，并附带Live DEMO链接。

摘要由CSDN通过智能技术生成

当后台 ajax 需要较长时间加载时，需要给用户提示，不然用户可能不知道你在做什么，屏幕却无反应。

比如在屏幕上显示几个变化的小球：http://kevinqq.herokuapp.com/bootstrap/manage/logs?page=1

https://tianya.herokuapp.com/articles/ty556242?page=1

CSS

.loading-overlay {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	opacity: .8;
	background: rgba(0, 0, 0, 0.1);
	transition: all .6s;
}

.sk-three-bounce {
	position: absolute;
	top: 60%;
	left: 48%;
  opacity: .8;