异步下载圆形进度条显示进度

Posted 2020-10-18 前端攻城弱鸡

圆形进度条参考链接即可：使用css3实现圆形进度条

需求点击下载后遮罩层显示下载进度：

1.圆形进度条参考以上链接，有点小瑕疵，可更改定位距离实现重合。 

2.遮罩层：

.lbOverlay{

  display: none;

  position: fixed;

  left: 0;

  top: 0;

  zoom: 1;

  background: black;

  z-index: 99999;

  width:100%;

  height:100%;

  filter:alpha(opacity=70); /*IE滤镜，透明度50%*/

  -moz-opacity:0.7; /*Firefox私有，透明度50%*/

  opacity:0.7;/*其他，透明度50%*/

} 

3.获取进度百分比来旋转角度( rotate(-135deg))