提交表单时的等待效果动画

在某些表单提交中，为了更好的用户体验，会加一个等待框，以便于告诉用户系统正在进行数据提交。下面是自己用js和css写的一个等待效果。如图。

js代码：

function showWaiting(){
	var node=document.createElement("div");  //创建一个div元素节点，作为整个背景的容器
	var nodeClass=document.createAttribute("class"); //创建class元素属性
	var nodeStyle = document.createAttribute("style"); //创建style元素属性
	var nodeName = document.createAttribute("name"); //创建name元素属性
	nodeName.value = "divWaiting"; //给元素节点命名
	nodeClass.value = "div-waiting"; //元素属性赋值
	nodeStyle.value = "height:"+window.innerHeight + "px; width:"+window.innerWidth+"px;";
	node.setAttributeNode(nodeClass); //设置元素节点的属性及值
	node.setAttributeNode(nodeStyle);
	node.setAttributeNode(nodeName);
	var iconNode = document.createElement("div");  //创建一个div元素节点，作为旋转图标的容器
	var iconClass = document.createAttribute("class");
	iconClass.value = "icon-waiting";
	iconNode.setAttributeNode(iconClass);
	
	node.appendChild(iconNode);  //将图标节点放到整个背景的元素节点
	document.body.appendChild(node); //将整个背景div插入到body中
}

function closeWaiting(){
	var wait = document.getElementsByName("divWaiting"); //获取name为divWaiting的元素节点
	console.log(wait);
    //遍历所有的节点，将body中的所有等待旋转效果去掉
	for(var i=0; i<wait.length; i++){  
		document.body.removeChild(wait[i]); 
	}
}

css代码：

@-webkit-keyframes spin {
	  	to {
	    	-webkit-transform: rotate(360deg);
	        transform: rotate(360deg);
	  	}
	}
	
	@keyframes spin {
		to {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
	.div-waiting{
		position: fixed;
	    z-index: 998;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
		opacity: 1;
	    background: rgba(0,0,0,0.2);
	    vertical-align: middle;
	    text-align: center;
	}
	.icon-waiting{
		position: relative;
		top: 48%;
	    width: 5rem;
	    height: 5rem;
	    margin: 0 auto;
	    border-radius: 50%;
	    border: 0.5rem solid rgba(21, 21, 21, 0.4);
	    border-top-color: #e1e1e1;
	    -webkit-animation: 1.5s spin infinite linear;
	    animation: 1.5s spin infinite linear;
	}

以下是全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>等待旋转效果</title>
    <style type="text/css">
        @-webkit-keyframes spin {
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes spin {
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        .div-waiting{
            position: fixed;
            z-index: 998;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 1;
            background: rgba(0,0,0,0.2);
            vertical-align: middle;
            text-align: center;
        }
        .icon-waiting{
            position: relative;
            top: 48%;
            width: 5rem;
            height: 5rem;
            margin: 0 auto;
            border-radius: 50%;
            border: 0.5rem solid rgba(21, 21, 21, 0.4);
            border-top-color: #e1e1e1;
            -webkit-animation: 1.5s spin infinite linear;
            animation: 1.5s spin infinite linear;
        }
        button{
            padding: 6px 12px;
            margin: 10px;
            background: #00bbee;
            border: 1px solid #00bfff;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <button onclick="showWaiting()">显示</button>
    <button onclick="closeWaiting()" style="z-index: 10000;position: relative;">关闭</button>
</body>

<script type="text/javascript">
    function showWaiting(){
        var node=document.createElement("div");  //创建一个div元素节点，作为整个背景的容器
        var nodeClass=document.createAttribute("class"); //创建class元素属性
        var nodeStyle = document.createAttribute("style"); //创建style元素属性
        var nodeName = document.createAttribute("name"); //创建name元素属性
        nodeName.value = "divWaiting"; //给元素节点命名
        nodeClass.value = "div-waiting"; //元素属性赋值
        nodeStyle.value = "height:"+window.innerHeight + "px; width:"+window.innerWidth+"px;";
        node.setAttributeNode(nodeClass); //设置元素节点的属性及值
        node.setAttributeNode(nodeStyle);
        node.setAttributeNode(nodeName);
        var iconNode = document.createElement("div");  //创建一个div元素节点，作为旋转图标的容器
        var iconClass = document.createAttribute("class");
        iconClass.value = "icon-waiting";
        iconNode.setAttributeNode(iconClass);

        node.appendChild(iconNode);  //将图标节点放到整个背景的元素节点
        document.body.appendChild(node); //将整个背景div插入到body中
    }

    function closeWaiting(){
        var wait = document.getElementsByName("divWaiting"); //获取name为divWaiting的元素节点
        console.log(wait);
        //遍历所有的节点，将body中的所有等待旋转效果去掉
        for(var i=0; i<wait.length; i++){
            document.body.removeChild(wait[i]);
        }
    }
</script>
</html>

提交表单时的等待效果动画

相关推荐