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

柔光的暖阳◎ 2022-03-09 08:10 268阅读 0赞

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

![20190312212921712.gif][] 等待效果

js代码：

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;
    	}
            .icon-position{
                position: relative;
                top: 48%;
                margin: 0 auto;
                font-size: 30px;
            }

还可以引用fontawesome的样式 fa-spin使任意图标旋转：

使用 `fa-spin` 类来使任意图标旋转，现在您还可以使用 `fa-pulse` 来使其进行8方位旋转。尤其适合 `fa-spinner`、`fa-refresh` 和 `fa-cog` 。

将iconClass节点的value赋值为 “fa fa-spinner fa-pulse icon-position”

![20190513170439431.gif][]

以下是全部代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>等待旋转效果</title>
        <link rel="stylesheet" href="../extends/font-awesome-4.7.0/css/font-awesome.css">
        <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;
            }
            .icon-position{
                position: relative;
                top: 48%;
                margin: 0 auto;
                font-size: 30px;
            }
            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";
            //iconClass.value = "fa fa-spinner fa-pulse icon-position";
            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=wait.length - 1; i>=0; i--){
                document.body.removeChild(wait[i]);
            }
        }
    </script>
    </html>

以下是js代码，可写为js文件，以后使用调用js文件即可

[20190312212921712.gif]: /images/20220309/bf750cc9a01e45a6992a60c5833db011.png
[20190513170439431.gif]: /images/20220309/33388fc72d6243ad8d25d419a78fffbc.png