支付中loading动效

支付中动效

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

	
	
	
	
	


	

		

		

	
	
支付中