CSS 实现各种 Loading 效果

CSS 实现各种 Loading 效果

1.效果1

将以下代码加入到网站公共头部分：

<style>
.progress-4 {width:120px;height:20px;-webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20%;background:linear-gradient(#000 0 0) 0/0% no-repeat #ddd;animation:p4 2s infinite steps(6);
}
@keyframes p4 {100% {background-size:120%}
}
.spinner {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
.loading_bj{width: 100%;height: 100%;position:fixed;top: 0;left: 0;z-index: 99999;background-color: rgba(255,255,255,0.5);transition: 0.2s ease-in;transition-property: background-color;display:none;
}
</style>
<div class=	loading_bj	 id=	CI-loading	><div class=progress-4 spinner></div>
</div>

效果实现：

//显示
$(	#CI-loading	).show();
//隐藏
$(	#CI-loading	).hide();

问题：IE 与 部分浏览器不兼容 linear-gradient 属性

2.效果2

将以下代码加入到网站公共头部分：

<style>
.loading_bj{width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 99999;background-color: rgba(255,255,255,0.5);transition: 0.2s ease-in;transition-property: background-color;display:none;
}
.spinner2 {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 50px;height: 40px;text-align: center;font-size: 10px;
}
.spinner2 > div {background-color: #;height: 100%;width: 6px;display: inline-block;-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner2 .rect2 {-webkit-animation-delay: -1.1s;animation-delay: -1.1s;
}.spinner2 .rect {-webkit-animation-delay: -1.0s;animation-delay: -1.0s;
}.spinner2 .rect4 {-webkit-animation-delay: -0.9s;animation-delay: -0.9s;
}.spinner2 .rect5 {-webkit-animation-delay: -0.8s;animation-delay: -0.8s;
}@-webkit-keyframes sk-stretchdelay {0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  20% { -webkit-transform: scaleY(1.0) }
}@keyframes sk-stretchdelay {0%, 40%, 100% { transform: scaleY(0.4);-webkit-transform: scaleY(0.4);}  20% { transform: scaleY(1.0);-webkit-transform: scaleY(1.0);}
}
</style>
<div class=	loading_bj	 id=	CI-loading	>
<div class=spinner2><div class=rect1></div><div class=rect2></div><div class=rect></div><div class=rect4></div><div class=rect5></div>
</div>
</div>

效果实现：

//显示
$(	#CI-loading	).show();
//隐藏
$(	#CI-loading	).hide();

兼容各大主流浏览器

总结

这篇文章主要介绍了CSS 实现各种 Loading 效果附带解析过程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下。