骨架屏-css实现方式

最新推荐文章于 2024-05-29 19:51:57 发布

weixin_42215495

最新推荐文章于 2024-05-29 19:51:57 发布

阅读量597

点赞数

分类专栏： css js 文章标签： css javascript 前端

本文链接：https://blog.csdn.net/weixin_42215495/article/details/126959348

版权

本文介绍了骨架屏的实现方法，包括专门维护骨架屏页面和使用CSS方式。通过CSS设置数据加载时的样式，可以有效地展示页面加载过程。文中提到了工作中实际应用的解决方案。

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

	为了优化页面加载后台数据时的用户体验，在loading的过程中通过骨架屏显示。

骨架屏的实现：
1、专门维护多一个骨架屏页面，如element-ui种的el-skeleton组件
2、基于CSS方式实现，实现方式如下：
CSS设置数据加载时的样式

@keyframes skeleton-animation {
		0% {
			left: -100%
		}
		to {
			left: 150%
		}
	}
	.skeleton-load{
		
	}

.skeleton-load .skeleton {
		position: relative;
		overflow: hidden;
		border: none !important;
		border-radius: 5px;
		background-color: rgba(0,0,0,0)!important;
		background-image: none!important;
		pointer-events: none;
		margin-bottom: 8upx;
	}

.skeleton-load .skeleton:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 9;
	background-color: #ededed;
	display: block
}