支付中loading动效

ゝ一纸荒年。 2022-12-05 15:18 233阅读 0赞

支付中动效

1：loading图标制作  2：支付中  '...' 动态显示

=> loading图标

.rotateBox{
    			height: 60px;
    			width: 60px;
    			background: #000;
    			border-radius: 50%;
    			position: relative;
    			margin:0 auto;
    		}
    		.hourBor{
    			height: 48px;
    			width: 3px;
    			border-radius: 2px;
    			/* background: #fff; */
    			overflow: hidden;
    			position: absolute;
    			left: 50%;
    			top:6px;
    			transform: translateX(-50%);
    			animation: x-spin 2s linear infinite;
    			z-index: 1;
    		}
    		.hourBor:before{
    			content: '';
    			position: absolute;
    			height: 24px;
    			width: 3px;
    			top: 0;
    			left: 0;
    			
    		}
    		
    		.hourBor:after{
    			content: '';
    			position: absolute;
    			height: 26px;
    			width: 3px;
    			bottom: 0;
    			left: 0;
    			background: #fff;
    		}
    		
    		.minuteBor{
    			height: 40px;
    			width: 4px;
    			border-radius: 4px;
    			overflow: hidden;
    			position: absolute;
    			left: 50%;
    			top:10px;
    			transform: translateX(-50%);
    			animation: x-spin 120s linear infinite;
    			z-index: 2;
    		}
    		
    		.minuteBor:before{
    			content: '';
    			position: absolute;
    			height: 20px;
    			width: 4px;
    			top: 0;
    			left: 0;
    		}
    		
    		.minuteBor:after{
    			content: '';
    			position: absolute;
    			height: 22px;
    			width: 4px;
    			bottom: 0;
    			left: 0;
    			background: #fff;
    		}
    		
    		@-webkit-keyframes x-spin {
    			0%    { -webkit-transform: translateX(-50%) rotate(0deg); }
    			50%   { -webkit-transform: translateX(-50%) rotate(180deg); }
    			100%  { -webkit-transform: translateX(-50%) rotate(360deg); }
            }

=> 支付中动态效果

.dotting {
    			display: inline-block; min-width: 2px; min-height: 2px;
    			box-shadow: 2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor; 
    			-webkit-animation: dot 4s infinite step-start both;
    			animation: dot 4s infinite step-start both;
    			*zoom: expression(this.innerHTML = '...'); /* IE7 */
    		}
    		.dotting:before { content: '...'; } /* IE8 */
    		
    		.dotting::before { content: ''; }
    		
    		:root .dotting { margin-right: 8px; } /* IE9+,FF,CH,OP,SF */
    
    		@-webkit-keyframes dot {
    			25% { box-shadow: none; }
    			50% { box-shadow: 2px 0 currentColor; }
    			75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor; }
    		}
    		
    		@keyframes dot {
    			25% { box-shadow: none; }
    			50% { box-shadow: 2px 0 currentColor; }
    			75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor; }
    		}
    		p{
    			text-align:center;
    		}

=> 完整demo

<!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<meta http-equiv="X-UA-Compatible" content="ie=edge">
    	<title></title>
    	<style type="text/css">
    		.rotateBox{
    			height: 60px;
    			width: 60px;
    			background: #000;
    			border-radius: 50%;
    			position: relative;
    			margin:0 auto;
    		}
    		.hourBor{
    			height: 48px;
    			width: 3px;
    			border-radius: 2px;
    			/* background: #fff; */
    			overflow: hidden;
    			position: absolute;
    			left: 50%;
    			top:6px;
    			transform: translateX(-50%);
    			animation: x-spin 2s linear infinite;
    			z-index: 1;
    		}
    		.hourBor:before{
    			content: '';
    			position: absolute;
    			height: 24px;
    			width: 3px;
    			top: 0;
    			left: 0;
    			
    		}
    		
    		.hourBor:after{
    			content: '';
    			position: absolute;
    			height: 26px;
    			width: 3px;
    			bottom: 0;
    			left: 0;
    			background: #fff;
    		}
    		
    		.minuteBor{
    			height: 40px;
    			width: 4px;
    			border-radius: 4px;
    			overflow: hidden;
    			position: absolute;
    			left: 50%;
    			top:10px;
    			transform: translateX(-50%);
    			animation: x-spin 120s linear infinite;
    			z-index: 2;
    		}
    		
    		.minuteBor:before{
    			content: '';
    			position: absolute;
    			height: 20px;
    			width: 4px;
    			top: 0;
    			left: 0;
    		}
    		
    		.minuteBor:after{
    			content: '';
    			position: absolute;
    			height: 22px;
    			width: 4px;
    			bottom: 0;
    			left: 0;
    			background: #fff;
    		}
    		
    		@-webkit-keyframes x-spin {
    			0%    { -webkit-transform: translateX(-50%) rotate(0deg); }
    			50%   { -webkit-transform: translateX(-50%) rotate(180deg); }
    			100%  { -webkit-transform: translateX(-50%) rotate(360deg); }
            }
    		
    		/**支付中...**/
    		
    		.dotting {
    			display: inline-block; min-width: 2px; min-height: 2px;
    			box-shadow: 2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor; 
    			-webkit-animation: dot 4s infinite step-start both;
    			animation: dot 4s infinite step-start both;
    			*zoom: expression(this.innerHTML = '...'); /* IE7 */
    		}
    		.dotting:before { content: '...'; } /* IE8 */
    		
    		.dotting::before { content: ''; }
    		
    		:root .dotting { margin-right: 8px; } /* IE9+,FF,CH,OP,SF */
    
    		@-webkit-keyframes dot {
    			25% { box-shadow: none; }
    			50% { box-shadow: 2px 0 currentColor; }
    			75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor; }
    		}
    		
    		@keyframes dot {
    			25% { box-shadow: none; }
    			50% { box-shadow: 2px 0 currentColor; }
    			75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor; }
    		}
    		p{
    			text-align:center;
    		}
    		
    	</style>
    </head>
    <body>
    	<div class="rotateBox">
    		<div class="hourBor"></div>
    		<div class="minuteBor"></div>
    	</div>
    	<p>支付中<span class="dotting"></span></p>
    </body>
    </html>