html遮罩动画怎么停下来,js实现网页DIV遮罩层Loading动画效果

这两天接到任务，做一个简单地a标签点击弹出loading动画，经过个人网上查找资料寻求帮助等，终于解决这个问题，有如下功能，点击a标签弹出遮罩层Loading动画，5s钟自动关闭遮罩层，功能很简单，分享大家啦。感谢最代码对我的帮助

.sk-circle .sk-circle4:before {

-webkit-animation-delay: -0.9s;

animation-delay: -0.9s; }

.sk-circle .sk-circle5:before {

-webkit-animation-delay: -0.8s;

animation-delay: -0.8s; }

.sk-circle .sk-circle6:before {

-webkit-animation-delay: -0.7s;

animation-delay: -0.7s; }

.sk-circle .sk-circle7:before {

-webkit-animation-delay: -0.6s;

animation-delay: -0.6s; }

.sk-circle .sk-circle8:before {

-webkit-animation-delay: -0.5s;

animation-delay: -0.5s; }

.sk-circle .sk-circle9:before {

-webkit-animation-delay: -0.4s;

animation-delay: -0.4s; }

.sk-circle .sk-circle10:before {

-webkit-animation-delay: -0.3s;

animation-delay: -0.3s; }

.sk-circle .sk-circle11:before {

-webkit-animation-delay: -0.2s;

animation-delay: -0.2s; }

.sk-circle .sk-circle12:before {

-webkit-animation-delay: -0.1s;

animation-delay: -0.1s; }

@-webkit-keyframes sk-circleBounceDelay {

0%, 80%, 100% {

-webkit-transform: scale(0);

transform: scale(0); }

40% {

-webkit-transform: scale(1);

transform: scale(1); } }

@keyframes sk-circleBounceDelay {

0%, 80%, 100% {

-webkit-transform: scale(0);

transform: scale(0); }

40% {

-webkit-transform: scale(1);

transform: scale(1); } }

function showdiv() {

document.getElementById("bg").style.display ="block";

}

function show()

{

document.getElementById('bg').style.display='none'

};