html5 内置 progress

下面是 css 模拟的例子

css progress 例子一

repeating-linear-gradient(角度,颜色,颜色…)

• 角度 30deg 或者 to left(to left top) 之类
• 颜色 #cc0000 + 宽度（百分比或者像素）

比如下面的例子：

修改颜色：

background-image: repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(255,255,255,.1) 14px, rgba(255,255,255,.1) 28px);

方向：45度；透明 到 透明 宽度14像素；10％（不）透明的白色，宽度14像素

css progress 例子二

background-image: repeating-linear-gradient(90deg,red,orange,yellow,green,blue,purple,red);    

90度（水平渐变，赤橙黄绿青蓝紫）青 的英文单词(cyan)不行！：（ 最后到回到红色。

动画用 background-position-x:100% 不行，没办法只好像素。

@-webkit-keyframes progress1{
    0%{background-position: 0 0;}
    100%{background-position: 400px 0}
}

放射（radial）渐变

background:#cc0000 repeating-radial-gradient(ellipse closest-side, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 10px,transparent 10px,transparent 20px);

放射渐变效果二

修改颜色：

这个其实不是 repeating-*-gradient。模拟win8启动？

各自为战

考量下面的代码，多个背景的属性其实可以各自为战。

background-image:
    radial-gradient(rgba(255, 255, 255, 1) 50%, rgba(255,255,255,0) 80%),
    linear-gradient(rgba(255, 255, 255, 1) 5px, transparent 5px),
    linear-gradient(0, rgba(0, 100, 0, 0.75) 3px, transparent 3px);
background-size:
    400px 60px,
    15px 15px,
    7px 7px;
background-position:
    1px 1px,
    -2px -2px,
    1px 1px;
background-position:
        no-repeat,
        repeat,
        repeat

via

• repeating-linear-gradient
• repeating-radial-gradient