css+js实现提交按钮点击进度反馈提示效果代码-html代码-BFW代码库

css+js实现提交按钮点击进度反馈提示效果代码

代码语言：html

代码描述：css+js实现提交按钮点击进度反馈提示效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
        	font-family:'Roboto';
        }
        .super-container {
        	width:100vw;
        	height:100vh;
        	display:flex;
        	justify-content:center;
        	align-items:center;
        }
        .container {
        	width:200px;
        	height:43px;
        	position:relative;
        	text-align:center;
        	border-radius:25px;
        	background-color:#D3E5FB;
        	background:linear-gradient(    to left,#D3E5FB,#D3E5FB 50%,#4675a8 50%,#3c95fb  );
        	background-position:90% 0;
        	background-size:200% 100%;
        	border:2px solid #3c95fb;
        	pointer-events:all;
        	transition:0.7s all;
        }
        .reset-background {
        	border-radius:25px;
        	background-color:#D3E5FB;
        	background:linear-gradient(    to left,transparent,transparent 50%,#4675a8 50%,#3c95fb  );
        	background-position:90% 0;
        	background-size:200% 100%;
        }
        .circle {
        	display:flex;
        	justify-content:center;
        	align-items:center;
        	position:absolute;
        	left:0%;
        	height:44px;
        	width:44px;
        	background-color:#3c95fb;
        	border-radius:50%;
        	box-shadow:1px 1px 10px grey;
        	transition:0.7s all;
        }
        .text {
        	height:100%;
        	display:flex;
        	justify-content:center;
        	align-items:center;
        	font-size:14px;
        	font-weight:500;
        	color:#3c95fb;
        	user-select:none;
        }
        .text-request {
        	color:#D3E5FB;
        }
        .request {
        	left:calc(88% - 42px);
        }
        .receive {
        	left:calc(100% - 42px);
        	background-color:#4EC10F;
        	transition:2.7s all;
        }
        .failure {
        	left:0;
        }
        .background-request {
        	background-position:23% 0;
        	user-select:none;
        	pointer-events:none;
        }
        .background-receive {
        	background-position:0 0;
        	background:#daffd9;
        	border-color:#4ABD5D;
        	user-select:none;
        	pointer-events:none;
        	transition:1.7s all;
        }
        .background-failure {
        	background-position:90% 0;
        	user-select:none;
        	pointer-events:none;
        	transition:0.7s all;
        }
        .text-success {
        	color:#59bf42;
        }
        .rotate {
        	-webkit-animation:spin 2s linear infinite;
        	-moz-animation:spin 2s linear infinite;
        	animation:spin 2s linear infinite;
        	transition:2.7s all;
        }
        @-moz-keyframes spin {
        	100% {
        	-moz-transform:rotate(-360deg);
        }
        }@-webkit-keyframes spin {
        	100% {
        	-webkit-transform:rotate(-360deg);
        }
        }@keyframes spin {
        	100% {
        	-webkit-transform:rotate(-360deg);
        	transform:rotate(-360deg);
        }
        }
    </style>
</head>



<body onload='init()'>
    <div class='super-container'>
        <div id='container' class='container' onclick='onClick()'>
            <div id='circle' class='circle'></div>
            <div id='text' class='text'>Submit</div>
        </div>
    </div>

    <script>
        function init() {
          updateSVG('init');
        }
        
        function onClick() {
          updateSVG('request');
          addClass('container', 'background-request');
          addClass('circle', 'request');
          addClass('text', 'text-request');
          changeText('Loading...');
        
          
          setTimeout(() => {
            /*
            Call on request success
            */
            receive();
            reset();
          }, 2000);
          
           
          // setTimeout(() => {
          //   /*
          //   Call on request failure
          //   */
          //   failure();
          // }, 2000);  
          
        }
        
        
        /*
        @description: Methods executed on request success
        */
        function receive(){
           updateSVG('receive');
           removeClass('container', 'background-request');
           addClass('container', 'background-receive');
           addClass('circle', 'receive');
           addClass('text', 'text-success');
           changeText('Success!');
           removeClass('text', 'text-request');
        }
        
        /*
        @description: Methods executed on request failure
        */
        function failure(){
           reset();
        }
        
        function reset(){
          setTimeout(()=>{
            removeClass('container', 'background-request');                   
      .........完整代码请登录后点击上方下载按钮下载查看