如何用css3实现一个简单的进度条

用css3实现多样化的进度条

首先，什么是进度条，跟大家举个例子，我们在浏览一个网页时，网页在加载的时候会有一个进度的提示，这样能够准确的告诉我们什么时候资源可以完全加载出来，最常见的就是一个圆不断的旋转，数字在不断的增加。

下面我就跟大家简单介绍一下：
1.首先，学习进度条，并且能够实现进度条可以运动，例如上面提到的可以旋转，跳动等等。
2.熟悉并掌握 css3的语法，transfrom 和 animation 的区别和用法
3. 浏览器的兼容性问题

什么是进度条？

给大家看一个图片

这是一个进度条，如何实现线条有规律的运动呢

tansform和animation的主要区别

两者都是定义动画的前者transform一般用来定义某个对象静态的进行位置的偏移，准确来说是死的，用translation，rotate来定义对象的具体位置
而animation 一般用来定义一个动画组，@keyframes + 动画名称（可以任意定义一个名称）
例如：

animation: load 1s infinite;

animation的基本格式是：动画函数名称 + 时间间隔函数

定义的animation动画函数:

@keyframes  load{
				0%,40%,100%{-webkit-transform: scaleY(1);transform: scaleY(1);}
				20%{ -webkit-transform: scaleY(0.4); transform: scaleY(0.4);}
			}

scale实现缩放，上面的代码是根据Y轴进行上下缩放

下面具体实现一下:

htmi:

这是html部分：首先定义一个大的div（loading）用来包裹里面的两个小的div （pic和pic2）pic里面加上标签i的块级元素。

css：分别loading 和pic及pic2添加样式

*{
				margin: 0;
				padding: 0;
			}
			#loading{
				width:100%;
				height: 100%;
				background: #fffff;
				position: fixed;
				background: #fffff;
			}
			#loading .pic{
				width: 90px;
				height: 50px;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				z-index: 100;
			}
			#loading .pic2{width: 90px;
				height: 90px;
				position: absolute;
				left: 0;
				top: 200px;
				right: 0;
				bottom: 0;
				margin: auto;
				font-size: 20px;
				text-align: center;
				}
			#loading .pic2 span
			{
				width: 90px;
				height: 90px;
				position: absolute;
				left: 0;
				top: 0px;
				right: 0;
				bottom: 0;
				margin: auto;
				box-shadow: 0 3px #008000;
				border-radius: 50%;
				-webkit-animation: load1 1s infinite;
				
			}
			#loading .pic2 b{
				font-size: 20px;
				position: relative;
				top:30px;
			}

css：定义动画

#loading .pic i{
				display: block;
				width: 9px;
				height: 50px;
              float: left;
              margin: 0 2px;
              background: #00CC99;
              -webkit-transform: scaleY(0.4);
                  -ms-transform: scaleY(0.4);
                      transform: scaleY(0.4);
              -webkit-animation: load 1.2s infinite;
                      animation: load 1.2s infinite;
			}
			@-webkit-keyframes  load{
				0%,40%,100%{-webkit-transform: scaleY(1);transform: scaleY(1);}
				20%{ -webkit-transform: scaleY(0.4); transform: scaleY(0.4);}
			}
			@keyframes  load{
				0%,40%,100%{-webkit-transform: scaleY(1);transform: scaleY(1);}
				20%{ -webkit-transform: scaleY(0.4); transform: scaleY(0.4);}
			}
			#loading .pic i:nth-child(1){}
			#loading .pic i:nth-child(2){-webkit-animation-delay: 0.1s;animation-delay: 0.1s;}
			#loading .pic i:nth-child(3){-webkit-animation-delay: 0.2s;animation-delay: 0.2s;}
			#loading .pic i:nth-child(4){-webkit-animation-delay: 0.3s;animation-delay: 0.3s;}
			#loading .pic i:nth-child(5){-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}
			#loading .pic i:nth-child(6){-webkit-animation-delay: 0.5s;animation-delay: 0.5s;}
			@-webkit-keyframes load1{
				from{-webkit-transform:rotate(0deg);}
				to{-webkit-transform: rotate(360deg);}
			}

pic中我们定义了多个i标签，要实现pic当中的每一个元素跳动，就要分别给他们的位置进行分配，所以用到了 目标元素：nth-child(编号)｛语句｝
最后记得考虑浏览器的兼容问题