css3 中实现炫酷的loading效果

/*****遮罩层*****/
.model{
position: fixed;
width: 100%;
height: 100%;
background: palevioletred;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.loading{
width: 200px;
height: 10px;
border-radius:12px;
background-color: #fff;
margin-top: 50px;
overflow: hidden;
}
.loading .loading-bar{
width: 0%;
height: 10px;
background: red;
}
.jz-loading{
color: blue;
font-weight: bold;
position: absolute;
top: 50%;
transform: translateY(100px);
}
.move{
transform: scale(0.1) rotate(360deg);
}
/*****动画*****/
@keyframes jumping{
0%{
top:0;
box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
}
50%{
top:-50px;
box-shadow: 0 100px 20px rgba(0, 0, 0, .3);
}
100%{
top:0;
box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
}
}
@keyframes eyesmove{
0%{
transform: translateX(-100%);
}
10%{
transform: translateX(-100%);
}
90%{
transform: translateX(100%);
}
100%{
transform: translateX(100%);
}
}

js:

var timer =null;
var add =0;
timer=setInterval(()=>{
add++;
$('.loading-bar').css('width',`${add}%`);
if(add>=100){
$('.model .master').addClass('move');
$('.model').fadeOut();
clearInterval(timer);
timer =null;
}
},30)

总结

以上所述是小编给大家介绍的css3 中实现炫酷的loading效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！