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

最新推荐文章于 2021-09-26 17:21:09 发布

glgom

最新推荐文章于 2021-09-26 17:21:09 发布

阅读量4.6k

点赞数 4

分类专栏： css javaScript 文章标签： css js waiting

本文链接：https://blog.csdn.net/glgom/article/details/88426043

版权

javaScript 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

在某些表单提交中，为了更好的用户体验，会加一个等待框，以便于告诉用户系统正在进行数据提交。下面是自己用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";
        //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]); 
	}
}

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”

以下是全部代码

<!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文件即可

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"; //给元素节点命名
    var nodeStyleVal = "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;"
    	nodeStyleVal += "height:"+window.innerHeight + "px; width:"+window.innerWidth+"px;";
    nodeStyle.value = nodeStyleVal;
    node.setAttributeNode(nodeClass); //设置元素节点的属性及值
    node.setAttributeNode(nodeStyle);
    node.setAttributeNode(nodeName);
    var iconNode = document.createElement("div");  //创建一个div元素节点，作为旋转图标的容器
    var iconClass = document.createAttribute("class");
    iconClass.value = "fa fa-spinner fa-pulse"; //必须引用font-awesome
    var iconStyle = document.createAttribute("style");
    var iconStyleValue = "position: relative;top: 48%;margin: 0 auto;font-size: 30px;";
    iconStyle.value = iconStyleValue;
    iconNode.setAttributeNode(iconStyle);
    iconNode.setAttributeNode(iconClass);

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

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

glgom

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
提交表单时的等待效果动画

在某些表单提交中，为了更好的用户体验，会加一个等待框，以便于告诉用户系统正在进行数据提交。下面是自己用js和css写的一个等待效果。如图。等待效果js代码：function showWaiting(){ var node=document.createElement("div"); //创建一个div元素节点，作为整个背景的容器 var nodeClass=docume...
复制链接

扫一扫

专栏目录