我有一个加载图标,单击按钮后应该加载。我希望图标的所有背景元素都褪色,以营造纯正的加载感。最简单的方法是什么?
编辑:我所有其他元素将淡出,而不仅仅是背景图像。
$("#show").on("click",function(){
$(".page-loader-indiv").show();
});
$(".page-loader-indiv").hide();
.page-loader-indiv{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 99999;
background: transparent url(http://web.codeevents.xyz/img/page-loader.gif) center center no-repeat;
}
body{
background:url(http://web.codeevents.xyz/img/Desserts.jpg);
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
This is some content
This is more content
</div>
<div class = "page-loader-indiv">
</div>
<div>
Click here to show loader
<button id ="show" >Show Loader</button>
</div>
最佳答案
我终于明白了,只是为加载程序图标设置了背景不透明度。
$("#show").on("click",function(){
$(".page-loader-indiv").fadeIn(3000).fadeOut(3000);
});
$(".page-loader-indiv").hide();
.page-loader-indiv{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 99999;
background:rgb(0,0,0,0.5) url(http://web.codeevents.xyz/img/page-loader.gif) center center no-repeat;
}
body{
background:url(http://web.codeevents.xyz/img/Desserts.jpg);
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
This is some content
This is more content
</div>
<div class = "page-loader-indiv">
</div>
<div>
Click here to show loader
<button id ="show" >Show Loader</button>
</div>