进度条制作-CSS动画

╰半夏微凉° 2021-09-16 21:30 387阅读 0赞

### 温馨提示 ###

##### 代码参考 #####

\[本人博客\]：https://blog.csdn.net/qq\_41115965/article/details/83713343

--------------------

##### 代码修改 #####

不同于使用  GIF 图片，使用 CSS3 动画的时候  loading 布局，应做以下改变:

##### html文件 #####

##### CSS文件 #####

/* 加载动画样式start */
    			.loading { 
    				width: 100%;
    				height: 100%;
    				position: fixed;
    				top: 0;
    				left: 0;
    				z-index: 100;
    				background: #ffffff;
    			}
    
    			.loading .picture { 
    				position: absolute;
    				top: 0;
    				left: 0;
    				bottom: 0;
    				right: 0;
    				margin: auto;
    				width: 70px;
    				height: 50px;
    			}
    
    			.loading .picture i { 
    				display: inline-block;
    				background: #FF0000;
    				width: 6px;
    				height: 50px;
    				margin: 0 2px;
    				animation: loading 1.2s infinite;
    				margin: 0 auto;
    			}
    			.loading .picture i:nth-child(2){ 
    				animation-delay: 0.2s;
    			}
    			
    			.loading .picture i:nth-child(3){ 
    				animation-delay: 0.4s;
    			}
    			.loading .picture i:nth-child(4){ 
    				animation-delay: 0.6s;
    			}
    			.loading .picture i:nth-child(5){ 
    				animation-delay: 0.8s;
    			}
    
    			@keyframes loading{ 
    				0%, 40%,100%{ 
    					transform: scaleY(0.4);
    				}
    				20%{ 
    					transform: scaleY(1.0);
    				}
    			}
    
    			/* 加载动画样式end */

--------------------

##### 注意事项 #####

对应的  JS  文件不需要做修改。

--------------------

##### 效果图 #####

![loading动画][loading]

[loading]: /images/20210802/279934e4a3e84b9b85db873e051c0d31.png