如题,像Jquery等很多三方库可能自带Loading插件,那么如何自己写一个Loading效果呢?
.maskLayer {
z-index: 10000;
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
background: #0000004d;
justify-content: center;
align-items: center;
display: flex;
}
.maskLayer .spinner-border1 {
width: 50px;
height: 50px;
border: .5em solid currentColor;
display: inline-block;
vertical-align: text-bottom;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border1 .75s linear infinite;
animation: spinner-border1 .75s linear infinite;
}
@keyframes spinner-border1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
/* 25% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
75% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}*/
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spinner-border1 /*Safari and Chrome*/
{
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<link type="text/css" href="..\Desktop\loading\loading.css" rel="stylesheet" />
<!--Loading-->
<div class="maskLayer">
<div class="spinner-border1"> </div>
</div>
/**
* Method of setting page loading animation
* @param {boolean} isShow
* @returns {void}
*/
showMaskLayer(isShow) {
$('.maskLayer').attr('hidden', !isShow);
}
animation例子见下方链接:
https://www.w3school.com.cn/tiy/t.asp?f=eg_css3_animation
仅供学习参考,如有侵权联系我删除