这个进度条是应用css3的渐变背景做出来的，然后应用background-size属性设置大小，然后以这个size为单位平铺。分析的时候你可以先禁用animation这个动画，然后可以用firebug设置background-repeat:no-repeat;来查看它一个单元的渐变背景。得到非动画的原理，我们再来研究动画部分，背景图片的运动，当然是用background-position了。

CSS3制作一个类似于文件Loading的效果，在这里没有写动画效果，主要考虑文件加载对应的文本，css实现效果会有难度。在这个DEMO中主要运用了四个知识点：第一是google font api，用来制作特殊的英文字体效果；第二个是使用CSS的渐变，制作了渐变的面板效果；第三使用box-shadow，制作面板之类的描边效果；第四就是使用border-radius制作圆角效果。