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); } }
 </style>

<script language="javascript" type="text/javascript">
function showdiv() { 
document.getElementById("bg").style.display ="block";
 }
function show()
    {
        document.getElementById('bg').style.display='none'
    };